# Background Color of Template Node

**URL:** <https://discourse.nodered.org/t/background-color-of-template-node/32580>\
**Category:** Dashboard\
**Created:** [8 September 2020 06:31 UTC](https://discourse.nodered.org/t/background-color-of-template-node/32580 "2020-09-08T06:31:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [8 September 2020 06:31 UTC](https://discourse.nodered.org/t/background-color-of-template-node/32580/1 "2020-09-08T06:31:57Z")

</div>

Hello,

i try to figure out a way to color a bigger area then font, depend on a value from the payload.  
It should be big enough to be good visible but small enough to get around 20 of that elements on one screen.

I would like to use the template node (because i want to display values too)and i found this example:  
 ![Color template test](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e5480f69362b9a7158fec62bb5574aa80bfab0d8.png)

```auto
[{"id":"3a091a75.e96216","type":"inject","z":"af61c022.bc96e","name":"","topic":"","payload":"2","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1880,"y":4920,"wires":[["9b202669.dcf608"]]},{"id":"9b202669.dcf608","type":"ui_template","z":"af61c022.bc96e","group":"302b3ed2.70cd92","name":"","order":0,"width":0,"height":0,"format":"<div layout=\"row\" layout-align=\"space-between\">\n <p>The number is</p>\n <p ng-style=\"{color: (msg.payload || 0) % 2 === 0 ? 'green' : 'red'}\">\n {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}\n </p>\n <p ng-style=\"{background-color: (msg.payload || 0) % 2 === 0 'green' : 'red'}\"></p>\n</div> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":2160,"y":4950,"wires":[[]]},{"id":"e41195ab.c3fdc8","type":"inject","z":"af61c022.bc96e","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1880,"y":4950,"wires":[["9b202669.dcf608"]]},{"id":"302b3ed2.70cd92","type":"ui_group","z":"","name":"Test","tab":"bd46e734.e55c08","order":2,"disp":true,"width":"6","collapse":false},{"id":"bd46e734.e55c08","type":"ui_tab","z":"","name":"Ausfälle","icon":"dashboard","order":12,"disabled":false,"hidden":false}]

```

But my attempt to color the background doesnt work:

```auto
<div layout="row" layout-align="space-between">
  <p ng-style="{background-color: (msg.payload.color) === 1 'green' : 'red'}"></p>
</div> 

```

Maybe someone could help me with that, based on what i did or something new with an explanation 🙂  
I am not good in CSS...

Greetings  
Chorum

---

<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:** [8 October 2020 06:32 UTC](https://discourse.nodered.org/t/background-color-of-template-node/32580/2 "2020-10-08T06:32:01Z")

</div>

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