Background colour of ui_template

[sahsha]

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

2. the below solution requires to give node id
   Ui_text without background - #2 by Steve-Mcl

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.

[hotNipi]

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

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

[sahsha]

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

[hotNipi]

Then the ID solution should do the trick

[sahsha]

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

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

[Steve-Mcl]

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.

[hotNipi]

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

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

[sahsha]

Thanks @hotNipi this will work

@Steve-Mcl