# Background colour of ui\_template

**URL:** https://discourse.nodered.org/t/background-colour-of-ui-template/48084
**Category:** Dashboard
**Created:** [6 July 2021 12:50 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084 "2021-07-06T12:50:11Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![sahsha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sahsha/32/43845_2.png) [@sahsha](https://discourse.nodered.org/u/sahsha)
#### Post date: [6 July 2021 12:50 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/1 "2021-07-06T12:50:11Z")

</div>

I've been through some forum topics and have found

1. the below solution changes themes for all widgets  
[UI-Template - cant change background color of? - #4 by dceejay](https://discourse.nodered.org/t/ui-template-cant-change-background-color-of/17605/4)

2. the below solution requires to give node id  
[Ui\_text without background - #2 by Steve-Mcl](https://discourse.nodered.org/t/ui-text-without-background/47758/2)

Can anyone help where I can change background colour of ui\_template node without changing themes for all widgets and without need to mention node ids.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [6 July 2021 12:56 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/2 "2021-07-06T12:56:11Z")

</div>

That will affect all template nodes and all contrib-ui nodes

```auto
<style>
.nr-dashboard-theme .nr-dashboard-template {
    background-color: #aec3a2;
}
</style>

```

---

<div class="post-metadata">

### Author: ![sahsha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sahsha/32/43845_2.png) [@sahsha](https://discourse.nodered.org/u/sahsha)
#### Post date: [6 July 2021 12:59 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/3 "2021-07-06T12:59:31Z")

</div>

Isn't there a solution where I can change only one ui\_template's background colour?

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [6 July 2021 13:00 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/4 "2021-07-06T13:00:52Z")

</div>

Then the ID solution should do the trick

---

<div class="post-metadata">

### Author: ![sahsha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sahsha/32/43845_2.png) [@sahsha](https://discourse.nodered.org/u/sahsha)
#### Post date: [6 July 2021 13:04 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/5 "2021-07-06T13:04:48Z")

</div>

How can I make it change colour? check below flow.

```auto
[{"id":"3ae3ca82.d1f066","type":"inject","z":"ea354143.5448a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":120,"wires":[["a96a0969.541778"]]},{"id":"b93c7989.6c9328","type":"ui_template","z":"ea354143.5448a","group":"fdef6040.7c391","name":"test","order":1,"width":12,"height":3,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":550,"y":160,"wires":[[]]},{"id":"a96a0969.541778","type":"template","z":"ea354143.5448a","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<style>\n[node-id=\"b93c7989.6c9328\"] {\n background-color: green !important;\n}\n</style>\n\n<h3 style=\"color:white;\">\nMachine is in running mode\n</h3>\n","output":"str","x":360,"y":120,"wires":[["b93c7989.6c9328"]]},{"id":"8ed5355.6dc91c8","type":"inject","z":"ea354143.5448a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":160,"wires":[["2afffe47.7583a2"]]},{"id":"2afffe47.7583a2","type":"template","z":"ea354143.5448a","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<style>\n[node-id=\"b93c7989.6c9328\"] {\n background-color: orange !important;\n}\n</style>\n\n<h3 style=\"color:white;\">\nMachine is in idle mode\n</h3>\n","output":"str","x":360,"y":160,"wires":[["b93c7989.6c9328"]]},{"id":"9e6c1d79.5ed6b","type":"inject","z":"ea354143.5448a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":200,"wires":[["949cce40.8a515"]]},{"id":"949cce40.8a515","type":"template","z":"ea354143.5448a","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n[node-id=\"b93c7989.6c9328\"] {\n background-color: red !important;\n}\n</style>\n\n<h3 style=\"color:white;\">\nMachine is in stop mode\n</h3>\n","output":"str","x":360,"y":200,"wires":[["b93c7989.6c9328"]]},{"id":"fdef6040.7c391","type":"ui_group","name":"Group 1","tab":"df9f5de4.f3ee3","order":1,"disp":false,"width":"12","collapse":false},{"id":"df9f5de4.f3ee3","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [6 July 2021 13:20 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/6 "2021-07-06T13:20:14Z")

</div>

I have seen many threads over the years (several in the last week or two) where the user has worked around this using the threads you have already found.

I raised a PR with dashboard that permits you to add a class name to UI elements (groups and components) that I hope will greatly simplify all these situations, but it is still under review.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [6 July 2021 13:21 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/7 "2021-07-06T13:21:55Z")

</div>

Until simplifications not arrived, you can do something like this.

```auto
[{"id":"ad679f0d.ca4fe","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"","order":16,"width":0,"height":0,"format":"<div id=\"{{'my_'+$id}}\">Some text</div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n $(\"#my_\"+scope.$id).html(msg.payload);\n $(\"#my_\"+scope.$id).closest(\"md-card\").css(\"background\",msg.background)\n \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":340,"y":1860,"wires":[[]]},{"id":"1f833d09.5f5843","type":"inject","z":"407e1abc.6d1cb4","name":"","props":[{"p":"payload"},{"p":"background","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Text one","payloadType":"str","x":160,"y":1820,"wires":[["ad679f0d.ca4fe"]]},{"id":"b6c4ef1c.c474d","type":"inject","z":"407e1abc.6d1cb4","name":"","props":[{"p":"payload"},{"p":"background","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Text other","payloadType":"str","x":160,"y":1920,"wires":[["ad679f0d.ca4fe"]]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"6","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![sahsha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sahsha/32/43845_2.png) [@sahsha](https://discourse.nodered.org/u/sahsha)
#### Post date: [6 July 2021 17:49 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/8 "2021-07-06T17:49:42Z")

</div>

Thanks @hotNipi this will work 👍

@Steve-Mcl 🤞

---

<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: [5 August 2021 17:50 UTC](https://discourse.nodered.org/t/background-colour-of-ui-template/48084/9 "2021-08-05T17:50:30Z")

</div>

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