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:
[{"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:
<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
