Dashboard-2: Set font/color globally?

Dashboard
1

I would like to set the font globally across all pages for all elements (including non-core widgets) but cannot figure out how to do it via CSS. Can anyone give me an example?

Also, should this not be a configuration option on ui-theme? I'm trying to understand why this would be omitted (not sure if this was in DB1 since I was happy with the built in font/style).

Thanks for your help

2

You can target a page ID to specify the font family etc on that page eg

#nrdb-page-4f3150ef53c50b94 {
    font-family: Courier, monospace;
}

Alternatively, specify a class name "mytheme" in the ui-page config and target that

.nrdb-ui-page.mytheme {
    font-family: "Times New Roman", serif;
}

This will set the font family for everything on the page except for the page header (target this separately )

My impression, unencumbered by any knowledge of the facts, is that like ui-base, ui-theme is a stub, intended to be extended at some future date.

Dashboard 2 v1.0 was only released 18 months ago, I think there have been about 80 releases.
Today there are more than 400 open issues, bugs, requests, etc. and I think there is one paid part-time developer - @joepavitt, maybe two?
So probably go ahead with the work-around above rather than hoping for an update.

1 Like
3

Hoping to ramp up Dashboard resource again soon, we have ambitious plans! It's been spare time and weekends for a while whilst we focus on some other priorities

1 Like
4

I wish I could help, but my skills don't go that far! Let me know if I can help with some testing....

5

@jbudd - I don't see a place to specify a class name in the theme configuration. Am I missing something?

Screenshot 2025-07-18 at 1.49.00 PM
Screenshot 2025-07-18 at 1.49.00 PM1946Ă—1410 273 KB

6

Apologies, apply the class to the ui-page.

1 Like
7

Thanks!! Though it would be so much easier to apply it to a theme :wink:

8

@jbudd - it seems to apply the style inconsistently (or so it seems to me)?

I put the .nrdb-ui-page.mytheme { font-family: "Arial Narrow" !important; } in a template node and the scope is "All Pages"

Screenshot 2025-07-18 at 5.09.18 PM
Screenshot 2025-07-18 at 5.09.18 PM1110Ă—1534 96.9 KB

I then added the "mytheme" class at the ui-page level

Screenshot 2025-07-18 at 4.49.54 PM
Screenshot 2025-07-18 at 4.49.54 PM880Ă—1178 56.6 KB

The page looks like this:

Screenshot 2025-07-18 at 4.47.49 PM
Screenshot 2025-07-18 at 4.47.49 PM2360Ă—1694 437 KB

It appears that it also applied the font correctly to the ui-tabulator widget but seems to have left the two ui-text nodes in their normal font. For the third ui-text node (Hubitat Log Information), I have applied the font at the node level (Apply style) since I wanted the text to be larger. I double checked and the other two ui-text nodes have no override for "Apply style".

Any suggestions on what is going on? Thanks for your help.

9

It does seem surprising that the ui-text node does not inherit a font declared at page level.

You can style the text widget with this

.mytheme .nrdb-ui-text {
    font-family: "Times New Roman", serif;
}

This works for me but maybe it would be better to apply the custom style at the level of the groups on the page rather than the page itself. Months later it might be hard to remember where the class .mytheme comes from.

The provision of "Apply style" in the widget config is utterly bonkers. This is not a sensible way to promote a coherent dashboard appearance, and for me not all the fonts in the dropdown work.
Possibly it was included to insulate naiive users from the horrific complexity :upside_down_face: of a CSS font declaration. It should be removed as soon as possible.
It won't be though because people might be using it and we don't want to break backward compatibility.

If I have to use !important to make a CSS style stick, I consider I have failed to use the right selector.

1 Like