I’d like to include a logo at the top of my side nav. Seems New-UDSideNav only accepts New-UDSideNavItem, which makes sense. Any way to do what I’m asking with an element or just a straight image though?
2 Likes
This would be nice to have!
Hi guys @artvandelay440 and @Jacob-Evans are you guys still looking for something like this? Please see the screenshot of my current dashboard I am working on. This is a fixed sidenav and I am sure if my image was bigger this is what you are after?
Happy to post my css if this is what you are after?
I am curious how you got the udNav to extend all the way across the top, and have the side nav underneath? CSS maybe?
Hi @artvandelay440 yes it was all CSS I have posted the exact CSS code for this on GITHUB here:- https://github.com/psDevUK/UDscripts/blob/master/RoundTheme.ps1
I personally think this looks a bit nicer…?
i don’t see the link to a github anywhere?
Sorry I know this is an old thread but @psDevUK do you know what the CSS is to change the background of list items in the side nav bar? I’ve been trying to pull apart the CSS in the one you linked to but I can’t seem to get it to change! I basically want to change the colour of the default purple background:
Hey @tom.obrien don’t be sorry to resurrect an old thread. This is the place to come to ask questions on the amazing powershell software Mr Driscoll has done. Well I finished work 4 hours and 26 minutes ago, yet I am still working extracting 395 pst files combining 120GB of data, going through all of these to find specific emails…so I managed to script something up but it’s a long day…anyways unless you are going under two accounts, I got mailed on here a very similar question about styling something…so I know with the world pandemic and everything being crazy I said I would plan on updating my blog after work, and well I am still working…So looks like this will be a task for me tomorrow, as I plan on actually getting this over-time back for a change and write a blog on how to do this, then will post you a link…sound? 
Long day! That would be awesome though. I found that if I use a new theme it works fine, it’s when I use my theme (which has ‘default’ as it’s parent theme) is when it shows the list items with a purple background so there’s something in the default theme overriding the background colour. I’ll put up some code as an example tomorrow if it helps to explain.
Hi @tom.obrien more than happy to use your code on the blog I am currently writing here:- https://psdevuk.github.io/ud-flix/Using-CSS-to-Style/
I made a start on it, it’s not finished yet, but this will give a complete run-down of how I go about doing it…hopefully will finish it off tomorrow…
Hey @psDevUK blog looks good and explains it nicely. The problem I’m seeing is where I’m using a parent theme. Annoyingly I probably wouldn’t now use this but my site now relies on a lot of the default spacing and other settings that get inherited by the default theme now. It does mean that the side nav items are getting the background colour inherited from somewhere other than the .sidenav background-color CSS. Here’s an example:
$Theme=New-UDTheme -Name “Test” -Definition @{
‘.sidenav’=@{
‘background-color’ = “#0d3b66”
}
‘.sidenav li > a’=@{
‘color’=“white”
}
}
$HomePage = New-UDPage -Name “Home” -Icon home -Content {
}
$Navigation=New-UDSideNav -Id “ACSideNav” -Content {
New-UDSideNavItem -Text “Home” -PageName “Home” -Icon home
New-UDSideNavItem -Text “Manage” -PageName “Manage” -Icon building
}
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 2000 -Content {
New-UDDashboard -Title “Welcome” -Pages @($HomePage) -Navigation $Navigation -Theme $Theme
}
This will present a sidenav in the expected format:
However, if I add:
-Parent “Default”
to the New-UDTheme cmdlet then the result I get is this:
The list items themselves seem to have their background colour set separately but I can’t for the life of me find the bit of CSS relating to it!
you can over-ride settings with the !important after the setting…I will update my blog but you could modify the default theme with your additional bit of CSS but add the !important after the colour as in:-
$Theme=New-UDTheme -Name “Test” -Definition @{
‘.sidenav’=@{
‘background-color’ = “#0d3b66 !important”
}
‘.sidenav li > a’=@{
‘color’=“white !important”
}
}
Will update my blog with this information this evening…just realised the first blog I did was on styling…so you need to do this fella:-
$theme = New-UDTheme -Name "Basic" -Definition @{
‘.sidenav’=@{
‘background-color’ = “#0d3b66 !important”
}
‘.sidenav li > a’=@{
‘color’=“white !important”
}
} -Parent "Default"
This should over-ride the parent setting with the customised bit you want…even easier 
Yeah that’s what I thought. I do the same with a couple of other settings in my theme but this one doesn’t seem to over ride whatever is setting the list item colour 
bit confused by this one!
Dude…you are so close…it’s background-color you need to tweak…please see your code but with one line added:-
Import-Module UniversalDashboard.Community -RequiredVersion 2.8.1
$Theme = New-UDTheme -Name "Test" -Definition @{
'.sidenav' = @{
'background-color' = "#0d3b66"
}
'.sidenav li > a' = @{
'color' = "white"
'background-color' = "#0d3b66 !important"
}
} -Parent "default"
$HomePage = New-UDPage -Name "Home" -Icon home -Content {
}
$Navigation = New-UDSideNav -Id "ACSideNav" -Content {
New-UDSideNavItem -Text "Home" -PageName "Home" -Icon home
New-UDSideNavItem -Text "Manage" -PageName "Manage" -Icon building
}
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 2000 -Content {
New-UDDashboard -Title "Welcome" -Pages @($HomePage) -Navigation $Navigation -Theme $Theme
}
I found you do have to use the !important on this for it to work correctly… hope this is what you wanted @tom.obrien
Of course! It seems obvious now looking at that 
There must be another bit of CSS which controls the highlighting on mouse over as that seems to have stopped when specifying the “sidenav li > a” background colour. I’ll keep playing around with it. Thanks again as always!
Hey @tom.obrien let me save you the trouble
'.sidenav a:hover'= @{
'background-color' = "#1e353f"
'color'= "#FFFFFF"
}
I got this from the darkrounded theme I did…I am pretty sure this is what you need
Just change the background colour to the one you want for the highlight colour
1 Like
Legend! That’s exactly what I’m after. Thanks again 
1 Like