# Getting bigger font

**URL:** <https://discourse.nodered.org/t/getting-bigger-font/229>\
**Category:** Dashboard\
**Created:** [18 May 2018 10:00 UTC](https://discourse.nodered.org/t/getting-bigger-font/229 "2018-05-18T10:00:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [18 May 2018 10:00 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/1 "2018-05-18T10:00:53Z")

</div>

anyone knows how i can get a larger font of text UI

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 May 2018 11:23 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/2 "2018-05-18T11:23:43Z")

</div>

Use a ui\_template node configured sort of like this…

Obviously change the sizes to suit

```
[{"id":"a8a10cc2.9d0ae","type":"ui_template","z":"a3ad1f25.b7363","group":"1ea34d06.1438c3","name":"","order":0,"width":0,"height":0,"format":"<style>\nbody.nr-dashboard-theme {\n font-size: 50px !important;\n}\n.md-toolbar-tools h1 {\n font-size: 50px !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":320,"y":440,"wires":[[]]},{"id":"1ea34d06.1438c3","type":"ui_group","z":"","name":"Default","tab":"5e2e41aa.9826b","disp":true,"width":"6","collapse":true},{"id":"5e2e41aa.9826b","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
```

---

<div class="post-metadata">

**Author:** ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)\
**Post date:** [25 June 2018 08:30 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/3 "2018-06-25T08:30:59Z")

</div>

Hello,  
is it also possible to Change just the text size of this ui\_template?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [25 June 2018 09:03 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/4 "2018-06-25T09:03:03Z")

</div>

> [@YT2310](#):
>
> is it also possible to Change just the text size of this ui\_template?

I'm not sure what you are asking, could you give an example. Do you mean just the text size on a particular tab or a particular widget?

---

<div class="post-metadata">

**Author:** ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)\
**Post date:** [25 June 2018 10:10 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/5 "2018-06-25T10:10:19Z")

</div>

I mean just the text sice of a particular widget

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [25 June 2018 10:50 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/6 "2018-06-25T10:50:34Z")

</div>

as example i do it like this

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/558fe801307c5dfacfd5dda53153ff8bd94e7aa1.png)

result:

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

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [25 June 2018 12:18 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/7 "2018-06-25T12:18:38Z")

</div>

Hi, changing the font size for a whole group in the UI is possible if you use the appropriate CSS id selector.

Each group can be selected by using the id TAB underscore Group underscore cards.

For instance: TAB = PSU and Group = Placeholder

CSS selector id="PSU\_Placeholder\_cards"

![tst-003](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/0068e7177f6fdd7722f76e731f5a22a21608ec8c.PNG)

Then change the CSS config in a template node as Dave has shown.

![tst-004](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/95bdffaad80322fcb29614dd6f2b3007246efca9.PNG)

This will result in something like below. Note that the font size will change for each and every widget inside the group Placeholder.

![tst-002](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/74b082de6a39e697121bf6f9d9cc7ec087103ee2.PNG)

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [7 October 2018 20:33 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/8 "2018-10-07T20:33:25Z")

</div>

I'm trying to get my icons in the buttons a little bit bigger.  
Used the method as described by Andrei, but unfortunately it's not working.  
What do I miss?

 ![NRfontsize](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7adf0cb2f6595167ceedf34708d600967bfa443c.jpeg)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 October 2018 21:20 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/9 "2018-10-07T21:20:07Z")

</div>

How did you configure the buttons ? You may be able to do fa-arrow fa-2x. Sort of thing

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [7 October 2018 21:31 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/10 "2018-10-07T21:31:28Z")

</div>

Buttons are indeed configure with icon **fa-arrow**.  
**fa-arrow-up fa-2x** works, the icons are now 2x bigger, thanks for that solution.

But still curious why the solution from Andrei doesn't work for me.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 October 2018 21:52 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/11 "2018-10-07T21:52:57Z")

</div>

I'm not sure. You would need to right-click inspect to use the browser tools to inspect the CSS style to see why or wasn't targeted correctly

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [8 October 2018 18:08 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/12 "2018-10-08T18:08:51Z")

</div>

