Where can I define the SideNav color?

Universal Dashboard
1

Hi,

I have made a black dashboard but I can’t seem to change the color of the SideNav bar, it remains blue.

Any ideals?

Here is the navbar color and a table I have created.

image

2

There are different default themes you can use. There is a dark theme. The sidebar colours are controlled by a CSS setting in the theme. On iPhone right now but can copy and paste the bits later

1 Like
3

Cheers that would be awesome, thank you! I’ll see if I can find out how to change the them to dark in the mean time. :slight_smile:

4

Hey @kreef as always happy to help a fellow dashboarder in need…here is some documentation on finding pre-defined themes:-
https://docs.universaldashboard.io/look-and-feel/themes#finding-pre-defined-themes
Here is an example of adding a custom theme on my github repo:-


I also went a step further and wrote a blog on using themes here:-

So you should be able to locate the themes folder in the UD module folder, having a look through them will show you how the whole dashboard is being styled…but for the sidenav you need:-

 '.sidenav'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            = @{
        'background-color' = "#284856"
        'margin-top'       = "75px"
        'height'           = "77%"
        'border-radius'    = "8px"
        'box-shadow'       = "none"
        'z-index'          = "0"
    }

    '.sidenav a:hover'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    = @{
        'background-color' = "#1e353f"
        'color'            = "#e16036"
    }
    '.sidenav li > a'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     = @{
        'color'     = "#f1f1f1"
        'font-size' = "18px"
    }

Will customise just the sidenav…this was taken from my roundtheme

1 Like
5

Wow, an amazing response as always! Thanks psDevUK!!!

I realllllly like the dark rounded theme, I just gave it a test spin and it makes my dashboard look like it was created by someone who knew what they were doing! :stuck_out_tongue:

I only have one small question, as it relates to your date picker. It seems that the font colors change to white for some reasons when I apply the dark rounded theme, making the numbers dissapear. Do you by anychance know of a parameter where I can change the font color? Here is a pic:

image
image1236×720 11.1 KB

Thanks again, you are a champ!

6

Hey @kreef glad you like the dark rounded theme, I did do that sometime ago, but so glad it got incorporated into UD. Anyways not that I have the answer to everything (i wish I did) I do have the answer to your question, which I answered here:-

someone else solved it using ud-style…the choice is yours :crazy_face:
Hope this answers the question. Peace

1 Like
7

Thanks for the help. I have managed to change the color like you described, but it doesn’t seem to stay black when the page refreshes
:thinking:
I also can’t seem to get the ud-style working to change the font color inside the date picker calendar box.
I’ll keep trying though :smiley:

8

Hey @kreef so by pressing F12 in the browser and changing the CSS colours there shows you in real-time the effect of changing the CSS will be…so everytime the page refreshes it will go back to how it was as it is using the saved CSS theme…so you would need to add something like this:-

'.ud-dashboard' = @{
 'color' = "#000"
}

into the theme or add this as a custom theme with a master theme like the DarkRounded. Using the F12 and inspecting the different classes is how I figured out how the whole theme thing works in UD

You are so close…have a read through my blog page on styling your dashboard hopefully will make more sense at the angle I was showing how to fix the issue, then use that exact same class into the theme to correct the problem after seeing it real-time what the effects will be. Hope this clears up the situation :crazy_face: