Big Newb. Need Help With CSS Customization



  • Hey All,

    This is less of a CSS question and more of a file structure question...maybe a mix of the two.

    I cloned my Vanilla theme and all I want to do is start editing colors and tinkering with div sizes and all of that. What files do I edit? I see the 'less' directory in the themes folder but nothing I change makes any difference. For example, I want to change my navbar color from orange to literally annnnyything else. I can't figure out how to do this. No less file has the '.navbar' or the '.navbar-inverse' identifier which specifies the orange color.

    Please help.

    Also...I applied a skin. How do I just go back to default??


  • Global Moderator

    The less files are what you should be editing. Specifically the variables file.

    You have to run ./nodebb build to show the changes. I suggest using grunt instead though. Some instructions are at docs.nodebb.org



  • Thanks for the quick reply. So this got me one step forward!

    I have another question...I want to change the navbar color. The only navbar.less file for Vanilla is in its 'bootstrap' subdirectory. I can change '.navbar-inverse' > 'background-color: blue' but nothing changes...

    Is this not where I should be changing it?



  • @b-f It's easier here:

    NodeBB Admin Control Panel > Appearance > Custom Content (HTML/JS/CSS) > Custom CSS/LESS

    Add styles there to override the current ones, then save, and restart NodeBB.



  • @juan-g Thanks, I'll do this. But I definitely would like to know what files I should edit if I wanted to make my own theme or customize the current one.



  • @b-f With right mouse button > Inspect, we can see styles and file names for each element of a web page.



  • See also Where to put custom CSS file.. | NodeBB.

    Another possibility is a custom css file overriding the others by having the last <link rel="stylesheet" href="..." /> line in the theme source.


 

| |