# UI Text background color change

**URL:** <https://discourse.nodered.org/t/ui-text-background-color-change/55804>\
**Category:** General\
**Created:** [28 December 2021 19:26 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804 "2021-12-28T19:26:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![traderjoe](https://avatars.discourse-cdn.com/v4/letter/t/f9ae1b/32.png) [@traderjoe](https://discourse.nodered.org/u/traderjoe)\
**Post date:** [28 December 2021 19:26 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/1 "2021-12-28T19:26:12Z")

</div>

I'm trying to change the background color of the UI text. I'm trying to do something like this:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dceff8754c50e81adeb62487e067f62532690563.png)

I like the way this looks because it adds a lot more color to an otherwise dull dashboard.

The original dashboard looks like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2b732e90339b6e4da1e1eb6d4305fadc62f26ac.png)

It's just a UI LED. So I was wondering if I can do something like how I had it in grafana (background change, and text change). I can get the text to change according to payload. But I can't get the color to change. I'm close though.

This is what I have.

```auto
[{"id":"88cc44ecd75d32d5","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"run","payloadType":"str","x":450,"y":2420,"wires":[["fb434105336b6e0f","75310dfb98b04d4a"]]},{"id":"f8a61b270b60dbe0","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"standby","payloadType":"str","x":460,"y":2480,"wires":[["fb434105336b6e0f","75310dfb98b04d4a"]]},{"id":"75310dfb98b04d4a","type":"ui_text","z":"368e5e5ea9463c23","group":"3339ea67ba4a96c0","order":1,"width":0,"height":0,"name":"","label":"status","format":"<font size = 4>{{msg.payload}}","layout":"row-spread","className":"","x":650,"y":2480,"wires":[]},{"id":"fb434105336b6e0f","type":"ui_template","z":"368e5e5ea9463c23","group":"3339ea67ba4a96c0","name":"group","order":1,"width":0,"height":0,"format":"<div id=\"{{'my_'+$id}}\" >template name?</div>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var c = msg.payload > \"run\" ? \"green\" : \"red\"\n $(\"#my_\"+scope.$id).closest(\".nr-dashboard-cardcontainer\").css(\"background-color\",c);\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":650,"y":2440,"wires":[[]]},{"id":"a7cb29a6654c77fb","type":"ui_template","z":"368e5e5ea9463c23","group":"fc08b77d.62707","name":"CSS","order":2,"width":0,"height":0,"format":"<style id=\"dash-styles\">\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background-color: #33333300;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":2400,"wires":[[]]},{"id":"3339ea67ba4a96c0","type":"ui_group","name":"Test Table","tab":"7353d1a6.00acc","order":2,"disp":true,"width":14,"collapse":false,"className":""},{"id":"fc08b77d.62707","type":"ui_group","name":"TEST","tab":"826dc63e.367f48","order":1,"disp":false,"width":"6","collapse":false},{"id":"7353d1a6.00acc","type":"ui_tab","name":"Sandbox","icon":"dashboard","order":9,"disabled":false,"hidden":false},{"id":"826dc63e.367f48","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

it's close.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d7a16516c3253906f2ca06c2e1a6db0f1fbda980.png)

But this section in the red box is so big. I can remove that template name but it's the fact that I need the template there that creates that big space.

I don't want to use the embedded grafana element because that status panel is supposed to be a live update. I tried a 1sec refresh time, and it crashes the element. 5s seeems to work fine, but I feel that lag will not be appealing. Thoughts on this? I'm trying to recreate that grafana panel in node red.

---

<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:** [28 December 2021 21:51 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/2 "2021-12-28T21:51:02Z")

</div>

You can use a custom class to style your chosen text widget. Here the middle widget has class "red".  
For me the template node does not occupy any space if it's size is auto.

 ![Untitled 3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf4672295ebd4996e241d57a2fd30a60419a6878.jpeg)

```auto
[{"id":"26de8ce4b7e73190","type":"ui_template","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","name":"","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n background-color: red;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":160,"wires":[[]]},{"id":"a7a739d8a99e44b2","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":2,"width":0,"height":0,"name":"","label":"text1","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":100,"wires":[]},{"id":"346f35253f5834d6","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":4,"width":0,"height":0,"name":"","label":"text3","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":180,"wires":[]},{"id":"85dc36c81c77bbd5","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":3,"width":0,"height":0,"name":"","label":"text2","format":"{{msg.payload}}","layout":"row-spread","className":"red","x":550,"y":140,"wires":[]},{"id":"e3a91bd2e6e5bf9a","type":"inject","z":"a531e868a7ed264e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":270,"y":120,"wires":[["85dc36c81c77bbd5","a7a739d8a99e44b2","346f35253f5834d6"]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![traderjoe](https://avatars.discourse-cdn.com/v4/letter/t/f9ae1b/32.png) [@traderjoe](https://discourse.nodered.org/u/traderjoe)\
**Post date:** [29 December 2021 14:34 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/3 "2021-12-29T14:34:07Z")

</div>

Neat! So in your example, how do I get your middle widget to change colors? Let's say a payload comes in, if true then green, if false, then red.

---

<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:** [29 December 2021 14:46 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/4 "2021-12-29T14:46:09Z")

</div>

Send msg.className = "green"

And to get the default colouring, msg.className = "thereisnocssforthisclass"

---

<div class="post-metadata">

**Author:** ![traderjoe](https://avatars.discourse-cdn.com/v4/letter/t/f9ae1b/32.png) [@traderjoe](https://discourse.nodered.org/u/traderjoe)\
**Post date:** [29 December 2021 15:05 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/5 "2021-12-29T15:05:19Z")

</div>

Oh, I think I got it.  
You mean something like this?

```auto
[{"id":"26de8ce4b7e73190","type":"ui_template","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","name":"","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.green{\n background-color: green;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":3380,"wires":[[]]},{"id":"a7a739d8a99e44b2","type":"ui_text","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","order":2,"width":0,"height":0,"name":"","label":"text1","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":3300,"wires":[]},{"id":"346f35253f5834d6","type":"ui_text","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","order":4,"width":0,"height":0,"name":"","label":"text3","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":3380,"wires":[]},{"id":"85dc36c81c77bbd5","type":"ui_text","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","order":3,"width":0,"height":0,"name":"","label":"text2","format":"{{msg.payload}}","layout":"row-spread","className":"green","x":550,"y":3340,"wires":[]},{"id":"e3a91bd2e6e5bf9a","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":270,"y":3320,"wires":[["85dc36c81c77bbd5","a7a739d8a99e44b2","346f35253f5834d6"]]},{"id":"114381b6615d91c7","type":"ui_template","z":"368e5e5ea9463c23","group":"87daf6bf91ebce67","name":"","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n background-color: red;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":3460,"wires":[[]]},{"id":"a3c81da03e8cee73","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":3380,"wires":[["26de8ce4b7e73190"]]},{"id":"66009def1c2a7f53","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":3460,"wires":[["114381b6615d91c7"]]},{"id":"9a7b39dcd6868375","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"className","v":"green","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":350,"y":3560,"wires":[["346f35253f5834d6"]]},{"id":"b0da0c37c817de97","type":"inject","z":"368e5e5ea9463c23","name":"","props":[{"p":"className","v":"red","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":350,"y":3620,"wires":[["346f35253f5834d6"]]},{"id":"87daf6bf91ebce67","type":"ui_group","name":"TEST BOX","tab":"7353d1a6.00acc","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"7353d1a6.00acc","type":"ui_tab","name":"Sandbox","icon":"dashboard","order":9,"disabled":false,"hidden":false}]

```

Thanks!

---

<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:** [29 December 2021 15:41 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/6 "2021-12-29T15:41:02Z")

</div>

Or like this

```auto
[{"id":"26de8ce4b7e73190","type":"ui_template","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","name":"Custom Styling","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n background-color: red;\n}\n.nr-dashboard-text.orange{\n background-color: orange;\n}\n.nr-dashboard-text.green{\n background-color: green;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":860,"y":80,"wires":[[]]},{"id":"346f35253f5834d6","type":"ui_text","z":"a531e868a7ed264e","group":"a6e358b.672ffa8","order":4,"width":0,"height":0,"name":"","label":"Reactor temperature","format":"{{msg.payload}} {{msg.status}}","layout":"row-spread","className":"","x":880,"y":120,"wires":[]},{"id":"f9f9ee8b0cdaaae7","type":"ui_slider","z":"a531e868a7ed264e","name":"","label":"slider","tooltip":"","group":"a6e358b.672ffa8","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"200","max":"1000","step":"10","className":"","x":390,"y":120,"wires":[["316a5f7bc9fe81a5"]]},{"id":"316a5f7bc9fe81a5","type":"switch","z":"a531e868a7ed264e","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"400","vt":"str"},{"t":"btwn","v":"400","vt":"num","v2":"600","v2t":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":510,"y":120,"wires":[["3918f204d3848a09"],["6e8724876c535941"],["a14e405b29f537e8"]]},{"id":"3918f204d3848a09","type":"change","z":"a531e868a7ed264e","name":"Green","rules":[{"t":"set","p":"className","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"status","pt":"msg","to":"Normal","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":80,"wires":[["346f35253f5834d6"]]},{"id":"6e8724876c535941","type":"change","z":"a531e868a7ed264e","name":"Orange","rules":[{"t":"set","p":"className","pt":"msg","to":"orange","tot":"str"},{"t":"set","p":"status","pt":"msg","to":"Warning","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":120,"wires":[["346f35253f5834d6"]]},{"id":"a14e405b29f537e8","type":"change","z":"a531e868a7ed264e","name":"Red","rules":[{"t":"set","p":"className","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"status","pt":"msg","to":"Meltdown!","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":160,"wires":[["346f35253f5834d6"]]},{"id":"a818b7f630689b87","type":"inject","z":"a531e868a7ed264e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"200","payloadType":"num","x":270,"y":120,"wires":[["f9f9ee8b0cdaaae7"]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29c28aad009d73b3940010cd7613a71d4d7fa3a7.jpeg)  
 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7af9c30a61a35820f4c453baf5b8f15417c09f94.jpeg)

---

<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:** [12 January 2022 15:41 UTC](https://discourse.nodered.org/t/ui-text-background-color-change/55804/7 "2022-01-12T15:41:41Z")

</div>

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