Is there a way to set the Home (or page name in the menu bar) as a link?
Thanks
If you use a custom AppBar, you can set the page name as a link.
$Drawer = New-UDDrawer -Children {
New-UDList -Children {
New-UDListItem -Label "Home"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -OnClick {}
New-UDListItem -Label "Usage" -OnClick {}
New-UDListItem -Label "FAQs" -OnClick {}
New-UDListItem -Label "System Requirements" -OnClick {}
New-UDListItem -Label "Purchasing" -OnClick {}
}
}
}
New-UDAppBar -Position relative -Children { New-UDElement -Tag 'a' -Attributes @{ href = 'www.google.com' } -Content { "Title" } } -Drawer $Drawer
What if I just want the default bar to have a link, with no other draws?
Thats what loads by default.
Currently, not a way to do it with the default. I think you can just not specify the drawer as well.
New-UDAppBar -Position relative -Children { New-UDElement -Tag 'a' -Attributes @{ href = 'www.google.com' } -Content { "Title" } }
Getting closer. 
I changed the position to fixed.
New-UDAppBar -Position fixed -Children { New-UDElement -Tag 'a' -Attributes @{ href = 'www.google.com' } -Content { "Title" } }
Ok this works and does not. So when the page loads, title looks like a link, anyway to make it have the same formatting as the default?
Second when you click the link instead of redirecting it adds it to the end of the URL.
Bumping this
Hello @SnV have a read of my latest blog here:-
This should hopefully give you the answer on how you can find this yourself. I am not running this version yet so I cannot give you the answer, but if you read this blog you should be able to crack this one yourself.
3 Likes
Thanks this is great, Ill look into it.
Hey Quick question for you, looking at your pages and they look great.
What I would like to know if how you designed that menu bar so I can add our logo and some text like you did.
Thanks
Thanks for the kind comments on the UD work I do. I’m pretty sure I got the answer here on line 90
If you need more information give me a shout, but yeah pretty sure
-NavBarLogo (New-UDImage -Url "https://img.icons8.com/color/2x/android-tablet.png") is what is setting it in this example. Think this is also on the doc pages for -NavBarLogo
P.S I am not using UD 3 or Powershell Universal just yet, but this is how it can be done in UD prior v3
Ok so it looks like most of those flags dont work with UD v3
so trying to work out how to achieve the same thing of adding a logo and link. I am looking, but if you or adam have any ideas that would be great.
Thanks
Check out this example: Material UI Theme Question
So glad I stumbled across this post…I’ve been having trouble getting my head around the theme side of UD and I don’t have a great understanding of CSS or web design so this a great help!
Can this approach also be applied to the light/dark mode theme settings? I was hoping someone could provide a good example of a light/dark theme that I can build on.
TIA
There is a good example of light and dark themes on this page:
https://docs.ironmansoftware.com/dashboard/themes
I too am not great with CSS or Web design so trying to get my head round all the configs with the style stuff but making some progress.
Hi @dank42 seems like you missing a zero off the end of your name 
…anyways back to the question at hand, I am still to dabble with Powershell Universal, it is on my list of things to do…I did write a blog post here a while back:- https://psdevuk.github.io/ud-flix/Styling-your-dashboard/ and a more recent blog post here https://psdevuk.github.io/ud-flix/Using-CSS-to-Style/ but this applies to UniversalDashboard…I know with UniversalDashboard there is a folder that holds all the current themes in it. e.g. C:\Program Files\WindowsPowerShell\Modules\UniversalDashboard.Community\2.8.1\net472\Themes so there may or maynot be something similar for Powershell Universal. Here is the contents of the DarkRounded theme for UD which I contributed:-
@{
Name = "DarkRounded"
Definition = @{
UDDashboard = @{
BackgroundColor = "#333333"
FontColor = "#FFFFF"
}
UDNavBar = @{
BackgroundColor = "#1c1c1c"
FontColor = "#55b3ff"
}
UDCard= @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
'border-radius' = "12px"
}
UDChart = @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
'border-radius' = "12px"
}
UDMonitor= @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
'border-radius' = "12px"
}
UDTable = @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
'border-radius' = "12px"
}
UDGrid= @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
'border-radius' = "12px"
}
UDCounter= @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
'border-radius' = "12px"
}
UDInput = @{
BackgroundColor = "#252525"
FontColor = "#FFFFFF"
}
UDFooter = @{
BackgroundColor = "#1c1c1c"
FontColor = "#55b3ff"
}
'.ud-input' = @{
'background-color' = "#252525"
'color' = "#FFFFFF"
'border-radius' = "12px"
}
'img' = @{
'border-radius' = "12px"
}
'main' = @{
'padding-left' = "50px"
'padding-right' = "50px"
'padding-top' = "30px"
'padding-bottom' = "50px"
}
'p' = @{
'color' = '#FFFFFF !important'
}
'.tabs'= @{
'color'= "#FFFFFF"
'background-color' = "#171717"
}
'.tabs .tab'= @{
'color' = "#252525"
}
'.tabs .tab a:hover' = @{
'background-color' = "#252525"
'color'= "#FFFFFF"
}
'.tabs .tab a.active'= @{
'background-color' = "#1c1c1c"
'color'= "#FFFFFF"
}
'.tabs .tab a:focus.active'= @{
'background-color' = "#252525"
'color'= "#FFFFFF"
}
'.tabs .indicator'= @{
'background-color' = "#FFFFFF"
}
'.tabs .tab a' = @{
'color' = "#FFFFFF"
}
'[type="radio"]:checked + span::after' = @{
'background-color' = "#FFFFFF"
}
'.pagination li a'= @{
'color' = "#FFFFFF !important"
}
".ud-navbar"= @{
'width' = "100%"
'position' = "fixed"
'z-index'= "9999"
}
'input:not([type]), input[type="date"]:not(.browser-default), input[type="datetime-local"]:not(.browser-default), input[type="datetime"]:not(.browser-default), input[type="email"]:not(.browser-default), input[type="number"]:not(.browser-default), input[type="password"]:not(.browser-default), input[type="search"]:not(.browser-default), input[type="tel"]:not(.browser-default), input[type="text"]:not(.browser-default), input[type="time"]:not(.browser-default), input[type="url"]:not(.browser-default), textarea.materialize-textarea' = @{
'border-bottom' = "1px solid #FFFFFF"
'color'= "#FFFFFF"
}
'.select-wrapper input.select-dropdown'= @{
'color'= "#ffffff"
'border-bottom' = "1px solid #FFFFFF"
'border-block-end-color' = "#FFFFFF"
}
'.dropdown-content'= @{
'background-color' = "#333333"
}
'.btn'= @{
'color'= "#1c1c1c"
'background-color' = "#bababa"
}
'.btn:hover'= @{
'color'= "#000000"
'background-color' = "#FFFFFF"
}
'.btn-floating'= @{
'color'= "#1c1c1c"
'background-color' = "#bababa"
}
'.select-dropdown li span' = @{
'color' = "#ffffff"
}
'.sidenav'= @{
'background-color' = "#1c1c1c"
'margin-top' = "75px"
'height' = "83%"
'border-radius' = "8px"
'box-shadow' = "none"
'z-index' = "0"
'color'= "#fff"
}
'.sidenav a:hover'= @{
'background-color' = "#1e353f"
'color'= "#FFFFFF"
}
'.sidenav li > a' = @{
'color'= "#f1f1f1"
}
'li'= @{
'color' = "#FFFFFF"
}
'.collapsible-header'= @{
'background-color' = "#171717"
'border-bottom' = '1px solid #f1f1f1;'
'border-bottom-width' = '1px;'
'border-bottom-style' = 'solid;'
'color' = '#f1f1f1'
}
'.collapsible' = @{
'margin' = ".5rem 0 1rem"
'border' = 'none'
}
'.collapsible-body' = @{
'border-bottom' = 'none'
"background-color" = "#171717"
}
'h'= @{
"color" = "#fff !important"
}
'h1, h2, h3, h4, h5, h6' = @{
'line-height' = "110%"
'color' = "#f1f1f1 !important"
}
'.collection .collection-item'= @{
'background-color' = "#252525"
}
'.pagination li.active' = @{
'background-color' = "#bababa"
}
'.sidenav .collapsible-header'= @{
'color'= "#fff !important"
'background-color' = "#1c1c1c !important"
}
'.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating)'= @{
'color'= "#FFFFFF"
'margin-right' = "24px"
'-webkit-transition' = "color .3s ease"
'transition'= "color .3s ease"
'text-transform'= "uppercase"
}
'.btn-flat' = @{
'color' = "#fff"
}
'.sidenav .subheader' = @{
'color' = "#fff"
}
'.svg-inline--fa' = @{
'color' = "#fff"
}
'.modal'= @{
'color' = "#FFFFFF"
'background-color' = "#393F47"
}
'header, nav, section' = @{
'display' = "block"
'margin-bottom' = "2%"
}
'.card-content' = @{
'display' = 'grid'
}
'.sidenav .collapsible-body, .sidenav.fixed .collapsible-body' = @{
'background-color' = "#1c1c1c"
'color' = "#fff"
}
'.sidenav .collapsible li, .sidenav.fixed .collapsible li ' = @{
'background-color' = "#1c1c1c"
'z-index' = "0"
'color'= "#FFF"
}
}
}
I hope the blogs help you out
1 Like
This helps and I managed to get a lot working following this and other examples. But now I am trying to move this to a global theme.
To start with centering content,
When I looked at the css using expect I see the changes my code have made and where so I am tyring this but the dashboard does not load. Can anyone point me to what I am doing wrong?
$theme = @{
‘.MuiPaper-root’ {
text-align: center;
}
}
Or is this not allowed like this? I was using new-USStyle before.
Thanks
$GlobalStyle =’
#logoImage{
max-width: auto;
max-height: auto;
display: block;
margin-left: -5%;
}
padding: 5px;
font-size: 22px;
border-radius: 25px;
text-align: center;
}’
New-UDAppBar -Position fixed -Children {
New-UDGrid -Container -Content{
New-UDGrid -Item -ExtraSmallSize 1 -Content{
New-UDStyle -Style $GlobalStyle -Content{
New-UDImage -Id "logoImage" -Path "$UDScriptRoot\Theme\e-small.png"
}
}
New-UDGrid -Item -ExtraSmallSize 11 -Content{
New-UDElement -Id "logoText" -Tag 'h1' -Content {"E"}
}
}
}
This works when using:
$UDScriptRoot = $PSScriptRoot
New-UDDashboard -Title “E” -Content {
. “$UDScriptRoot\Theme\Theme.ps1”
New-UDStyle -Style $GlobalStyle -Content{
New-UDCard -Id "cardStyleMain" -Title 'Simple Card' -Content {
"This is some content"
}
}
}
But as I said I was trying to convert this to a single theme to share among all my pages.
Lastly while this centers the cards Title it does not center the content I have another way to do that I think using something Adam showed me but since this is the theme I am wondering why and if any one can point me in the direction.
lastly I would like to pad the left and right of the card so it runs down the middle with all the content any way to do that.
Sorry not really knowing much about CSS and webdesign I feel silly having to ask all these questions.
Thanks
needs to be in a
'this-CSS-name' =@{
'background' = "blue"
}
From what I see your missing the @ sign so data not a hashtable and not being passed currently to your dashboard