New themes not display correctly

[darrennickerson]

Hello, I am new to NodeBB and i am trying to play around with it, so I can use with a new project. I cant get new themes to display correctly, every one of them look unstylized for some reason. I have tried to install using npm and also copying the files to the "node_modules" folder manually. I also stop and start my server after each change using ./nodebb stop and ./nodebb start in terminal. Any help would be appreciated for this newbie.

[riteshsanap]

Can you check if the CSS and Javascripts files are being loaded by viewing the page source code

[darrennickerson]

Thanks for the reply. its loading 2 files a javascript file with contents and http://localhost:4567/stylesheet.css?v0.6.1-3-gcb32d68 which is empty

[riteshsanap]

Try checking the errors logs, to see if Stylesheet was minified or not, or you also check this by starting NodeBB in dev mode by the follow command

./nodebb dev

and check if the files are minified or not, the console will display something like this

16/2 10:05 [1853] - info: [plugins/spam-be-gone] Settings loaded
16/2 10:05 [1853] - verbose: [hotswap] Router with id `plugins` replaced successfully
16/2 10:05 [1853] - verbose: [plugins] All plugins reloaded and rerouted
16/2 10:05 [1853] - info: [plugins] Plugins OK
16/2 10:05 [1853] - verbose: [meta/css] Minifying LESS/CSS
16/2 10:05 [1853] - verbose: [hotswap] Router with id `auth` replaced successfully
16/2 10:05 [1853] - verbose: [sounds] Sounds OK
16/2 10:05 [1853] - verbose: [meta/css] admin.css committed to disk.
16/2 10:05 [1853] - verbose: [meta/templates] Compiling templates
16/2 10:05 [1853] - verbose: [meta/css] stylesheet.css committed to disk.
16/2 10:05 [1853] - verbose: [meta/templates] Successfully compiled templates.
16/2 10:05 [1853] - info: NodeBB is now listening on: 0.0.0.0:4567
16/2 10:05 [1853] - verbose: [cluster] Stylesheets propagated to worker 1853
16/2 10:05 [1853] - verbose: [meta/js] Minification complete
16/2 10:05 [1853] - verbose: [meta/js] Client-side minfile committed to disk.
16/2 10:05 [1853] - info: NodeBB Ready

[darrennickerson]

16/2 10:56 [58278] - verbose: [meta/templates] Successfully compiled templates.
16/2 10:56 [58278] - info: NodeBB is now listening on: 0.0.0.0:4567
16/2 10:56 [58278] - error: [meta/css] Could not minify LESS/CSS: .bg-variant is undefined
16/2 10:56 [58278] - verbose: [meta/js] Minification complete
16/2 10:56 [58278] - verbose: [meta/js] Client-side minfile committed to disk.
16/2 10:56 [58278] - info: NodeBB Ready

It outputs the same thing for each theme I choose. Any more help would be appreciated.

[zero]

@darrennickerson said:

.bg-variant

in one of the less files you have .bg-varient either blank or with a bad linky code thing ( @somekinda-colorthing )

check less/mixins/background-variants if it exists

[pichalite]

@darrennickerson try running this

./nodebb reset

[darrennickerson]

Thanks guys the reset did it.

[strangebeer]

I'm having a near identical problem. I installed NodeBB a few weeks ago, started using Vanilla, then started customizing it via the admin custom HTML & CSS tools.

Then I started following the burnaftercompiling NodeBB theming guide to make my own theme. Everything was going well until I spun up NodeBB with my new theme. Everything looked very weird, like OP's image except my custom HTML/CSS and site-wide CSS files were loading.

I used ./nodebb dev and got similar errors about an inability to minify:
error: [meta/css] Could not minify LESS/CSS: variable @brand-primary is undefined

I recursively grepped from webroot and found @brand-primary defined in bootstrap/variables.less and set as "@brand-primary: darken(#428bca, 6.5%);"

This file is in the Vanilla theme directory, as it was imported inside theme.less, as per the instructions..

"./nodebb reset" threw an error, so I ran "./nodebb reset theme" and it re-set me to Vanilla from my custom theme.

Any thoughts? I'm burned out for the night. Also side note, what tags to I use to get the code format? Thanks.

[julian]

@strangebeer Do you have the code hosted on GitHub/BitBucket so we can take a look?

And also, surround code with ``` above and below for a code block, or indent all code four spaces. That should do it.

[strangebeer]

@julian - I do not, but I can make it available. Which bits do you need, the custom theme files? As soon as I get back from Pizza Express!

Thanks!

[strangebeer]

@julian, I've created a repo with my code:
https://github.com/sanpatricio/nodebb-theme-capitol