Basic New Theme

[charles]

already viewed Creating a new NodeBB Theme

without inheriting anything and building from scratch, what is needed in the folder to get it to work?

theme.less, theme.json, package,json

what else?

[psychobunny]

This might be useful:

GitHub - NodeBB/nodebb-theme-quickstart: Quickstart Theming Shell

Quickstart Theming Shell. Contribute to NodeBB/nodebb-theme-quickstart development by creating an account on GitHub.

GitHub (github.com)

Fork / copy it and change the theme name and voila!

[charles]

@psychobunny Used that and when I deleted the import path from theme.less I couldn't load the site.

Would like to know what is the very minimum to start a theme from scratch. A blank working theme with just a few simple text.

[pichalite]

@charles did you specify your own less files in theme.less after you removed the import from that file?

[charles]

@pichalite error after running grunt

verbose: [plugins] Loading templates (nodebb-plugin-composer-default)
error: [meta/css] Could not minify LESS/CSS: variable @btn-primary-bg is undefined

the only line in theme.less is background color of black

[pichalite]

@charles what about all the other css required for the theme?

[charles]

@pichalite what other css is required for the theme?

Sorry if I didn't explain correctly. I'm looking for the very minimum to get a theme working for nodebb without linking to and depend on anything using imports, etc.

for example: all you need to get started for wordpress is style.css and index.php

I just want to create a blank theme with a few simple text and some styling.

nodebb equivalent to index.html + style.css

I hope that makes sense. Is that even possible?

[pichalite]

@charles there are two ways to make a theme for NodeBB

• Create a fresh theme re-defining all the required templates and css
• Make a child theme from an existing theme and just override what's needed to change (which makes the existing theme a dependency)

[pichalite]

@charles nodebb-theme-quickstart is basically a child theme for persona so, if you remove the import from theme.less NodeBB does not know where to get all the css required for the theme.

What do you mean by a blank theme?

[pichalite]

@charles actually I thought about the css part...

the theme should work without the import line in theme.less (it should just show templates without css applied) so, I spun a new NodeBB install to verify.

looks like the problem is that some of the default plugins (mentions etc.) are using less variables from bootstrap which makes bootstrap a requirement for the theme that's why you are getting the error about LESS/CSS minify.

assign blame to @julian

[charles]

@pichalite blank (fresh) theme that will simply display text hello with custom style.

build from nothing at all and add the templates and css.

just like creating a new theme.json and then adding the details.

don't know the right nodebb words to describe a blank template

[pichalite]

@charles you can do that but as I mentioned in my previous post... some of the default plugins are using bootstrap variables so you either need to define them in theme.less or add bootstrap to the theme or disable the plugins otherwise less compiler will keep throwing errors.

you can start building from scratch... that won't be a problem. the only thing you need to keep in mind is that if you don't define a template file in your theme (they can be empty), NodeBB takes the templates from persona theme and uses them as fallback.

[charles]

@pichalite deactivate all plugin and still can't get it to work. didn't expect it to be this hard to create something blank.

[pichalite]

@charles what's the error?

[pichalite]

@charles well looks like bootstrap is required