New themes not display correctly

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