# Dashboard - set background color of text node

**URL:** <https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357>\
**Category:** FAQs\
**Created:** [22 September 2018 08:06 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357 "2018-09-22T08:06:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [22 September 2018 08:06 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/1 "2018-09-22T08:06:27Z")

</div>

I want to make the background color of a text node dynamic.  
I think the question is not the first time but i cannot find the right answer on how to do it.

What i have now works great:  
 {{msg.payload}}

But i also want to include the background color  
Tried a lot with background-color= and so on but without result.  
Also saw that it should be possible with a template node but thats more complicated

Thanks

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 September 2018 12:44 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/2 "2018-09-22T12:44:16Z")

</div>

I don't think you can do that with a standard text node. You can certainly do it with a Dashboard template node.

Here is an example of showing a button (one of my wireless controllable switches). It shows you how to use data with CSS, you can use `ng-style` as well if you want to use data to switch between styles instead of in-line CSS. Your text should be a lot simpler than this.

```auto
<md-button
        style="color: white !important"
        ng-class="msg.payload=='On' ? 'md-accent md-raised md-hue-2 jk-boldwhite' : 'md-primary md-hue-3 jk-boldblack'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        ng-attr-title="Click to turn {{msg.payload=='On' ? 'Off' : 'On'}}"
    >
    {{msg.name}} &nbsp;::&nbsp; 
    {{msg.payload?msg.payload:'Unknown Status'}}
</md-button>

```

---

<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:** [22 September 2018 13:49 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/3 "2018-09-22T13:49:59Z")

</div>

> [@RogierQ](#):
>
> make the background color of a text node dynamic.

I don´t know what you mean by "dynamic". If you want to change the text color based on a msg property (that you can change dynamically) then flow below will do the trick. You can even change the color of the label.

```auto
[{"id":"e0f0c459.bbf218","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"976557a0.10d4d8","type":"ui_text","z":"e0f0c459.bbf218","group":"9e2bac96.b321b","order":0,"width":"6","height":"1","name":"Colored text","label":"<font color= {{msg.strongcolor}} > Display </font>","format":"<font color= {{msg.color}} > {{msg.payload}} </font>","layout":"row-spread","x":590,"y":140,"wires":[]},{"id":"c6bcdbe4.6822b8","type":"inject","z":"e0f0c459.bbf218","name":"","topic":"","payload":"Your payload","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":210,"y":140,"wires":[["94c95548.2b6ae8"]]},{"id":"94c95548.2b6ae8","type":"change","z":"e0f0c459.bbf218","name":"Set colors","rules":[{"t":"set","p":"color","pt":"msg","to":"lime","tot":"str"},{"t":"set","p":"strongcolor","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":140,"wires":[["976557a0.10d4d8"]]},{"id":"9e2bac96.b321b","type":"ui_group","z":"","name":"S1","tab":"62712bbf.888b94","disp":false,"width":"6","collapse":false},{"id":"62712bbf.888b94","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```

![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/91e79fce8ac1eb13bc3194403a7b51f31baa35ea.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 September 2018 14:56 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/4 "2018-09-22T14:56:31Z")

</div>

Argh! I new I was missing something obvious. Good call. My only excuse is that I don't do much with Dashboard any more.

---

<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:** [23 September 2018 13:04 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/5 "2018-09-23T13:04:58Z")

</div>

You can't (easily) set the overall background colour of a text widget as that is part of the overall theme of the dashboard. Also what part would the background mean anyway... as the payload element is just the small area around the text - likewise the label element. The widget background could possibly be targeted by custom CSS via a template - but then, as already noted, you may as well use the template for the whole widget.

@Andrei 's answer above is the simplest approach for a dynamic colour change in the text widget.

---

<div class="post-metadata">

**Author:** ![terra16](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/terra16/32/17638_2.png) [@terra16](https://discourse.nodered.org/u/terra16)\
**Post date:** [3 November 2019 21:52 UTC](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/6 "2019-11-03T21:52:25Z")

</div>

Continuing the discussion from [Dashboard - set background color of text node](https://discourse.nodered.org/t/dashboard-set-background-color-of-text-node/3357/5):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7c654ef865bec7a065be1be5e533bc42e71ca646.png)

Hello

I just read your explanation how to change the font color of a widget and how you said it would be possible to change the widget background color with an ui\_template and CSS.

I already made a group background change but i am not able to do it with a widget.  
Could please anyone tell me how i have to "address" a spesific widget like i did with the group "#Cockbit\_LED" in my example picture?

Thanks for advices...