Increasing value font size

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?

Best regards

Here is my flow

[{"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}]

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

4 Likes

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

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

1 Like

Great. That is awesome

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

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.

<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 :grinning:

1 Like

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