# Increase Font Size of Widgets in different Groups

**URL:** <https://discourse.nodered.org/t/increase-font-size-of-widgets-in-different-groups/34948>\
**Category:** Dashboard\
**Created:** [28 October 2020 10:15 UTC](https://discourse.nodered.org/t/increase-font-size-of-widgets-in-different-groups/34948 "2020-10-28T10:15:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinksdroid](https://avatars.discourse-cdn.com/v4/letter/k/4af34b/32.png) [@kevinksdroid](https://discourse.nodered.org/u/kevinksdroid)\
**Post date:** [28 October 2020 10:15 UTC](https://discourse.nodered.org/t/increase-font-size-of-widgets-in-different-groups/34948/1 "2020-10-28T10:15:23Z")

</div>

Hi, so I went through this [https://discourse.nodered.org/t/getting-bigger-font/229](https://discourse.nodered.org/t/getting-bigger-font/229) and figured out how to increase the size of Text in the dashboard theme as a whole. However, I would like to change the font size of different groups by a different amount. Using this code doesn't seem to work for my purpose. (And I don't know how to manipulate this code either)

I am using it for text displays in the dashboard. Using `<font size ="8">` in the label or value format fields is not working as it will not increase the size beyond 8.

Any help will be much appreciated.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 October 2020 10:50 UTC](https://discourse.nodered.org/t/increase-font-size-of-widgets-in-different-groups/34948/2 "2020-10-28T10:50:25Z")

</div>

You can have different font size in different groups.

For the tab TEST the group Bigger changed the font size  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a0a101a4778876b46f0c3e2beff4db85f7ae231.png)

The result is something but as you see, there is many things that don't play nice with such override. Many adjustment needs still to be done at each element maybe. But it all depends your actual needs..

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41829277acb2a4028f1427e583d4840b6f4d1c78.png)

To reach individual elements You need to have a little knowledge how the dashboard structure is built and understand what the css rules do. It is long story to talk so ..

But rule to affect only elements inside one group is here

```auto
<style>
#TEST_Bigger > * {
    font-size: 22px; 
}
#TEST_Bigger > * .nr-dashboard-text .value {
    font-size: 10px; 
}
#TEST_Bigger > * .nr-dashboard-template {
    font-size: 16px; 
}
</style>

```

With those 2 things changed:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/464bd3e54be691ca6ce0dc018855a56560e3d569.png)

---

<div class="post-metadata">

**Author:** ![kevinksdroid](https://avatars.discourse-cdn.com/v4/letter/k/4af34b/32.png) [@kevinksdroid](https://discourse.nodered.org/u/kevinksdroid)\
**Post date:** [28 October 2020 13:06 UTC](https://discourse.nodered.org/t/increase-font-size-of-widgets-in-different-groups/34948/3 "2020-10-28T13:06:44Z")

</div>

Now that was one awesome explanation. Thank you so much

---

<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 November 2020 13:06 UTC](https://discourse.nodered.org/t/increase-font-size-of-widgets-in-different-groups/34948/4 "2020-11-11T13:06:54Z")

</div>

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