I would like to change the colour of the label shown in the dashboard of the text node. At the moment it shows up as white but I would like to make it yellow to stand out more. Is this possible? I can control the colour of the message shown within the text node by using a function node.
You can specify a css class at runtime in msg.className. You can set css style in a ui-template node. You can then send different className to change to different style
Here is simple example which you can expand on.
[{"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 {\n color: red !important;\n}\n.my_label_blue {\n color: blue !important;\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}]
Hi just tried this do I need to change the something in the text node as it changes the wording but not the colour of the text?
@E1cid's example works for me:
Do you want to change the colour of the text or the background colour?
How do you use a function node to change the colour of the text node?
Note that it is possible (but perhaps rather outdated) to change the text colour using options in the node config. @E1cid's CSS will override this option though.
Here is my flow `[
{
"id": "6faf73bf09e6a839",
"type": "ui_text",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"group": "02b937db40fbc203",
"order": 17,
"width": 0,
"height": 0,
"name": "",
"label": "ESP32 Is Hard Coded To Set it at 24 -25 Degrees But it Can be changed to 24.5 If Required. The Heater Will Turn On After Reboot Until 25 Deg Is Reached.",
"format": "{{msg.payload}}",
"layout": "row-spread",
"x": 620,
"y": 400,
"wires": []
},
{
"id": "02b937db40fbc203",
"type": "ui_group",
"name": "BackUp Temperature Monitoring",
"tab": "10efd1e5b5bf9ba1",
"order": 1,
"disp": true,
"width": 28,
"collapse": false
},
{
"id": "10efd1e5b5bf9ba1",
"type": "ui_tab",
"name": "Backup Temperature",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]`
I want to just change the long text in the label part of the text node that reads "ESP32 Is Hard Coded To Set it at 24 -25 Degrees But it Can be changed to 24.5 If Required. The Heater Will Turn On After Reboot Until 25 Deg Is Reached."
I do not get to see the style part showing but that maybe because I do not really understand how it all works.
There is something wrong with that: I can't import it.
Export your flow ("Copy to clipboard") then click on the </> button here and paste over the top of "
type or paste code here"
It will result in lines with three backticks above and below the code.
[
{
"id": "6bbb521b9dc93fc1",
"type": "group",
"z": "923d46fbeb64e5e5",
"name": "",
"style": {
"fill": "#ffffbf",
"label": true
},
"nodes": [
"78e2efe506d48494",
"ac16d87654c270d5",
"4200a6971bda47f1",
"22eb6fece4776f67",
"26d4da56d6e6abf0",
"c7bdda4f6e0fab4c",
"22b446c6755d01c4",
"18cd054306eada84",
"6faf73bf09e6a839",
"91b5254bc8e0b1a7",
"05398bce4bbea395",
"934a443dcbd79a65"
],
"x": 54,
"y": 59,
"w": 1152,
"h": 442
},
{
"id": "78e2efe506d48494",
"type": "debug",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "debug 6",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 540,
"y": 220,
"wires": []
},
{
"id": "ac16d87654c270d5",
"type": "ui_gauge",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "",
"group": "02b937db40fbc203",
"order": 1,
"width": 6,
"height": 5,
"gtype": "gage",
"title": "Back Up Heater",
"label": "Deg C",
"format": "{{value}}",
"min": "20",
"max": "30",
"colors": [
"#0c00b3",
"#04e600",
"#f72008"
],
"seg1": "24",
"seg2": "27",
"x": 1100,
"y": 100,
"wires": []
},
{
"id": "4200a6971bda47f1",
"type": "ui_chart",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "",
"group": "02b937db40fbc203",
"order": 3,
"width": 21,
"height": 7,
"label": "Last 24 hours",
"chartType": "line",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "",
"ymax": "",
"removeOlder": "24",
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"x": 1100,
"y": 160,
"wires": [
[]
]
},
{
"id": "22eb6fece4776f67",
"type": "ui_text",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"group": "02b937db40fbc203",
"order": 8,
"width": 6,
"height": 1,
"name": "",
"label": "BackUp Heater",
"format": "<font color= {{msg.color}} > {{msg.payload}} </font>",
"layout": "row-spread",
"x": 1100,
"y": 280,
"wires": []
},
{
"id": "26d4da56d6e6abf0",
"type": "mqtt in",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "",
"topic": "backupHeaterStatus",
"qos": "2",
"datatype": "auto-detect",
"broker": "3d66ad6c381a3af0",
"nl": false,
"rap": true,
"rh": 0,
"inputs": 0,
"x": 170,
"y": 280,
"wires": [
[
"c7bdda4f6e0fab4c",
"78e2efe506d48494",
"934a443dcbd79a65"
]
]
},
{
"id": "c7bdda4f6e0fab4c",
"type": "function",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "Controll the colour of LED",
"func": "msg.color = (msg.payload == \"Heater On\")?\"green\":\"red\";\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 590,
"y": 340,
"wires": [
[
"22b446c6755d01c4"
]
]
},
{
"id": "22b446c6755d01c4",
"type": "ui_text",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"group": "02b937db40fbc203",
"order": 10,
"width": 6,
"height": 1,
"name": "",
"label": "Heater Status",
"format": "<font color={{msg.color}} ><i class=\"fa fa-circle\" style=\"font-size:24px;\"></i></font>",
"layout": "row-spread",
"x": 1100,
"y": 340,
"wires": []
},
{
"id": "18cd054306eada84",
"type": "mqtt in",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "",
"topic": "backupHeaterControl",
"qos": "0",
"datatype": "auto-detect",
"broker": "3d66ad6c381a3af0",
"nl": false,
"rap": true,
"rh": 0,
"inputs": 0,
"x": 180,
"y": 100,
"wires": [
[
"78e2efe506d48494",
"05398bce4bbea395",
"ac16d87654c270d5"
]
]
},
{
"id": "6faf73bf09e6a839",
"type": "ui_text",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"group": "02b937db40fbc203",
"order": 17,
"width": 0,
"height": 0,
"name": "",
"label": "ESP32 Is Hard Coded To Set it at 24 -25 Degrees But it Can be changed to 24.5 If Required. The Heater Will Turn On After Reboot Until 25 Deg Is Reached.",
"format": "{{msg.payload}}",
"layout": "row-spread",
"x": 620,
"y": 400,
"wires": []
},
{
"id": "91b5254bc8e0b1a7",
"type": "comment",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "Limitations",
"info": "Even though I can control the values to a few decimal places.\n\nUsing the EEPROM of the ESP32 has limitations using floating point numbers.\n\nThis could be gotten around if I send a reboot message from the ESP32. and then use node red to change the values back to floating points.",
"x": 140,
"y": 460,
"wires": []
},
{
"id": "05398bce4bbea395",
"type": "function",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "Check range is above 20 and bleow 30 Deg C",
"func": "if (msg.payload >= 20 && msg.payload <= 30) {\n return msg;\n}",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 660,
"y": 160,
"wires": [
[
"4200a6971bda47f1"
]
]
},
{
"id": "934a443dcbd79a65",
"type": "function",
"z": "923d46fbeb64e5e5",
"g": "6bbb521b9dc93fc1",
"name": "Color Mapping",
"func": "switch (msg.payload) {\n\ncase \"disarmed\" : \n msg.color = \"lime\";\n break;\n \ncase \"pending\" : \n msg.color = \"red\";\n break;\n \ndefault : \n msg.color = \"yellow\";\n break;\n}\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 720,
"y": 280,
"wires": [
[
"22eb6fece4776f67"
]
]
},
{
"id": "02b937db40fbc203",
"type": "ui_group",
"name": "BackUp Temperature Monitoring",
"tab": "10efd1e5b5bf9ba1",
"order": 1,
"disp": true,
"width": 28,
"collapse": false
},
{
"id": "3d66ad6c381a3af0",
"type": "mqtt-broker",
"name": "",
"broker": "localhost",
"port": "1883",
"clientid": "",
"autoConnect": true,
"usetls": false,
"protocolVersion": "4",
"keepalive": "60",
"cleansession": true,
"birthTopic": "",
"birthQos": "0",
"birthPayload": "",
"birthMsg": {},
"closeTopic": "",
"closeQos": "0",
"closePayload": "",
"closeMsg": {},
"willTopic": "",
"willQos": "0",
"willPayload": "",
"willMsg": {},
"userProps": "",
"sessionExpiry": ""
},
{
"id": "10efd1e5b5bf9ba1",
"type": "ui_tab",
"name": "Backup Temperature",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Looks like I messed up the copy and paste
Where is your ui-template node with the css?
The flow.json is missing start [ and has extra comma at end.
Did you press one of the inject nodes after you deployed?
Did you add the ui-template node?
Yes sorry added the pictures to the above still learning how to work with the forum software.
Here is the dashboard view for my main flow.
This does not address the "It's not working for me" issue but to change the colour of the label not the value, change @E1cid's CSS to this
<style>
.my_label_red p.label{
color: red !important;
}
.my_label_blue p.label{
color: blue !important;
}
</style>
ps "!important" seems like desperation to me, it's generally possible to avoid it. I've not tried here though.
html 5 does not support font, so may not work in all browsers.
Tried inline css and that does not seem to be supported in the text node either.
here is a screen shot of the text node i do not see the style section.
Maybe I need to check my version of node red running on the Raspberry Pi 4?
Yes the inline styling (which @holmesjohnnyh seems to be using, though not for that long label) is very much to be deprecated nowadays.
I know its a hack, but it does work in Chrome Firefox and Edge (for now at least)
Tried without !important with my simple example, did not work without it.
Ahh OK (I wonder what that means) 
To be honest I've never noticed it before today either.
I'm running Node-red 3.1.0 and node-red-dashboard 3.5.0.
I'd be surprised if this is a new option in the node.
You need to be running Node-red-dashboard 3 to use CSS classes as in E1Cid's example
