Increase Font Size of Widgets in different Groups

Hi, so I went through this 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.

1 Like

You can have different font size in different groups.

For the tab TEST the group Bigger changed the font size
image

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

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

<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

Now that was one awesome explanation. Thank you so much

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