# How to change ui-text background color?

**URL:** <https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854>\
**Category:** Dashboard\
**Created:** [6 December 2019 09:22 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854 "2019-12-06T09:22:17Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![midnight1979](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/midnight1979/32/14894_2.png) [@midnight1979](https://discourse.nodered.org/u/midnight1979)\
**Post date:** [6 December 2019 09:22 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/1 "2019-12-06T09:22:17Z")

</div>

Need to change backgound color of some ui-text nodes in my dashboard (not all of nodes of this type).  
How can i do this?

---

<div class="post-metadata">

**Author:** ![midnight1979](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/midnight1979/32/14894_2.png) [@midnight1979](https://discourse.nodered.org/u/midnight1979)\
**Post date:** [6 December 2019 09:32 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/2 "2019-12-06T09:32:21Z")

</div>

Maybe it can be registered like improvement - add additional fields (background-color, label-color, value-color) to ui-text node???

---

<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:** [6 December 2019 11:11 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/3 "2019-12-06T11:11:50Z")

</div>

That would then fight against the whole concept of themes

---

<div class="post-metadata">

**Author:** ![midnight1979](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/midnight1979/32/14894_2.png) [@midnight1979](https://discourse.nodered.org/u/midnight1979)\
**Post date:** [6 December 2019 11:53 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/4 "2019-12-06T11:53:32Z")

</div>

Maybe...  
I just want visually "split" dashboard to some areas/blocks vertically. I could use groups but I can, because groups can be arranged only horizontally.  
I want to use text node as a title of each block, that's why i want to highlight this titles by changing background color.  
I can't use CSS (in tamplate), because it change all text nodes on page...

EXAMPLE:  
before:

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

after:

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

---

<div class="post-metadata">

**Author:** ![midnight1979](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/midnight1979/32/14894_2.png) [@midnight1979](https://discourse.nodered.org/u/midnight1979)\
**Post date:** [6 December 2019 11:57 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/5 "2019-12-06T11:57:38Z")

</div>

and then... button node has such properties.  
Does this mean that this node is already at war with the theme-conception? 🙂

---

<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:** [6 December 2019 15:31 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/6 "2019-12-06T15:31:46Z")

</div>

Yes - there are some hideous looking button colours out there 🙂  
If it's just for a title then you could indeed use a button as title - you don't have to click on it. But I will have a look to see if there is an easy way to give you more hooks for CSS to grab onto.

As regards layout - the dashboard is meant as a starter for anyone to create a basic dashboard in a simple manner. If you need more complexity and complete control over layout then the node-red-contrib-uibuilder project allows you to build a dashboard using whatever framework you like.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 December 2019 16:05 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/7 "2019-12-06T16:05:39Z")

</div>

You can make your own tile text elements with `ui_template` node and colorize them as you like 🙂

```auto
[{"id":"8c68a6e3.088f18","type":"inject","z":"6d08d5ab.a8aa3c","name":"","topic":"","payload":"THIS IS RED","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":630,"wires":[["600bcfcd.2d43c"]]},{"id":"ef11ea8c.531b78","type":"inject","z":"6d08d5ab.a8aa3c","name":"","topic":"","payload":"THIS IS BLUE","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":580,"wires":[["f2a5f964.0f7a48"]]},{"id":"f2a5f964.0f7a48","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"d6060f19.2b834","name":"Title","order":2,"width":0,"height":0,"format":"\n<div class=\"blocktitle blue\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":590,"wires":[[]]},{"id":"97a44e83.edc12","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"d6060f19.2b834","name":"Title CSS","order":3,"width":0,"height":0,"format":"<style>\n .blocktitle{\n font-weight: bold;\n background-color: inherit;\n padding: 6px;\n text-align: center;\n }\n .blocktitle.blue{\n background-color: blue;\n \n }\n .blocktitle.red{\n background-color: red;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":430,"y":540,"wires":[[]]},{"id":"600bcfcd.2d43c","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"d6060f19.2b834","name":"Title","order":2,"width":0,"height":0,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":630,"wires":[[]]},{"id":"d6060f19.2b834","type":"ui_group","z":"","name":"Default","tab":"93443fe0.36117","disp":true,"width":"6","collapse":false},{"id":"93443fe0.36117","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![midnight1979](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/midnight1979/32/14894_2.png) [@midnight1979](https://discourse.nodered.org/u/midnight1979)\
**Post date:** [6 December 2019 17:32 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/8 "2019-12-06T17:32:50Z")

</div>

Of course i can! but if i'll go this way - the dashboard will not needed at all in the end 🙂  
from the other side - need more time to make own components (at the first proj. of course) instead of using standard nodes of dashboard...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 December 2019 17:45 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/9 "2019-12-06T17:45:17Z")

</div>

Well the `ui_template` node is standard node and ment just for those simple use cases where all other standard (or custom made dashboard nodes) do not reach your expectations.  
Creating your own custom dashboard widgets is quite of time consuming process, I can tell. 😃 And I think same goes to creating whole dashboard from scratch.  
It's the target you'll need to settle out. Even you need piece of art or functional thing. Well it may be somewhere in between of course so you may be forced the to do some compromise decisions. That's the way it is.

---

<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:** [6 December 2019 17:55 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/10 "2019-12-06T17:55:58Z")

</div>

If I make the CSS more targetable you could do this

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

by adding a style template like

```auto
<style>
    .nr-dashboard-widget-Test_text {
        background-color:red !important;
    }
</style>

```

(by using the label to help set the class...)

Any good ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 December 2019 18:00 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/11 "2019-12-06T18:00:20Z")

</div>

By adding background-color option to node's configuration?

---

<div class="post-metadata">

**Author:** ![midnight1979](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/midnight1979/32/14894_2.png) [@midnight1979](https://discourse.nodered.org/u/midnight1979)\
**Post date:** [6 December 2019 18:13 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/12 "2019-12-06T18:13:24Z")

</div>

Will be wonderful!  
It will very simple and convenient to use!

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [16 January 2022 14:26 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/14 "2022-01-16T14:26:24Z")

</div>

> [@dceejay](#):
>
> If I make the CSS more targetable

Apologies for reviving this old thread, but I could not find anything on whether this capability was implemented? What I am trying to do is have specific widgets have a different background color or text color and this seemed like a perfect solution.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 January 2022 14:48 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/15 "2022-01-16T14:48:52Z")

</div>

Is your Node-red up to date?  
You can now set a custom CSS class for widgets.  
See the help for dashboard widgets for details.

There are quite a few examples in the Dashboard section of the forum

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [16 January 2022 16:09 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/16 "2022-01-16T16:09:08Z")

</div>

> [@jbudd](#):
>
> Is your Node-red up to date?

Node-RED version is 1.3.3

> [@jbudd](#):
>
> You can now set a custom CSS class for widgets.

Thanks - I think the example given in this thread [ui\_text change color](https://discourse.nodered.org/t/ui-text-background-color-change/55804/6) may work. Is that what you meant?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 January 2022 16:18 UTC](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/17 "2022-01-16T16:18:48Z")

</div>

Yes. I think there are examples of both static and dynamic CSS overrides in that thread.