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