# 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:** 2

<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:51 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/21 "2023-09-22T15:51:26Z")

</div>

I am using node red version 3.0.2 but not sure how to find the dashboard version.

---

<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:51 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/22 "2023-09-22T15:51:28Z")

</div>

> [@jbudd](#):
>
> Yes the inline styling (which @holmesjohnnyh seems to be using, th

He is not using inline, inline css use style attribute,  
e.g  
`<p style="color:red;">text<p>`

---

<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:53 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/23 "2023-09-22T15:53:58Z")

</div>

You are right. HTML not CSS. Anyway it's wrong these days.

```auto
<font color= {{msg.color}} > {{msg.payload}} </font>

```

---

<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:55 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/24 "2023-09-22T15:55:29Z")

</div>

Hamburger menu, Manage Palette.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99f5d87393cc7ae93cb95c0521a2a2b2da4ecc27.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 16:01 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/25 "2023-09-22T16:01:35Z")

</div>

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.

---

<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 16: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/26 "2023-09-22T16:03:45Z")

</div>

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?

---

<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 16:09 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/27 "2023-09-22T16:09:16Z")

</div>

> [@E1cid](#):
>
> Tried without !important with my simple example,

I think this works though?

```auto
<style>
  .my_label_red p{
  color: red ;
}
.my_label_blue p{
  color: blue;
}
</style>

```

---

<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 16:10 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/28 "2023-09-22T16:10:55Z")

</div>

looks like i have 2 dashboards installed.  
 ![Screenshot 2023-09-22 170909](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/feaba979e5ec586093bd84d7d4a005df3947cf35.jpeg)

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

not sure if there is a conflict.

---

<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 16: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/29 "2023-09-22T16:18:25Z")

</div>

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.

---

<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 16:24 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/30 "2023-09-22T16:24:27Z")

</div>

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.

---

<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 16: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/31 "2023-09-22T16:28:06Z")

</div>

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.

```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 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}]

```

---

<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 16: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/32 "2023-09-22T16:28:11Z")

</div>

> [@holmesjohnnyh](#):
>
> not sure if there is a conflict.

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)

---

<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 16:33 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/33 "2023-09-22T16:33:21Z")

</div>

Thanks I will have to read up how to uninstall it on the pi and slowly re setup the dashboard again.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 September 2023 16: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/34 "2023-09-22T16:38:31Z")

</div>

> [@holmesjohnnyh](#):
>
> not sure if there is a conflict.

Probably, yes. Uninstall the other one.

---

<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 16:54 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/35 "2023-09-22T16:54:33Z")

</div>

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

 ![chrome_screenshot_1695401530633](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/903a77a75d3f4e5ebd9cab274ee9d41ff8009bba.jpeg)

---

<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 21:19 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/36 "2023-09-22T21:19:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [23 September 2023 11:56 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/37 "2023-09-23T11:56:53Z")

</div>

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

![Bildschirmfoto 2023-09-23 um 13.47.59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90127909efedbf4c6430add7cb83be2e2c13f627.png)

![Bildschirmfoto 2023-09-23 um 13.47.39](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d010972679b93c43f68e401a787556610931ca31.png)

![Bildschirmfoto 2023-09-23 um 13.47.50](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c88e8ddccff26e18e181b3bbc6ea239b0121d912.png)

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 🙂

---

<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:** [23 September 2023 12:12 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/38 "2023-09-23T12:12:29Z")

</div>

> **[css color text two colors at DuckDuckGo](https://duckduckgo.com/?q=css%2Bcolor%2Btext%2Btwo%2Bcolors&ia=qa)**
>
> DuckDuckGo. Privacy, Simplified.

---

<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:** [23 September 2023 12: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/39 "2023-09-23T12:32:29Z")

</div>

The first example now works with the right version of the Dashboard. Thanks

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [23 September 2023 14:10 UTC](https://discourse.nodered.org/t/changing-the-colour-of-the-label-of-a-text-node-in-the-dashboard-solved-old-dashboard-used/81490/40 "2023-09-23T14:10:18Z")

</div>

@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:

1. " **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 ...

2. 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.

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

```

[Previous 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=1)

[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=3)