Dashboard 2: Setting the side navigation bar color and font

[rakgupta]

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?

[gerrybartley]

For the sidebar although this changes header too.

Or with css

.v-list-item {
    background-color: teal!important;
  }

For the menu items text size

.v-list-item-title {
    font-size: 1.2rem!important;
  }

[rakgupta]

@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

[gerrybartley]

Yes ui-template Widget ui-scoped should do the trick
Wrap in <style> </style>

[rakgupta]

@gerrybartley

Yes ui-template Widget ui-scoped should do the trick
Wrap in <style> </style>

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

[jbudd]

You can style the header independently with

.v-app-bar.v-toolbar {
background: aliceblue;
color: darkslategrey;
}

and the sidebar with

.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 <style> ... </style> 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.

[gerrybartley]

@jbudd That is definitely the way to go

[rakgupta]

@jbudd

and the sidebar with

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

.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

[joepavitt]

@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