# Change the color of text in text pallete

**URL:** <https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [12 April 2024 13:24 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194 "2024-04-12T13:24:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nagendra](https://avatars.discourse-cdn.com/v4/letter/n/9fc29f/32.png) [@Nagendra](https://discourse.nodered.org/u/Nagendra)\
**Post date:** [12 April 2024 13:24 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/1 "2024-04-12T13:24:36Z")

</div>

I am using two inject nodes and sending 2 string (ON, OFF) values and i am using one function to handle the things in this , when ON value comes i want to change the color and vice versa (based on value the color of text should be changed) .....

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [13 April 2024 07:51 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/2 "2024-04-13T07:51:50Z")

</div>

Welcome!.  
you have not told, where you want the color to change ? i am assuming it is a text node in old dashboard.

[https://flows.nodered.org/flow/91bb9ea894340c76796b786e56389b71](https://flows.nodered.org/flow/91bb9ea894340c76796b786e56389b71)

Try this.

---

<div class="post-metadata">

**Author:** ![Nagendra](https://avatars.discourse-cdn.com/v4/letter/n/9fc29f/32.png) [@Nagendra](https://discourse.nodered.org/u/Nagendra)\
**Post date:** [15 April 2024 05:40 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/3 "2024-04-15T05:40:09Z")

</div>

Its Working fine, if it can be done using template node ??

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [15 April 2024 07:37 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/4 "2024-04-15T07:37:03Z")

</div>

There are several ways of achieving what you require. this is one of the low code option.  
which template node are you referring to ?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a38227d5d984afeeb0ab05313f3fa00dad10e133.png)

if you could share the part of flow where you want help, some one can pitch in..

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [15 April 2024 07:38 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/5 "2024-04-15T07:38:43Z")

</div>

you could also use CSS in combination of function node / ui-template node.

---

<div class="post-metadata">

**Author:** ![Nagendra](https://avatars.discourse-cdn.com/v4/letter/n/9fc29f/32.png) [@Nagendra](https://discourse.nodered.org/u/Nagendra)\
**Post date:** [17 April 2024 10:43 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/6 "2024-04-17T10:43:45Z")

</div>

Actually i need in both way

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [18 April 2024 08:27 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/7 "2024-04-18T08:27:42Z")

</div>

> [@smanjunath211](#):
>
> if you could share the part of flow where you want help, some one can pitch in..

your inputs are not sufficient to help you.

---

<div class="post-metadata">

**Author:** ![Nagendra](https://avatars.discourse-cdn.com/v4/letter/n/9fc29f/32.png) [@Nagendra](https://discourse.nodered.org/u/Nagendra)\
**Post date:** [18 April 2024 10:42 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/8 "2024-04-18T10:42:49Z")

</div>

[  
{  
"id": "55eefbf19b3ed619",  
"type": "tab",  
"label": "Flow 5",  
"disabled": false,  
"info": "",  
"env":   
},  
{  
"id": "e123d8757f80775b",  
"type": "inject",  
"z": "55eefbf19b3ed619",  
"name": "",  
"props": [  
{  
"p": "payload"  
},  
{  
"p": "topic",  
"vt": "str"  
}  
],  
"repeat": "",  
"crontab": "",  
"once": false,  
"onceDelay": 0.1,  
"topic": "cc",  
"payload": "ON",  
"payloadType": "str",  
"x": 310,  
"y": 140,  
"wires": [  
[  
"9f1eaf8aa48b3e74"  
]  
]  
},  
{  
"id": "45a699e656195efd",  
"type": "inject",  
"z": "55eefbf19b3ed619",  
"name": "",  
"props": [  
{  
"p": "payload"  
},  
{  
"p": "topic",  
"vt": "str"  
}  
],  
"repeat": "",  
"crontab": "",  
"once": false,  
"onceDelay": 0.1,  
"topic": "dd",  
"payload": "OFF",  
"payloadType": "str",  
"x": 310,  
"y": 240,  
"wires": [  
[  
"9f1eaf8aa48b3e74"  
]  
]  
},  
{  
"id": "9f1eaf8aa48b3e74",  
"type": "function",  
"z": "55eefbf19b3ed619",  
"name": "function 4",  
"func": "var value = msg.payload;\nvar topic = msg.topic;\n\nif ((topic=="cc")&&(value=="ON")) \n{\n msg.color = "green";\n} \nelse if ((topic=="dd")&&(value=="OFF")) \n{\n msg.color = "red";\n} \nelse\n{\n msg.color = "white";\n}\n\nreturn msg;\n",  
"outputs": 1,  
"timeout": 0,  
"noerr": 0,  
"initialize": "",  
"finalize": "",  
"libs": ,  
"x": 540,  
"y": 180,  
"wires": [  
[  
"8ef4a94dd3f2eecf"  
]  
]  
},  
{  
"id": "8ef4a94dd3f2eecf",  
"type": "template",  
"z": "55eefbf19b3ed619",  
"name": "",  
"field": "payload",  
"fieldType": "msg",  
"format": "handlebars",  
"syntax": "mustache",  
"template": "This is the payload: {{payload}} !",  
"output": "str",  
"x": 700,  
"y": 180,  
"wires": [  
[  
"cac8d242edc4df1e",  
"1c7abd608c1e3ccc"  
]  
]  
},  
{  
"id": "9d9dd12fb01d13a5",  
"type": "ui\_template",  
"z": "55eefbf19b3ed619",  
"name": "",  
"order": 0,  
"width": 0,  
"height": 0,  
"format": "\<div ng-bind-html="msg.payload"\>",  
"storeOutMessages": true,  
"fwdInMessages": true,  
"resendOnRefresh": true,  
"templateScope": "local",  
"className": "",  
"x": 700,  
"y": 240,  
"wires": [  
  
]  
},  
{  
"id": "cac8d242edc4df1e",  
"type": "debug",  
"z": "55eefbf19b3ed619",  
"name": "debug 6",  
"active": true,  
"tosidebar": true,  
"console": false,  
"tostatus": false,  
"complete": "false",  
"statusVal": "",  
"statusType": "auto",  
"x": 880,  
"y": 200,  
"wires":   
},  
{  
"id": "1c7abd608c1e3ccc",  
"type": "ui\_text",  
"z": "55eefbf19b3ed619",  
"group": "962bcf7e76f9a8cf",  
"order": 4,  
"width": 0,  
"height": 0,  
"name": "",  
"label": "text",  
"format": "{{msg.payload}}",  
"layout": "row-spread",  
"className": "",  
"style": false,  
"font": "",  
"fontSize": 16,  
"color": "#000000",  
"x": 870,  
"y": 140,  
"wires":   
},  
{  
"id": "962bcf7e76f9a8cf",  
"type": "ui\_group",  
"name": "Default",  
"tab": "cd5a125d1165e39c",  
"order": 1,  
"disp": true,  
"width": "6",  
"collapse": false,  
"className": ""  
},  
{  
"id": "cd5a125d1165e39c",  
"type": "ui\_tab",  
"name": "Home",  
"icon": "dashboard",  
"disabled": false,  
"hidden": false  
}  
]

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [18 April 2024 11:03 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/9 "2024-04-18T11:03:56Z")

</div>

cannot copy your flow. go through this post and repost.

> [@How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506):
>
> To share code samples or flow json in this forum, you need to take care to format it properly so that it is displayed correctly. The easiest way to do that is to click the 'Preformatted Text' button in the toolbar: [image] Then paste in your code or flow json. You should end up with three back-tick characters - ``` - on their own line before and after the code. On standard US English keyboards, this is on the same key as the ~ character. Using the backticks will ens…

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [18 April 2024 11:47 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/10 "2024-04-18T11:47:22Z")

</div>

```auto
[{"id":"427a1774a227daf7","type":"inject","z":"475994cd586d34e4","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":170,"y":330,"wires":[["a87576b797e28225"]]},{"id":"c6777a1ed977cedf","type":"inject","z":"475994cd586d34e4","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":170,"y":370,"wires":[["a87576b797e28225"]]},{"id":"57de3798762d996e","type":"function","z":"475994cd586d34e4","name":"magic","func":"if (msg.payload== \"ON\") {\nmsg.payload = \"<span class = 'green'>\" + msg.payload1 + \"</span>\";\n}\nelse if ( (msg.payload == \"OFF\")) {\n msg.payload = \"<span class = 'red'>\" + msg.payload1 + \" </span>\";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":370,"wires":[["afe15dd15328c5d8","fc70b095b429b002"]]},{"id":"afe15dd15328c5d8","type":"debug","z":"475994cd586d34e4","name":"debug 347","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":320,"wires":[]},{"id":"483ba217ac5de561","type":"ui_template","z":"475994cd586d34e4","group":"","name":"CSS","order":13,"width":0,"height":0,"format":"<style>\n .red {\n color: red;font-size:30px;\n } \n .green {\n color: green;font-size:30px;\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":170,"y":290,"wires":[[]]},{"id":"a87576b797e28225","type":"template","z":"475994cd586d34e4","name":"","field":"payload1","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload}} !","output":"str","x":330,"y":370,"wires":[["57de3798762d996e"]]},{"id":"fc70b095b429b002","type":"ui_text","z":"475994cd586d34e4","group":"78cc4be7d68b8793","order":12,"width":"6","height":"1","name":"","label":"","format":"<pre>{{msg.payload}}</pre>","layout":"row-center","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":670,"y":370,"wires":[]},{"id":"78cc4be7d68b8793","type":"ui_group","name":"HEADER","tab":"d90e028674af84a9","order":1,"disp":false,"width":"44","collapse":false,"className":""},{"id":"d90e028674af84a9","type":"ui_tab","name":"LIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

![on-off](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/68cdddeab7bf257e14c902b8d4bf71c8b6f8415f.gif)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 May 2024 11:47 UTC](https://discourse.nodered.org/t/change-the-color-of-text-in-text-pallete/87194/11 "2024-05-18T11:47:41Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.