# 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:** 1\
**Showing post:** 6

<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)

---

_[View the full topic](https://discourse.nodered.org/t/ui-text-background-color-change/55804)._