> [@edje11](#):
>
> but unfortunately it's not working.  
> What do I miss?

If you can share your flow I can have a look on it.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [8 October 2018 18:47 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/13 "2018-10-08T18:47:28Z")

</div>

Here you go, thanks for the effort.

`[{"id":"11742970.60c3af","type":"ui_button","z":"5ee1436e.8f6cb4","name":"Up","group":"e65734b7.d80b78","order":1,"width":"2","height":"1","passthru":false,"label":"","color":"","bgcolor":"","icon":"fa-arrow-up fa-2x","payload":"up","payloadType":"str","topic":"","x":470,"y":3060,"wires":[["b77f206d.0f3a38"]]},{"id":"b77f206d.0f3a38","type":"mqtt out","z":"5ee1436e.8f6cb4","name":"Luxaflex Hobbykamer","topic":"/vm/hobbykamer/luxaflex/controles","qos":"0","retain":"false","broker":"2db287b.addf978","x":780,"y":3100,"wires":[]},{"id":"fbb586cb.eaa358","type":"ui_button","z":"5ee1436e.8f6cb4","name":"Down","group":"e65734b7.d80b78","order":3,"width":"2","height":"1","passthru":false,"label":"","color":"","bgcolor":"","icon":"fa-arrow-down fa-2x","payload":"down","payloadType":"str","topic":"","x":470,"y":3140,"wires":[["b77f206d.0f3a38"]]},{"id":"54fde241.cdf4dc","type":"ui_button","z":"5ee1436e.8f6cb4","name":"Stop","group":"e65734b7.d80b78","order":2,"width":"2","height":"1","passthru":false,"label":"","color":"","bgcolor":"","icon":"fa-stop-circle fa-2x","payload":"stop","payloadType":"str","topic":"","x":470,"y":3100,"wires":[["b77f206d.0f3a38"]]},{"id":"4b7e920a.5d82d4","type":"ui_template","z":"5ee1436e.8f6cb4","group":"e65734b7.d80b78","name":"","order":0,"width":0,"height":0,"format":"<style>\n#Verlichting_LuxaflexHobbykamer_cards{\n font-size: 50px !important;\n}\n \n} \n \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":740,"y":3060,"wires":[[]]},{"id":"e65734b7.d80b78","type":"ui_group","z":"","name":"LuxaflexHobbykamer","tab":"209f7863.40989","order":3,"disp":true,"width":"6"},{"id":"2db287b.addf978","type":"mqtt-broker","z":"","broker":"192.168.1.127","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"/vm/mqtt/birth","birthQos":"0","birthPayload":"birth","willTopic":"","willQos":"0","willPayload":""},{"id":"209f7863.40989","type":"ui_tab","z":"","name":"Verlichting","icon":"lightbulb_outline","order":1}]`

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [8 October 2018 21:05 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/14 "2018-10-08T21:05:16Z")

</div>

Well, as Dave antecipated the issue is the CSS selector not targeting correctly the button´s icons.

The CSS selector I used for the switch worked fine but this is not the case when using buttons. So, the issue is not related to your flow or to anything that you did. It is just a matter of finding the correct way to target what you want.

You could use for instance the CSS selector `ui-icon` but this will probably impact all the icons in the dashboard. See below. Probably the best solution is the one you already used (add the class fa-2x)

```auto
    <style>
            ui-icon {
            font-size: 30px;
            color: red;
        }
        
        #LAB_G2_cards {
            font-size: 40px;
        
        }
    </style>

```

 ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e28b7d62fb19fb04cabc6b43f3b2133cac3c32d8.png)

