# Changing the colour of the label of a text node in the dashboard (Solved Old Dashboard Used))

**URL:** <https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [22 September 2023 12:35 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490 "2023-09-22T12:35:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 12:35 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/1 "2023-09-22T12:35:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 September 2023 13:03 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/2 "2023-09-22T13:03:07Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 14:14 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/3 "2023-09-22T14:14:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 September 2023 15:00 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/4 "2023-09-22T15:00:34Z")

</div>

@E1cid's example works for me:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72376a95dfee4a354e6aa53b4065ed0a6ea98b05.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/ce493df728fbbb64ec7253d061bee5c2d214b39c.png)

> [@holmesjohnnyh](#):
>
> I would like to change the colour of the label shown in the dashboard of the text node  
> ...  
> I can control the colour of the message shown within the text node by using a function node.

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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25f812d75f6e58b3747fcafe532ebf13be5e3078.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0bfac65158c5028bdd3ef72870fde485dbb03f84.png)

---

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 15:18 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/5 "2023-09-22T15:18:37Z")

</div>

Here is my flow `[

```auto
    {
        "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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 September 2023 15:25 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/6 "2023-09-22T15:25:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 15:28 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/7 "2023-09-22T15:28:22Z")

</div>

```auto
[
    {
        "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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 September 2023 15:28 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/8 "2023-09-22T15:28:48Z")

</div>

Where is your ui-template node with the css?

The flow.json is missing start [ and has extra comma at end.

---

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 15:32 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/9 "2023-09-22T15:32:42Z")

</div>

I added your nodes to a separate flow to test out, I have not tried to add it to my flow yet.

 ![Screenshot 2023-09-22 161449](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e82eeef910ce3f79304c059c725351f38893f9a1.jpeg)  
 ![Screenshot 2023-09-22 163440](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/8790473e440eb6a4c83decba5d902867709c961e.jpeg)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 September 2023 15:35 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/10 "2023-09-22T15:35:20Z")

</div>

Did you press one of the inject nodes after you deployed?  
Did you add the ui-template node?

---

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 15:36 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/11 "2023-09-22T15:36:20Z")

</div>

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.

 ![Screenshot 2023-09-22 163715](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c653e2b5a6e7524b6ba7d16b6e63af707a75e2ba.jpeg)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 September 2023 15:38 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/12 "2023-09-22T15:38:34Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 September 2023 15:39 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/13 "2023-09-22T15:39:17Z")

</div>

I'm sure its bad form but you can do it directly in the node. Sorry @dceejay 🤣 🤣 🤣

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/26c22e1629339e5f2cfc8c3ed035fb5f83649dee.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 September 2023 15:41 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/14 "2023-09-22T15:41:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![holmesjohnnyh](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@holmesjohnnyh](https://discourse.nodered.org/u/holmesjohnnyh)\
**Post date:** [22 September 2023 15:43 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/15 "2023-09-22T15:43:50Z")

</div>

here is a screen shot of the text node i do not see the style section.

 ![Screenshot 2023-09-22 164148](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37a42e21b7a664c0e79d3286f2fd8f54f15fab8b.jpeg)

Maybe I need to check my version of node red running on the Raspberry Pi 4?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 September 2023 15:43 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/16 "2023-09-22T15:43:54Z")

</div>

Yes the inline styling (which @holmesjohnnyh seems to be using, though not for that long label) is very much to be deprecated nowadays.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 September 2023 15:44 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/17 "2023-09-22T15:44:00Z")

</div>

I know its a hack, but it does work in Chrome Firefox and Edge (for now at least)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 September 2023 15:44 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/18 "2023-09-22T15:44:15Z")

</div>

Tried without !important with my simple example, did not work without it.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 September 2023 15:46 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/19 "2023-09-22T15:46:19Z")

</div>

Ahh OK (I wonder what that means) 😀

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 September 2023 15:49 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/20 "2023-09-22T15:49:07Z")

</div>

> [@holmesjohnnyh](#):
>
> Maybe I need to check my version of node red running on the Raspberry Pi 4?

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

[Next page](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490.md?page=2)