anyone knows how i can get a larger font of text UI
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"}]
3 Likes
Hello,
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?
I mean just the text sice of a particular widget
as example i do it like this
result:
3 Likes
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"
Then change the CSS config in a template node as Dave has shown.
This will result in something like below. Note that the font size will change for each and every widget inside the group Placeholder.
3 Likes
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?
How did you configure the buttons ? You may be able to do fa-arrow fa-2x. Sort of thing
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.
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
If you can share your flow I can have a look on it.
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}]
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)
<style>
ui-icon {
font-size: 30px;
color: red;
}
#LAB_G2_cards {
font-size: 40px;
}
</style>
[{"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"}]
How do you change the font-size on the labels of a bar chart?
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?
As per previous answers you will need to inspect the CSS and add the correct sizing to the appropriate style.
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.
Add a suitable ui_template node to your page like this - then edit as you need.
[{"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}]
1 Like
How do you change the font size on a chart? For the x and Y axis.
