# Increasing value font size

**URL:** <https://discourse.nodered.org/t/increasing-value-font-size/54870>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [8 December 2021 12:21 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870 "2021-12-08T12:21:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MR76](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@MR76](https://discourse.nodered.org/u/MR76)\
**Post date:** [8 December 2021 12:21 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/1 "2021-12-08T12:21:02Z")

</div>

Hi,  
I'm trying to increase the size of the number in the current value field. I tried it with `<font size =25> {{msg.payload}}`  
in the value format. But that doesnt't work after a certain font size. Is there any other way to do it?

 ![screenshot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/1/c1cf49d87694edbb47c8dd64ffdadd6001c196fe.png)

Best regards

---

<div class="post-metadata">

**Author:** ![MR76](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@MR76](https://discourse.nodered.org/u/MR76)\
**Post date:** [8 December 2021 12:48 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/2 "2021-12-08T12:48:27Z")

</div>

Here is my flow

```auto
[{"id":"3e53ca35.c83ac6","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"c09896c2.ab8e08","type":"ui_text","z":"3e53ca35.c83ac6","group":"b056afdb.c7064","order":1,"width":5,"height":1,"name":"","label":"","format":"<font size =25> {{msg.payload}}","layout":"col-center","className":"","x":350,"y":580,"wires":[]},{"id":"62302add.4be644","type":"ui_text","z":"3e53ca35.c83ac6","group":"81ca356d.285a68","order":1,"width":5,"height":1,"name":"","label":"","format":"<font size =25> {{msg.payload}}","layout":"col-center","className":"","x":570,"y":120,"wires":[]},{"id":"dbdd74ea.499358","type":"ui_text","z":"3e53ca35.c83ac6","group":"8e0a4637.5f0ed8","order":1,"width":5,"height":1,"name":"","label":"","format":"<font size =25> {{msg.payload}}","layout":"col-center","className":"","x":570,"y":300,"wires":[]},{"id":"f85fe283.6d61","type":"ui_text","z":"3e53ca35.c83ac6","group":"bf6ba59b.615928","order":1,"width":5,"height":1,"name":"","label":"","format":"<font size =25> {{msg.payload}}","layout":"col-center","className":"","x":570,"y":460,"wires":[]},{"id":"f880659.057b898","type":"ui_text","z":"3e53ca35.c83ac6","group":"f3c27b0f.eb2868","order":1,"width":10,"height":6,"name":"current value","label":"","format":"<font size =25> {{msg.payload}}","layout":"col-center","className":"","x":370,"y":660,"wires":[]},{"id":"f75fbfdc.8181f","type":"s7 in","z":"3e53ca35.c83ac6","endpoint":"17b58fa0.732d4","mode":"single","variable":"Zähler","diff":false,"name":"","x":110,"y":300,"wires":[["71ba5745.f20638","52824021.78eea","588c8c11.c5c354"]]},{"id":"1ce58b1d.b421f5","type":"s7 in","z":"3e53ca35.c83ac6","endpoint":"17b58fa0.732d4","mode":"single","variable":"Zähler","diff":false,"name":"placeholder","x":190,"y":620,"wires":[["f880659.057b898","c09896c2.ab8e08"]]},{"id":"52824021.78eea","type":"gate","z":"3e53ca35.c83ac6","name":"","controlTopic":"control","defaultState":"closed","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","defaultCmd":"default","statusCmd":"status","persist":false,"storeName":"memory","x":450,"y":120,"wires":[["62302add.4be644"]]},{"id":"71ba5745.f20638","type":"gate","z":"3e53ca35.c83ac6","name":"","controlTopic":"control","defaultState":"closed","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","defaultCmd":"default","statusCmd":"status","persist":false,"storeName":"memory","x":450,"y":300,"wires":[["dbdd74ea.499358"]]},{"id":"588c8c11.c5c354","type":"gate","z":"3e53ca35.c83ac6","name":"","controlTopic":"control","defaultState":"closed","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","defaultCmd":"default","statusCmd":"status","persist":false,"storeName":"memory","x":450,"y":460,"wires":[["f85fe283.6d61"]]},{"id":"b73590d.03f8c7","type":"inject","z":"3e53ca35.c83ac6","name":"","topic":"control","payload":"open","payloadType":"str","repeat":"","crontab":"00 14 * * *","once":false,"onceDelay":0.1,"x":140,"y":60,"wires":[["129e0b67.53ef15","d0853c05.b2ccd"]]},{"id":"ab42e727.f26098","type":"inject","z":"3e53ca35.c83ac6","name":"","topic":"control","payload":"open","payloadType":"str","repeat":"","crontab":"00 22 * * *","once":false,"onceDelay":0.1,"x":140,"y":240,"wires":[["f2cb1d94.9b2f3","95667ab3.868188"]]},{"id":"dd4c40d.569f7c","type":"inject","z":"3e53ca35.c83ac6","name":"","topic":"control","payload":"open","payloadType":"str","repeat":"","crontab":"00 06 * * *","once":false,"onceDelay":0.1,"x":140,"y":400,"wires":[["b2a497c6.b73718","cd97ec07.1f2d5"]]},{"id":"129e0b67.53ef15","type":"timeouttrigger","z":"3e53ca35.c83ac6","ontimeouttype":"str","ontimeoutval":"close","duration":"300","units":"ms","name":"","x":310,"y":80,"wires":[["52824021.78eea"]]},{"id":"f2cb1d94.9b2f3","type":"timeouttrigger","z":"3e53ca35.c83ac6","ontimeouttype":"str","ontimeoutval":"close","duration":"300","units":"ms","name":"","x":310,"y":260,"wires":[["71ba5745.f20638"]]},{"id":"b2a497c6.b73718","type":"timeouttrigger","z":"3e53ca35.c83ac6","ontimeouttype":"str","ontimeoutval":"close","duration":"300","units":"ms","name":"","x":310,"y":420,"wires":[["588c8c11.c5c354"]]},{"id":"39837724.f01bf8","type":"delay","z":"3e53ca35.c83ac6","name":"","pauseType":"delay","timeout":"600","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":560,"y":40,"wires":[["676d2337.6f5aac"]]},{"id":"676d2337.6f5aac","type":"timeouttrigger","z":"3e53ca35.c83ac6","ontimeouttype":"bool","ontimeoutval":"false","duration":"1","units":"s","name":"","x":730,"y":40,"wires":[["8c545de6.2c348"]]},{"id":"d0853c05.b2ccd","type":"change","z":"3e53ca35.c83ac6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":40,"wires":[["39837724.f01bf8"]]},{"id":"55fa2e6b.98fc7","type":"delay","z":"3e53ca35.c83ac6","name":"","pauseType":"delay","timeout":"600","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":560,"y":220,"wires":[["40bfb532.e294dc"]]},{"id":"8c545de6.2c348","type":"s7 out","z":"3e53ca35.c83ac6","endpoint":"17b58fa0.732d4","variable":"test","name":"","x":970,"y":220,"wires":[]},{"id":"40bfb532.e294dc","type":"timeouttrigger","z":"3e53ca35.c83ac6","ontimeouttype":"bool","ontimeoutval":"false","duration":"1","units":"s","name":"","x":730,"y":220,"wires":[["8c545de6.2c348"]]},{"id":"95667ab3.868188","type":"change","z":"3e53ca35.c83ac6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":220,"wires":[["55fa2e6b.98fc7"]]},{"id":"e8c2a67a.4d43b8","type":"delay","z":"3e53ca35.c83ac6","name":"","pauseType":"delay","timeout":"600","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":560,"y":380,"wires":[["702c204c.d69d1"]]},{"id":"702c204c.d69d1","type":"timeouttrigger","z":"3e53ca35.c83ac6","ontimeouttype":"bool","ontimeoutval":"false","duration":"1","units":"s","name":"","x":730,"y":380,"wires":[["8c545de6.2c348"]]},{"id":"cd97ec07.1f2d5","type":"change","z":"3e53ca35.c83ac6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":380,"wires":[["e8c2a67a.4d43b8"]]},{"id":"ea1586d6.897978","type":"ui_template","z":"3e53ca35.c83ac6","group":"e7c8e0ca.8d2b9","name":"Clock Toolbar","order":2,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n if($('.md-toolbar-tools').length != 0){\n loadClock();\n }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n \n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleString());\n }\n\n if(document.clockInterval){ \n clearInterval(document.clockInterval);\n document.clockInterval = null;\n }\n \n document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1220,"y":60,"wires":[[]]},{"id":"339829df.c07666","type":"comment","z":"3e53ca35.c83ac6","name":"F","info":"Frühschicht","x":710,"y":120,"wires":[]},{"id":"f529b725.f5db18","type":"comment","z":"3e53ca35.c83ac6","name":"S","info":"","x":710,"y":300,"wires":[]},{"id":"885f1ffc.5cb5e","type":"comment","z":"3e53ca35.c83ac6","name":"N","info":"","x":710,"y":460,"wires":[]},{"id":"b056afdb.c7064","type":"ui_group","z":"","name":"Produktzähler gesamt","tab":"171d8214.95a08e","order":3,"disp":true,"width":5,"collapse":false,"className":""},{"id":"81ca356d.285a68","type":"ui_group","z":"","name":"Frühschicht","tab":"171d8214.95a08e","order":4,"disp":true,"width":5,"collapse":false,"className":""},{"id":"8e0a4637.5f0ed8","type":"ui_group","z":"","name":"Spätschicht","tab":"171d8214.95a08e","order":5,"disp":true,"width":5,"collapse":false,"className":""},{"id":"bf6ba59b.615928","type":"ui_group","z":"","name":"Nachtschicht","tab":"171d8214.95a08e","order":6,"disp":true,"width":5,"collapse":false,"className":""},{"id":"f3c27b0f.eb2868","type":"ui_group","z":"","name":"current value","tab":"171d8214.95a08e","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"17b58fa0.732d4","type":"s7 endpoint","z":"","transport":"iso-on-tcp","address":"192.168.178.10","port":"102","rack":"0","slot":"2","localtsaphi":"01","localtsaplo":"00","remotetsaphi":"01","remotetsaplo":"00","connmode":"rack-slot","adapter":"","busaddr":"2","cycletime":"100","timeout":"2000","name":"","vartable":[{"addr":"DB2,X0.0","name":"test"},{"addr":"DB2,DI6","name":"dword"},{"addr":"DB2,WORD10","name":"Zähler"}]},{"id":"e7c8e0ca.8d2b9","type":"ui_group","z":"","name":"hidden_group","tab":"","order":1,"disp":false,"width":"6","collapse":false},{"id":"171d8214.95a08e","type":"ui_tab","z":"","name":"MSK Produktzähler","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [8 December 2021 14:49 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/3 "2021-12-08T14:49:39Z")

</div>

You can give the current value field a custom class and use a UI template node to style it

 ![Untitled 6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d86e4b196cf467c3877a18d249582df630c89b1.jpeg)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [8 December 2021 15:14 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/4 "2021-12-08T15:14:03Z")

</div>

Thanks!  
I have tried so many posts in the Forum to get around template node settings to get font size customization, by far this is the simplest and easiest i could comprehend. thanks.

So this setting is applicable to all the GROUPS in the TAB ? and not applicable to another TAB. am i right in saying that ?

can we get FONT COLOR also in the template setting ? i am currently doing `<font color=red>` in the text node itself.

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

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/0943bd57a89e58a29c965e0bd37b2877797d2940.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10033b2f4e9784839fdec8dcc9ff7da1f876a8a9.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:** [8 December 2021 16:12 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/5 "2021-12-08T16:12:34Z")

</div>

> [@smanjunath211](#):
>
> So this setting is applicable to all the GROUPS in the TAB ? and not applicable to another TAB. am i right in saying that ?

If you change the template from "widget in group" to "in the page header" it will be applicable on all tabs.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [8 December 2021 16:15 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/6 "2021-12-08T16:15:49Z")

</div>

Great. That is awesome

---

<div class="post-metadata">

**Author:** ![MR76](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@MR76](https://discourse.nodered.org/u/MR76)\
**Post date:** [9 December 2021 12:41 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/7 "2021-12-09T12:41:25Z")

</div>

That worked perfectly, thank you. Is it possible to do this with the group names as well? And Color  
best regards

---

<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:** [9 December 2021 13:47 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/8 "2021-12-09T13:47:13Z")

</div>

Yes you can. I think it depends on the theme settings in Dashboard (on the Site tab) though.  
And I don't know how much you can achieve by changing the template itself.

Here is the same Group having class "red" with two different Site settings.  
Edit - only the dashboard group Column1 is given the custom class, the text widgets are vanilla.

```auto
<style>
.red p {
    color:red;
}
</style>

```

Actually I suggest using a much more specific CSS selector than ".red p" or sooner or later you will have to make your definitions !important, the sign of desperation 😀

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65eaeb44c55f0a57f1680fc57712b665f281023a.jpeg)

---

<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:** [23 December 2021 13:47 UTC](https://discourse.nodered.org/t/increasing-value-font-size/54870/9 "2021-12-23T13:47:52Z")

</div>

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