# Created color box in dashboard

**URL:** <https://discourse.nodered.org/t/created-color-box-in-dashboard/10741>\
**Category:** Dashboard\
**Created:** [2 May 2019 08:28 UTC](https://discourse.nodered.org/t/created-color-box-in-dashboard/10741 "2019-05-02T08:28:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kwonsoyeong](https://avatars.discourse-cdn.com/v4/letter/k/b3f665/32.png) [@Kwonsoyeong](https://discourse.nodered.org/u/Kwonsoyeong)\
**Post date:** [2 May 2019 08:28 UTC](https://discourse.nodered.org/t/created-color-box-in-dashboard/10741/1 "2019-05-02T08:28:09Z")

</div>

I want to choice box color in dashboard.

```auto
<div style="background-color: red; padding: 10px; margin: 0 auto; width:10px;">
</div>

```

This is my template.  
I want to change background-color red to green.  
When I got a data, I want to flexible to change red to green.  
I used switch, but two color box in my dashboard.  
Help me please.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [2 May 2019 09:09 UTC](https://discourse.nodered.org/t/created-color-box-in-dashboard/10741/2 "2019-05-02T09:09:24Z")

</div>

read the info panel for ui\_template.

```auto
For example:

<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>

```