# Dashboard 2: Setting the side navigation bar color and font
**URL:** https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [14 July 2025 12:23 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131 "2025-07-14T12:23:28Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@rakgupta](https://discourse.nodered.org/u/rakgupta)
#### Post date: [14 July 2025 12:23 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/1 "2025-07-14T12:23:28Z")
Hello:
Experimenting with moving from DB1 to DB2. I've gotten one page to work (almost) but I'm trying to figure out how to replicate the "dark" theme from DB1 for the side navigation panel.
**DB1 Example:**
**DB2 Example:**
**ui-theme node**
What I would like to do is have the background color on the navigation panel be black, the text size to be larger (it looks squished).
I don't have any CSS experience to please be gentle. Thanks for your help 🙏🏼
Also, does anyone know why the outline of the text boxes in the DB2 example (date picker - "Select Date" and drop downs - "Devices (All)" and "Event Type") are different sizes?
---
### Author:  [@gerrybartley](https://discourse.nodered.org/u/gerrybartley)
#### Post date: [14 July 2025 12:54 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/2 "2025-07-14T12:54:42Z")
For the sidebar although this changes header too.
Or with css
```auto
.v-list-item {
background-color: teal!important;
}
```
For the menu items text size
```auto
.v-list-item-title {
font-size: 1.2rem!important;
}
```
---
### Author:  [@rakgupta](https://discourse.nodered.org/u/rakgupta)
#### Post date: [14 July 2025 13:28 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/3 "2025-07-14T13:28:51Z")
> [@gerrybartley](#):
>
> Or with css
Thanks so much for the quick response. I’m assuming that if I put those in a template node and make the scope “CSS (All Pages)” that will work? Or do I need to do something different?
**EDIT:** That fixed the colors/size for the list items, but the background for the panel is still "green".
I think I need to be doing something with .v-navigation-drawer but not certain what property I should be setting
---
### Author:  [@gerrybartley](https://discourse.nodered.org/u/gerrybartley)
#### Post date: [14 July 2025 13:43 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/4 "2025-07-14T13:43:25Z")
Yes ui-template Widget ui-scoped should do the trick
Wrap in ``
---
### Author:  [@rakgupta](https://discourse.nodered.org/u/rakgupta)
#### Post date: [14 July 2025 13:55 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/5 "2025-07-14T13:55:41Z")
> [@gerrybartley](#):
>
> Yes ui-template Widget ui-scoped should do the trick
> Wrap in ``
Unfortunately, that did not change the color for the background of the navigation panel (still looks the same as the screenshot I posted above (black background on menu items and text is larger). Below is the configuration of ui-template
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [14 July 2025 13:58 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/6 "2025-07-14T13:58:57Z")
You can style the header independently with
```auto
.v-app-bar.v-toolbar {
background: aliceblue;
color: darkslategrey;
}
```
and the sidebar with
```auto
.v-navigation-drawer__content {
background: #9900ff;
color: aliceblue;
}
```
And IMHO a template to define CSS should be type CSS (Single page) or (All pages), in which case `` tags are forbidden 🤔
Is there a difference between type widget and type CSS? I dunno. Maybe a CSS template does not occupy any space on the dashboard. I wouldn't bet on it though.
---
### Author:  [@gerrybartley](https://discourse.nodered.org/u/gerrybartley)
#### Post date: [14 July 2025 14:02 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/7 "2025-07-14T14:02:43Z")
@jbudd That is definitely the way to go
---
### Author:  [@rakgupta](https://discourse.nodered.org/u/rakgupta)
#### Post date: [14 July 2025 14:06 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/8 "2025-07-14T14:06:55Z")
> [@jbudd](#):
>
> and the sidebar with
>
> ```auto
> .v-navigation-drawer__content {
> background: #9900ff;
> color: aliceblue;
> }
>
> ```
Thanks so much! That did it. I did change it to CSS (All Pages) and removed the "" tags.
This is what it the template node config is now:
```auto
.v-list-item {
background-color: black !important;
}
.v-list-item-title {
font-size: 1.1rem !important;
}
.v-navigation-drawer__content {
background: black;
color: aliceblue;
}
```
And this is what it looks like:
@gerrybartley @jbudd - Thanks again for all your help 🙏🏼
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 July 2025 15:48 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/9 "2025-07-14T15:48:11Z")
> [@jbudd](#):
>
> Maybe a CSS template does not occupy any space on the dashboard. I wouldn't bet on it though.
That is the correct assumption
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [28 July 2025 15:48 UTC](https://discourse.nodered.org/t/dashboard-2-setting-the-side-navigation-bar-color-and-font/98131/10 "2025-07-28T15:48:30Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.