# How to add solid colour to text box in Node Red dashboard?

**URL:** <https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [31 March 2023 07:29 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106 "2023-03-31T07:29:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jagades](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jagades/32/75744_2.png) [@jagades](https://discourse.nodered.org/u/jagades)\
**Post date:** [31 March 2023 07:29 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/1 "2023-03-31T07:29:12Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9bbceba8207c720ec852f84179905c98d7ded444.png)  
Hi there. I want to add a solid colour to all of my text boxes in this dashboard. I have tried adding the colour command in the template but it's not giving any results. Looking forward for assistance.

Here's my template:

```auto
<style>
.num1 {
border: 2px solid #666;
background-color : #b0cff5
}

</style>

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [31 March 2023 07:55 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/2 "2023-03-31T07:55:49Z")

</div>

Each text box has a class `nr-dashboard-widget-{the_widget_label_with_underscores}` according to the docs, so target that.  
e.g.

```auto
[{"id":"b0326e8d8ea65cb7","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":150,"y":1240,"wires":[["a6335b40731d9e15"]]},{"id":"a6335b40731d9e15","type":"ui_text","z":"65617ffeb779f51c","group":"2d4fe667.28f8ba","order":20,"width":0,"height":0,"name":"","label":"Oven1","format":"{{msg.payload}}","layout":"row-spread","className":"","x":430,"y":1240,"wires":[]},{"id":"8720e803a030d636","type":"ui_template","z":"65617ffeb779f51c","group":"2d4fe667.28f8ba","name":"","order":21,"width":0,"height":0,"format":"<style>\n .nr-dashboard-widget-Oven1{\nborder: 2px solid #666;\nbackground-color : #b0cff5 !important;\n}\n </style>>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":280,"y":1180,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

You may need to add !important to override the dashboard theme colour.

---

<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:** [31 March 2023 08:41 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/3 "2023-03-31T08:41:28Z")

</div>

This seems to be a very similar question to your previous postttps://discourse.nodered.org/t/make-text-boxes-blink-in-red-green-depending-on-condition/75141/1.

What are you trying to do that's different?

---

<div class="post-metadata">

**Author:** ![jagades](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jagades/32/75744_2.png) [@jagades](https://discourse.nodered.org/u/jagades)\
**Post date:** [31 March 2023 08:57 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/4 "2023-03-31T08:57:35Z")

</div>

that application would work according to certain condition. For now, I want a solid colour without any blinking animation.

---

<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:** [31 March 2023 09:37 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/5 "2023-03-31T09:37:38Z")

</div>

Do you want all the boxes the same colour or each one possibly different?  
How many different colours could there be?  
Is the colour static or related to the temperature of that oven?

---

<div class="post-metadata">

**Author:** ![jagades](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jagades/32/75744_2.png) [@jagades](https://discourse.nodered.org/u/jagades)\
**Post date:** [1 April 2023 00:12 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/6 "2023-04-01T00:12:31Z")

</div>

there are four conditions for the oven cycle :--

1. Blinking green - Oven is running
2. Blinking yellow - Oven will stop operation in 15 minutes (going to finish cycle)
3. Blinking red - Oven has finished running. Cycle complete.
4. Static colour (light blue) - Oven is not in use.

---

<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:** [1 April 2023 01:08 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/7 "2023-04-01T01:08:20Z")

</div>

So you already have a way to set the background blinking red or green, by passing msg.className "red" or "green".

For static blue background send msg.className blue.

In the template CSS you need a new class .nr-dashboard-text.blue which specifies the background-color.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 April 2023 01:08 UTC](https://discourse.nodered.org/t/how-to-add-solid-colour-to-text-box-in-node-red-dashboard/77106/8 "2023-04-15T01:08:34Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.