Menu bar home as a link

Getting closer. :slight_smile: 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. :+1:
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 :grinning: :roll_eyes:
…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:

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

You need to replace all the : colons with = sign, you need to remove all ; semi-colons and you need to put the script block {} into a hashtable =@{}

Ha, I see what you’re getting at!

Yeah many thanks for this example, it sometimes helps just to see a solid example to build up on.

Cheers

Ok so using this I can get it working:

$GlobalStyle =’
#logoImage{
max-width: auto;
max-height: auto;
display: block;
margin-left: -5%;
}
padding: 5px;
font-size: 22px;
border-radius: 25px;
text-align: center;
}
.MuiCardContent-root {
text-align: center;
}’

New-UDStyle -Style $GlobalStyle -Content{}

However even thought eh text-align is applided in the css:

image

The text acually does not align center. Is this something to do with cards?

Using $theme and buiding it that way did not seem to work. So had to go with style and building the object as above.

Sadly @SnV it still doesn’t look like you are passing the CSS in a hashtable format…please see my blog here, which includes a few examples:-


And there is the official documentation pages which also explain how to style your own theme…to me it looks like you are still using a lot of raw css

I tried it as a Hashtable and it does not even apply the changes to the CSS.

Tried it like this:
$theme = @{
“.MuiPaper-root” =@{
“text-align” = “center”
}
“.MuiCardContent-root” =@{
“text-align” = “center”
}
}

and like:

$theme = @{
“MuiPaper-root” =@{
“text-align” = “center”
}
“MuiCardContent-root” =@{
“text-align” = “center”
}
}

Neither of these applied to the webpage.

With the above the css is not shown:

image

$UDScriptRoot = $PSScriptRoot
New-UDDashboard -theme $theme -Title “EdgeCloud Services” -Content {
#New-UDStyle -Style $GlobalStyle -Content{
New-UDCard -Id “cardStyleMain” -Title ‘Simple Card’ -Content {
“This is some content”
}
#}
}

If I do it like this:

$UDScriptRoot = $PSScriptRoot
New-UDDashboard -Title “EdgeCloud Services” -Content {
New-UDStyle -Style $theme -Content{
New-UDCard -Id “cardStyleMain” -Title ‘Simple Card’ -Content {
“This is some content”
}
}
}

Same thing no new CSS is applied. So I had to do it as above in raw CSS.

Do I need to use the new-theme command is that why?

$Theme = New-UDTheme -Name “Test” -Definition @{
‘.MuiPaper-root’ =@{
‘text-align’ = ‘center’
}
‘.MuiCardContent-root’ =@{
‘text-align’ = ‘center’
}
} -Parent “default”

New-UDDashboard -theme $theme -Title “EdgeCloud Services” -Content {
#New-UDStyle -Style $theme -Content{
New-UDCard -Id “cardStyleMain” -Title ‘Simple Card’ -Content {
“This is some content”
}
#}
}
Tried this and still nothing :man_shrugging::

If I use the same above but with the code:

New-UDDashboard -theme $theme -Title “EdgeCloud Services” -Content {
New-UDStyle -Style $theme -Content{
New-UDCard -Id “cardStyleMain” -Title ‘Simple Card’ -Content {
“This is some content”
}
}
}

Then nothing displays, so it breaks the styling.