Big Newb. Need Help With CSS Customization

B F

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??

PitaJ

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

B F

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?

Juan G.

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

B F

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

Juan G.

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

Juan G.

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.