# Trying to set template font color based on msg.payload value

**URL:** <https://discourse.nodered.org/t/trying-to-set-template-font-color-based-on-msg-payload-value/4781>\
**Category:** Dashboard\
**Created:** [12 November 2018 05:26 UTC](https://discourse.nodered.org/t/trying-to-set-template-font-color-based-on-msg-payload-value/4781 "2018-11-12T05:26:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [12 November 2018 05:26 UTC](https://discourse.nodered.org/t/trying-to-set-template-font-color-based-on-msg-payload-value/4781/1 "2018-11-12T05:26:05Z")

</div>

Hey guys,  
I'm trying to set a font color in dashboard based on a value received in msg.payload. I've got the following code in the template node, but not having any luck:

```
<div>Status:<b style="color:blue;" id="status">Update</b></div>

<script>

function color() {
    if (document.getElementById("status"}.value === 'Update')) {
    document.getElementById("status").setAttribute("style", "color:lime;");
    }
};

</script>
```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [12 November 2018 11:18 UTC](https://discourse.nodered.org/t/trying-to-set-template-font-color-based-on-msg-payload-value/4781/2 "2018-11-12T11:18:08Z")

</div>

> [@jmacle](#):
>
> set a font color in dashboard based on a value received in msg.payload

In such case it should be as easy as adding this line in an empty the UI template node:

```auto
<div>Status:<b style="color:{{msg.payload}};" id="status">Update</b></div>

```

Flow:

```auto
[{"id":"a7d9890f.f7b6b8","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"3783949f.17df5c","type":"ui_template","z":"a7d9890f.f7b6b8","group":"6c31812f.dc347","name":"","order":0,"width":0,"height":0,"format":"<div>Status:<b style=\"color:{{msg.payload}};\" id=\"status\">Update</b></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":380,"y":120,"wires":[[]]},{"id":"467cb421.afb8cc","type":"inject","z":"a7d9890f.f7b6b8","name":"","topic":"","payload":"blue","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":120,"wires":[["3783949f.17df5c"]]},{"id":"c1383201.f8bff","type":"inject","z":"a7d9890f.f7b6b8","name":"","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":180,"wires":[["3783949f.17df5c"]]},{"id":"6c31812f.dc347","type":"ui_group","z":"","name":"G1","tab":"2c679adf.6ce5a6","disp":true,"width":"6","collapse":false},{"id":"2c679adf.6ce5a6","type":"ui_tab","z":"","name":"TAB1","icon":"dashboard"}]

```