Hi! I would like to know how to adjust my text in dashboard using the template. I managed to do it on cards but I want both label and value has a different size on this matter. I tried using both the template along with editing the text node but it seems the text alignment somewhat can't be centered. Can someone tell me what to do? Thank you very much!
You need to give a bit more information, there is a lot of text on most dashboards. What text are you talking about?
What ever node you are using, have you checked to see if it has an option to add a CSS class?
What version of NR, node.js and the dashboard? (You can get this all from the startup log)
I suspect your meaning has been a bit lost in translation.
Do any of these options provide what you want? If not maybe you could post a picture to show exactly what effect you are after.
Edit - I deleted a line of the template CSS which wasn't achieving anything.
[{"id":"7e424414dd8113cc","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"f2d570211d67b045","type":"ui_text","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","order":0,"width":"6","height":"1","name":"","label":"Layout 1","format":"{{msg.payload}}","layout":"row-left","className":"experiment","x":420,"y":180,"wires":[]},{"id":"c932d4548a16e16d","type":"inject","z":"7e424414dd8113cc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Hello World","payloadType":"str","x":230,"y":180,"wires":[["f2d570211d67b045","52ea1c1c8bea0c7a","0abed404e9192ced","4bbebfd5e6ee9b0a","7009085e50babc3f"]]},{"id":"0ce89a9652356528","type":"ui_template","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","name":"","order":1,"width":0,"height":0,"format":"<style>\n .nr-dashboard-text.experiment {\n background-color: aquamarine;\n }\n .nr-dashboard-text.wibble p.label{\n font-size: 0.8em;\n }\n .nr-dashboard-text.wibble p.value{\n font-size: 1.8em;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":240,"y":300,"wires":[[]]},{"id":"52ea1c1c8bea0c7a","type":"ui_text","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","order":0,"width":"6","height":"1","name":"","label":"Layout 2","format":"{{msg.payload}}","layout":"row-center","className":"experiment","x":420,"y":220,"wires":[]},{"id":"0abed404e9192ced","type":"ui_text","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","order":0,"width":"6","height":"1","name":"","label":"Layout 3","format":"{{msg.payload}}","layout":"row-right","className":"experiment","x":420,"y":260,"wires":[]},{"id":"4bbebfd5e6ee9b0a","type":"ui_text","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","order":0,"width":"6","height":"1","name":"","label":"Layout 4","format":"{{msg.payload}}","layout":"row-spread","className":"experiment","x":420,"y":300,"wires":[]},{"id":"7009085e50babc3f","type":"ui_text","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","order":0,"width":"6","height":"1","name":"","label":"Layout 5","format":"{{msg.payload}}","layout":"col-center","className":"experiment","x":420,"y":340,"wires":[]},{"id":"6a470d5d8161e3cf","type":"ui_text","z":"7e424414dd8113cc","group":"f76268eaaca5a4a9","order":0,"width":"6","height":"1","name":"","label":"Layout 2","format":"Different Sizes","layout":"row-center","className":"experiment wibble","x":420,"y":380,"wires":[]},{"id":"f76268eaaca5a4a9","type":"ui_group","name":"Demo","tab":"ef7df567c051ee20","order":1,"disp":true,"width":"20","collapse":false,"className":""},{"id":"ef7df567c051ee20","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]
Ah sorry. I forgot to include the flow.
I am using a simple ui_text and ui_template from the dashboard node.
Node-RED version: v2.2.0
node-red-dashboard v3.1.5
Node.js version: v16.13.2
[
{
"id": "a840a8e8fac51592",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": "",
"env": []
},
{
"id": "77324725108e80c6",
"type": "ui_text",
"z": "a840a8e8fac51592",
"group": "5fc1edfa5665e892",
"order": 1,
"width": 9,
"height": 8,
"name": "",
"label": "<font size = 4>Some text",
"format": "Some value",
"layout": "col-center",
"className": "",
"x": 550,
"y": 220,
"wires": []
},
{
"id": "04a670f1ea365b6b",
"type": "ui_template",
"z": "a840a8e8fac51592",
"group": "a797e1f8895746d2",
"name": "",
"order": 7,
"width": 0,
"height": 0,
"format": "<style>\nbody.nr-dashboard-theme {\n font-size: 14px;\n \n}\n.md-toolbar-tools h1 {\n font-size: 18px;\n}\n\n}\n\n#Home_Default_cards {\n font-size: 80px ;\n}\n\n}\n\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 820,
"y": 180,
"wires": [
[]
]
},
{
"id": "5fc1edfa5665e892",
"type": "ui_group",
"name": "Default",
"tab": "7b0497187556de95",
"order": 1,
"disp": false,
"width": 9,
"collapse": false,
"className": ""
},
{
"id": "7b0497187556de95",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
This is how its look with the template setting:
What I want is actually make both of them has a different size from each other, as my intention is to only reduce "Some text" text size while keep the "some value" text size as it is.
While I have no idea what I should do in ui_template to make that happen, I tried to edit the ui_text instead and add font-size, but this is the output:
I want it to kinda "tidy". Thank you for the reply!
Yes actually. That layout 5. The problem is I tried to edit the font size to fit my needs, and I use ui_template for that ( I think I tried to edit font-size on the ui_text node but it capped at certain point, so I use ui_template instead). I post the whole picture and flow in reply to zenofmud so maybe you could take a look at it. Thank you for the reply!
In the flow I posted, there is a template with some CSS.
All of the text widgets have a custom class "experiment". All that does is turn the background-color aquamarine.
But the last example also has custom class "wibble" which makes the label smaller and the value larger.
So if you apply class "wibble" to layout 5 and remove class "experiment"...
You can adjust the font sizes for label and value by editing the template to suit your requirements.
In fact if you want "some value" to be the default size, you can delete the bit
.nr-dashboard-text.wibble p.value{
font-size: 1.8em;
}
Basically that just leaves
.nr-dashboard-text.wibble p.label{
font-size: 0.8em;
}
And feel free to change the name from wibble to something more sensible. I just use wibble when I'm trying things out and have already used up foo and bar. 
2 Likes
Thank you very much. That pretty much answer my question and future question lol.
Hope you have a good day!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
