# Dashboard-2: Set font/color globally?

**URL:** <https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [18 July 2025 14:26 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200 "2025-07-18T14:26:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [18 July 2025 14:26 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/1 "2025-07-18T14:26:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [18 July 2025 15:11 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/2 "2025-07-18T15:11:53Z")

</div>

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

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

```

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

```auto
.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 )

> [@rakgupta](#):
>
> Also, should this not be a configuration option on ui-theme?

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [18 July 2025 16:29 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/3 "2025-07-18T16:29:31Z")

</div>

> [@jbudd](#):
>
> I think there is one paid part-time developer - @joepavitt, maybe two?

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

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [18 July 2025 18:16 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/4 "2025-07-18T18:16:33Z")

</div>

> [@joepavitt](#):
>
> It's been spare time and weekends for a while whilst we focus on some other priorities

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

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [18 July 2025 18:49 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/5 "2025-07-18T18:49:48Z")

</div>

> [@jbudd](#):
>
> Alternatively, specify a class name "mytheme" in the theme config and target that

@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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/f/ff2ca2370fc5f6fd65d988624c0faff0800146c1.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [18 July 2025 18:55 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/6 "2025-07-18T18:55:47Z")

</div>

Apologies, apply the class to the ui-page.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [18 July 2025 19:29 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/7 "2025-07-18T19:29:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [18 July 2025 22:14 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/8 "2025-07-18T22:14:47Z")

</div>

> [@jbudd](#):
>
> apply the class to the ui-page

@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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0ca0b5e935aba9912f903f5c6da526d1de503a3d.png)

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

 ![Screenshot 2025-07-18 at 4.49.54 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d56bbe255ea9dfc29da69d2e8430a12a798ee9f.png)

The page looks like this:

 ![Screenshot 2025-07-18 at 4.47.49 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/82e921c41f29321685dc466b05f2b1850adbe2cb.png)

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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [19 July 2025 00:30 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/9 "2025-07-19T00:30:10Z")

</div>

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

```auto
.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.

> [@rakgupta](#):
>
> the other two ui-text nodes have no override for "Apply style".

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 🙃 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.

> [@rakgupta](#):
>
> `.nrdb-ui-page.mytheme { font-family: "Arial Narrow" !important; }`

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 August 2025 18:54 UTC](https://discourse.nodered.org/t/dashboard-2-set-font-color-globally/98200/10 "2025-08-11T18:54:15Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.