# Dashboard template node - CSS style does not work

**URL:** https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375
**Category:** Dashboard
**Created:** [1 December 2018 13:08 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375 "2018-12-01T13:08:10Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![mrkbr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrkbr/32/4156_2.png) [@mrkbr](https://discourse.nodered.org/u/mrkbr)
#### Post date: [1 December 2018 13:08 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/1 "2018-12-01T13:08:10Z")

</div>

I'm quite new to Node-RED, and I'm not a web developer, I have just basic knowledge of HTML/CSS/JavaScript.

I'm trying to write my own HTML/CSS code in a dashboard template node, if the HTML part is ok, CSS styling simply does not apply!

Even the basic example of the template node does not work, I paste it here just for sake of clarity

```
<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <p ng-style="{color: (msg.payload || 0) % 2 === 0 ? 'green' : 'red'}">
    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </p>
</div> 

```

Adding this to the dashboard and connecting an inject node in front of it, when injecting timestamps the text color is always white, am I doing something wrong?

Thanks

---

<div class="post-metadata">

### Author: ![mrkbr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrkbr/32/4156_2.png) [@mrkbr](https://discourse.nodered.org/u/mrkbr)
#### Post date: [1 December 2018 14:18 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/2 "2018-12-01T14:18:50Z")

</div>

Just to clarify, here is how the test flow and its dashboard output look

 ![38|709×198](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cf2998038d823f23cfcf80469cb7fe0d1d979416.png)  
as you can see, the "even" text is white, and not green as the CSS style asks

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [1 December 2018 14:36 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/3 "2018-12-01T14:36:15Z")

</div>

And what value are you sending to the node?

---

<div class="post-metadata">

### Author: ![mrkbr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrkbr/32/4156_2.png) [@mrkbr](https://discourse.nodered.org/u/mrkbr)
#### Post date: [1 December 2018 14:41 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/4 "2018-12-01T14:41:21Z")

</div>

Timestamps, each time I manually inject, the text in the dashboard becomes "even" or "odd" accordingly to the current timestamp.

---

<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: [1 December 2018 15:44 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/5 "2018-12-01T15:44:43Z")

</div>

Try this. Go to the dashboard configuration panel. Select the option: angular theme in UI template

 ![dashboard](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e6caf1a411292cd6f6a72df6215f4fd613610943.gif)

---

<div class="post-metadata">

### Author: ![mrkbr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrkbr/32/4156_2.png) [@mrkbr](https://discourse.nodered.org/u/mrkbr)
#### Post date: [1 December 2018 17:00 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/6 "2018-12-01T17:00:16Z")

</div>

That worked! I would never have been able to solve without your help, thanks!

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [1 December 2018 23:07 UTC](https://discourse.nodered.org/t/dashboard-template-node-css-style-does-not-work/5375/7 "2018-12-01T23:07:52Z")

</div>

Thanks for spotting this - I will fix the example to work again.

```
<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}">
      {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </font>
</div>
```