```auto
[{"id":"a2175cb0.64d21","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"f107f542.f58a38","type":"ui_button","z":"a2175cb0.64d21","name":"Up","group":"e4aa1bd9.47a7d8","order":1,"width":"2","height":"1","passthru":false,"label":"UP","color":"","bgcolor":"","icon":"fa-arrow-up","payload":"up","payloadType":"str","topic":"","x":270,"y":160,"wires":[["16c3b6f9.e0ccb9"]]},{"id":"bf13579e.79f768","type":"ui_button","z":"a2175cb0.64d21","name":"Down","group":"e4aa1bd9.47a7d8","order":3,"width":"2","height":"1","passthru":false,"label":"Down","color":"","bgcolor":"","icon":"fa-arrow-down","payload":"down","payloadType":"str","topic":"","x":270,"y":240,"wires":[["16c3b6f9.e0ccb9"]]},{"id":"413237fb.b47ad8","type":"ui_button","z":"a2175cb0.64d21","name":"Stop","group":"e4aa1bd9.47a7d8","order":2,"width":"2","height":"1","passthru":false,"label":"Stop","color":"","bgcolor":"","icon":"fa-stop-circle","payload":"stop","payloadType":"str","topic":"","x":270,"y":200,"wires":[["16c3b6f9.e0ccb9"]]},{"id":"d9bbc744.f2cd68","type":"ui_template","z":"a2175cb0.64d21","group":"e4aa1bd9.47a7d8","name":"","order":0,"width":"6","height":"2","format":"<!doctype html>\n\n<html>\n\n<head>\n <style>\n ui-icon {\n font-size: 30px;\n color: red;\n }\n \n #LAB_G2_cards {\n font-size: 40px;\n \n }\n </style>\n</head>\n\n<body></body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":520,"y":140,"wires":[[]]},{"id":"16c3b6f9.e0ccb9","type":"debug","z":"a2175cb0.64d21","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":500,"y":220,"wires":[]},{"id":"3c5feac3.446186","type":"ui_switch","z":"a2175cb0.64d21","name":"","label":"switch","group":"4d3fda4d.98c334","order":0,"width":"8","height":"2","passthru":false,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-arrow-circle-up","oncolor":"lime","offvalue":"false","offvalueType":"bool","officon":"fa-arrow-circle-up","offcolor":"yellow","x":510,"y":280,"wires":[[]]},{"id":"e4aa1bd9.47a7d8","type":"ui_group","z":"","name":"G1","tab":"763667c5.ae1af8","order":1,"disp":true,"width":"8","collapse":false},{"id":"4d3fda4d.98c334","type":"ui_group","z":"","name":"G2","tab":"763667c5.ae1af8","order":2,"disp":true,"width":"8","collapse":false},{"id":"763667c5.ae1af8","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![arneym](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arneym/32/54_2.png) [@arneym](https://discourse.nodered.org/u/arneym)\
**Post date:** [24 October 2018 16:46 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/15 "2018-10-24T16:46:17Z")

</div>

How do you change the font-size on the labels of a bar chart?

---

<div class="post-metadata">

**Author:** ![cuxcrider](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@cuxcrider](https://discourse.nodered.org/u/cuxcrider)\
**Post date:** [1 February 2019 05:48 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/16 "2019-02-01T05:48:19Z")

</div>

I am using a text input node and would like to change the font size of the input text. I can change the label size using something like `<font size = 6 color = black>` but how can I do this to the text or number the user inputs into the node?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 February 2019 07:19 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/17 "2019-02-01T07:19:19Z")

</div>

As per previous answers you will need to inspect the CSS and add the correct sizing to the appropriate style.

---

<div class="post-metadata">

**Author:** ![cuxcrider](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@cuxcrider](https://discourse.nodered.org/u/cuxcrider)\
**Post date:** [1 February 2019 21:10 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/18 "2019-02-01T21:10:34Z")

</div>

Thanks for the reply. I know next to nothing about CSS, so I'll just ask the basic question: Am I able to edit the CSS of the dashboard or do I need to make a new dashboard template node specifically for this? If I can edit the CSS of the dashboard, where do I find the CSS?

I found examples of creating a custom button with the dashboard template node, so I should be able to learn how to do this, but it is unclear how I can edit the CSS that is employed by default, or even if I should do this.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 February 2019 21:17 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/19 "2019-02-01T21:17:44Z")

</div>

Add a suitable ui\_template node to your page like this - then edit as you need.

```auto
[{"id":"9625640a.ae7ae8","type":"ui_template","z":"68704546.3d0e0c","group":"8c6774a4.06e158","name":"","order":6,"width":0,"height":0,"format":"<style>\n.nr-dashboard-theme .nr-dashboard-textinput input {\n font-size: xx-large;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":660,"y":320,"wires":[[]]},{"id":"8c6774a4.06e158","type":"ui_group","z":"","name":"Default","tab":"3df105b2.37ac4a","order":2,"disp":true,"width":"6","collapse":false},{"id":"3df105b2.37ac4a","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [21 May 2019 20:31 UTC](https://discourse.nodered.org/t/getting-bigger-font/229/20 "2019-05-21T20:31:23Z")

</div>

How do you change the font size on a chart? For the x and Y axis.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6f78f1b0789c241a0c3188d9207fb8e1cca1f9e0.png)

[Next page](https://discourse.nodered.org/t/getting-bigger-font/229.md?page=2)