New themes not display correctly



  • 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.

    Screen Shot 2015-02-15 at 8.50.39 PM.png



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



  • 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



  • 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


  • 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.



  • @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


  • Plugin & Theme Dev

    @darrennickerson try running this

    ./nodebb reset



  • Thanks guys the reset did it.



  • 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.


  • Admin

    @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.



  • @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!




 

| |