I am using node red version 3.0.2 but not sure how to find the dashboard version.
He is not using inline, inline css use style attribute,
e.g
<p style="color:red;">text<p>
You are right. HTML not CSS. Anyway it's wrong these days.
<font color= {{msg.color}} > {{msg.payload}} </font>
dashboard is the 3.5 as well. Looks like I need to change a few things if I am doing them the wrong way as suggested by a few comments.
I wonder why you don't see the Style or Class options on the text node.
Is it the standard one provided with Dashboard, or have you installed something else?
I think this works though?
<style>
.my_label_red p{
color: red ;
}
.my_label_blue p{
color: blue;
}
</style>
1 Like
Yes you are correct, as it is targeting the <p> tag. so definitely a better option. So your previous css p.label should work without the !important to.
So to change to css what do i need to look at as so far I have tried different ways and still no colour change! in my dashboard?
I must have not set something up as the example shown did not work on my setup.
If this does not work I don't know what the issue is
You need the ui-template and do not edit its tab set it to <head> as is.
[{"id":"7e9186040977be26","type":"ui_text","z":"b9860b4b9de8c8da","group":"8b5cde76.edd58","order":3,"width":0,"height":0,"name":"","label":"{{msg.payload}}","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":570,"y":200,"wires":[]},{"id":"aae5337bee8f059c","type":"ui_template","z":"b9860b4b9de8c8da","group":"4f791fdc1745d3d9","name":"","order":2,"width":0,"height":0,"format":"<style>\n .my_label_red p.label{\n color: red ;\n}\n.my_label_blue p.label{\n color: blue;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":540,"y":120,"wires":[[]]},{"id":"2093f740c739282a","type":"inject","z":"b9860b4b9de8c8da","name":"red","props":[{"p":"className","v":"my_label_red","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":390,"y":200,"wires":[["7e9186040977be26"]]},{"id":"6a309898c6f8b851","type":"inject","z":"b9860b4b9de8c8da","name":"blue","props":[{"p":"className","v":"my_label_blue","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"blue","payloadType":"str","x":390,"y":260,"wires":[["7e9186040977be26"]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"4f791fdc1745d3d9","type":"ui_group","name":"micro","tab":"c954274bbed7292e","order":1,"disp":false,"width":"18","collapse":false,"className":""},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false},{"id":"c954274bbed7292e","type":"ui_tab","name":"Solar","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Yes there is!
Uninstall dashboard-evi but you will probably have to move the dashboard nodes in your flows to the official ones too
@E1cid's example will only work on the official dashboard node (which includes the Class option in config)
Thanks I will have to read up how to uninstall it on the pi and slowly re setup the dashboard again.
Probably, yes. Uninstall the other one.
As you have to rework your dashboard flows, you may want to look at adding more css to the ui-template and remove your html font colors as it is not really supported anymore.
You can specify the css class in the ui node class input field or use msg.className, as in the image below. You can then use the power of css in all your dashboard nodes
Well deleted the other dashboard so need to use the new version and try to learn the use of css, but that's for another day for now
How would I manage to get a value/text dynamically shown in different colors? Like f.e. in this example, which is made of a text node and shows the state of two windows with "Terasse" being the label
I currently use what has been confirmed to be outdated multiple times, f.e. "msg.payload.lh = '<.font color=#8493A3>zu | </font.>' ", for each of the two payloads that carry the information (hence: msg.payload = msg.payload.lh + msg.payload.rh).
And it works well on all my devices/browser. At least for now 
The first example now works with the right version of the Dashboard. Thanks
@E1cid - I am not sure this helps. Even if you add "+node+red" to the search. I couldn't find a way to incorporate this into node red.
But your impulse reminded me of a new friend "who" hasn't yet made it to my "muscle memory" 
I asked ChatGPT only two questions:
-
"how to create multicolor label in node red text node" => the proposed solution with inline CSS does not seem to work, at leat in Safari, but ...
-
I then asked in the same chat "how to achieve it with css" et viola I have a working solution (see below)
To the experts: Would this approach be what you would chose today as "not deprecated"?
The advantage of this approach is, that I can centrally manage colors.
[
{
"id": "288b19d62750c6ca",
"type": "inject",
"z": "24efb360.c05374",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "offen",
"payloadType": "str",
"x": 790,
"y": 560,
"wires": [
[
"a63824ecac0b03ee"
]
]
},
{
"id": "a63824ecac0b03ee",
"type": "change",
"z": "24efb360.c05374",
"name": "set text",
"rules": [
{
"t": "change",
"p": "payload",
"pt": "msg",
"from": "geschlossen",
"fromt": "str",
"to": "<span class=\"green-text\">geschlossen</span>",
"tot": "str"
},
{
"t": "change",
"p": "payload",
"pt": "msg",
"from": "offen",
"fromt": "str",
"to": "<span class=\"red-text\">offen</span>",
"tot": "str"
},
{
"t": "change",
"p": "payload",
"pt": "msg",
"from": "gekippt",
"fromt": "str",
"to": "<span class=\"yellow-text\">kipp</span>",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 960,
"y": 600,
"wires": [
[
"743789d1c67a4852"
]
]
},
{
"id": "721ef0ce609f0c23",
"type": "inject",
"z": "24efb360.c05374",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "geschlossen",
"payloadType": "str",
"x": 770,
"y": 600,
"wires": [
[
"a63824ecac0b03ee"
]
]
},
{
"id": "542a9f918e70cf7c",
"type": "inject",
"z": "24efb360.c05374",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "gekippt",
"payloadType": "str",
"x": 790,
"y": 640,
"wires": [
[
"a63824ecac0b03ee"
]
]
},
{
"id": "743789d1c67a4852",
"type": "ui_text",
"z": "24efb360.c05374",
"group": "6399ce48.c6c6",
"order": 1,
"width": "2",
"height": "1",
"name": "Fenster Arbeit",
"label": "",
"format": "{{msg.payload}}",
"layout": "col-center",
"className": "",
"style": false,
"font": "",
"fontSize": "",
"color": "#000000",
"x": 1120,
"y": 600,
"wires": []
},
{
"id": "f16e482778f8a7b1",
"type": "ui_template",
"z": "24efb360.c05374",
"group": "76fc2576.c7f3f4",
"name": "",
"order": 7,
"width": 0,
"height": 0,
"format": "<style>\n .red-text {\n color: red;\n }\n\n .yellow-text {\n color: yellow;\n }\n\n .green-text {\n color: green;\n }\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 880,
"y": 500,
"wires": [
[]
]
},
{
"id": "6399ce48.c6c6",
"type": "ui_group",
"name": "Fenster & Beschattung",
"tab": "266a8f62.49781",
"order": 3,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "76fc2576.c7f3f4",
"type": "ui_group",
"name": "Zentral",
"tab": "5a91a4b3.406c04",
"order": 1,
"disp": false,
"width": "6",
"collapse": false
},
{
"id": "266a8f62.49781",
"type": "ui_tab",
"name": "Arbeiten",
"icon": "fa-male",
"order": 4,
"disabled": false,
"hidden": false
},
{
"id": "5a91a4b3.406c04",
"type": "ui_tab",
"name": "Zentral",
"icon": "fa-home",
"order": 1,
"disabled": false,
"hidden": false
}
]
