Per page theme/css

Universal Dashboard
1

Hi,

My main dashboard has a udtheme, but is it possible to set a separate theme per page or per component?

Thanks

2

Hey @Alc a theme is consistent across the site. However if you download the UDStyle module you can use this module to modify any component being hosted in UD, I did a blog on this here:-

1 Like
3

So does UDStyle override a theme?

I tried this to no avail

New-UDPage -Name "Current Tikest" -Icon home -Content {

New-UDGridLayout -Content {

    New-UDStyle  -ID 'Total' -Style '
            .card .card-content{
                font-size   = 50px
            }' -Content {
        New-UDCard -TextAlignment center -TextSize Large -endpoint {
            New-UDIcon -Size 3x -Icon 'hands_helping' -Style @{color = '#fff' } -Id 'hands'
            New-UDHeading -Size 1 -Text "Open Calls:   $($Cache:totaltickets.column1)" -Color white
        }
    }
    New-UDStyle -Id 'Logged' -Style '
            .card .card-content{
                font-size   = 50px
            }' -Content {
        New-UDGrid -NoFilter -NoExport  -AutoRefresh -RefreshInterval 250 -Title 'Logged' -Endpoint {
            $Cache:totalticketsbystatus | Out-UDGridData
        }
    }

    New-UDStyle  -Id 'Summary' -Style '
            .card .card-content{
                font-size   = 50px
            }' -Content {
        New-UDGrid -NoFilter -NoExport -AutoRefresh -RefreshInterval 250 -Title 'Summary' -Endpoint {
            $Cache:summarytable | Out-UDGridData
        }
    }
}  -Layout '{"lg":[{"w":4,"h":7,"x":0,"y":0,"i":"grid-element-Total","moved":false,"static":true},{"w":6,"h":17,"x":6,"y":0,"i":"grid-element-Logged","moved":false,"static":true},{"w":4,"h":10,"x":0,"y":7,"i":"grid-element-Summary","moved":false,"static":true}]}'

}

4

Have a look at https://docs.universaldashboard.io/look-and-feel/themes#available-properties you should be able to use UDCard I am no CSS ninja, but you could also look at the actual theme file and copy and paste it from there, but obviously adjust font to what you want…or alternatively work on a dashboard live, like tweak the CSS in the inspect element then just copy the CSS rule and use that. I know this works as someone used it on the date picker I did when the theme was making the font white on a white background…
Just a quick sanity check that you have imported the UDStyle module into your dashboard yeah?

5

Oooh no I haven’t imported it explicitly. Haven’t needed to do that with any other modules, I guess I missed that step!

6

I got a blog here which shows this using a custom component:-

7

I just thought…New-UDHeading…Boom this styles the font size…no need to go the extra mile…if you just want the font bigger use New-UDHeading you can even style the colour!

New-UDHeading -Size 4 -Text "Running Services"
8

Thanks but I need to apply it to a grid - one grid on one page a certain font size, and another grid on another page another font size :slight_smile:

9

I have tested the css and this definitely affects the text size if I change it in my theme, but I must have something wrong in my new-udstyle

New-UDStyle  -Id 'Summary' -Style '
            .card .card-content {
                font-size   = 40px }' -Content {
        New-UDGrid -NoFilter -NoExport -AutoRefresh -RefreshInterval 250 -Title 'Summary' -Endpoint {
            $Cache:summarytable | Out-UDGridData
        }
    }
10

Bumping an old one, sorry. I had need to tweak css and found this.
Code should read like css:
font-size : 40px

gav