# Text node background color

**URL:** <https://discourse.nodered.org/t/text-node-background-color/74408>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [30 January 2023 12:11 UTC](https://discourse.nodered.org/t/text-node-background-color/74408 "2023-01-30T12:11:54Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [30 January 2023 12:11 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/1 "2023-01-30T12:11:54Z")

</div>

I found this small demo in the forum which should do exactly what I want but it does not work. Why?  
I am using node-red 3.0.2

```auto
[{"id":"26de8ce4b7e73190","type":"ui_template","z":"183f3ef7cdd2acd5","group":"a6e358b.672ffa8","name":"Custom Styling","order":1,"width":"0","height":"0","format":"<style>\n.nr-dashboard-text.red{\n background-color: red;\n}\n.nr-dashboard-text.orange{\n background-color: orange;\n}\n.nr-dashboard-text.green{\n background-color: green;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":740,"y":560,"wires":[[]]},{"id":"701d519d3f6c7dca","type":"ui_text","z":"183f3ef7cdd2acd5","group":"a6e358b.672ffa8","order":2,"width":0,"height":0,"name":"","label":"text1","format":"{{msg.payload}}","layout":"row-center","className":"green","x":710,"y":600,"wires":[]},{"id":"936431fbab9f6830","type":"ui_text","z":"183f3ef7cdd2acd5","group":"a6e358b.672ffa8","order":4,"width":0,"height":0,"name":"","label":"text3","format":"{{msg.payload}}","layout":"row-center","className":"orange","x":710,"y":680,"wires":[]},{"id":"27654f127c807fdf","type":"ui_text","z":"183f3ef7cdd2acd5","group":"a6e358b.672ffa8","order":3,"width":0,"height":0,"name":"","label":"text2","format":"{{msg.payload}}","layout":"row-center","className":"red","x":710,"y":640,"wires":[]},{"id":"4612869e42e9214b","type":"inject","z":"183f3ef7cdd2acd5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":490,"y":640,"wires":[["27654f127c807fdf","701d519d3f6c7dca","936431fbab9f6830"]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<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:** [30 January 2023 12:17 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/2 "2023-01-30T12:17:47Z")

</div>

Are you also using dashboard v 3 or higher?

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [30 January 2023 12:23 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/3 "2023-01-30T12:23:51Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/95c8c40b9ff64171ec5a1e027886203cc581a5e6.png)

---

<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:** [30 January 2023 13:01 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/4 "2023-01-30T13:01:48Z")

</div>

This is what it looks like for me  
 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3a1e0db9ee67727352197aa3d36135a9606f1e58.jpeg)  
What do you get, what should it do?

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [30 January 2023 13:44 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/5 "2023-01-30T13:44:56Z")

</div>

it should do what you posted.  
mine looks like this ☹

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e336c381368966ae1a6bd93a06e327fac381bf49.png)

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [30 January 2023 13:55 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/6 "2023-01-30T13:55:40Z")

</div>

I just tried it on another RPI and it works.  
What is the difference?

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [30 January 2023 16:36 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/7 "2023-01-30T16:36:28Z")

</div>

what I want to achive, is to change shortly the background color when a value changes in kind of a spreadsheet with 5 rows and 4 columns. Shortly red (300ms) and then back to standard background.  
any help appreciated...

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [1 February 2023 12:30 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/8 "2023-02-01T12:30:10Z")

</div>

sorry for comming back to you.  
As I said, on one RPI it works on on the other it does not.  
I completly reinstalled my RPI new os, new node-red, copied your example and it does not work.  
Any idea what the problem could be?

---

<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 February 2023 12:54 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/9 "2023-02-01T12:54:39Z")

</div>

When I use a ui-template to define CSS, I usually put it as a _widget in a group_ on that tab, which makes it's scope all groups on that tab.

However, others wiser than me have pointed out that CSS really belongs _in the site head section_

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9bc5d594947cfa7040cd9e30638e01c465259545.jpeg)

Try it like that.

If that's no good, try changing the styling to  
`background-color: red !important;`

Use your browser inspector to look at the code. On Firefox, f12 opens it but all browsers have the equivalent.

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f65692011bac3e1371a4b6823ebb4de33f22e61e.jpeg)

1. Does the md-card element have the custom class "red"?
2. Does the styling of the element show up?
3. Note that overridden styles are greyed out and strikethrough.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [1 February 2023 14:11 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/10 "2023-02-01T14:11:06Z")

</div>

now it works,  
added important and checked template type and now it works!  
Many thanks 🙂 👍

---

<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 February 2023 14:13 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/11 "2023-02-01T14:13:49Z")

</div>

Hmm I think that needing !important often indicates a too-vague CSS selector.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [1 February 2023 15:10 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/12 "2023-02-01T15:10:33Z")

</div>

one additional questions:  
if I want ot change the background color only for a short moment and then back to the previous background I need to know the previous background.  
How can I read the previous background value of a text field into a variable?

---

<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 February 2023 15:17 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/13 "2023-02-01T15:17:50Z")

</div>

Send a message with msg.className = "red"  
After a moment send msg.className = "thisClassHasNoCSS" so it reverts to default colour.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [1 February 2023 15:54 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/14 "2023-02-01T15:54:30Z")

</div>

great! Thanks!  
all problems solved 👍

---

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [23 February 2023 12:05 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/15 "2023-02-23T12:05:24Z")

</div>

Can I update from GUI?

---

<div class="post-metadata">

**Author:** ![fritserasmus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fritserasmus/32/274_2.png) [@fritserasmus](https://discourse.nodered.org/u/fritserasmus)\
**Post date:** [23 February 2023 12:06 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/16 "2023-02-23T12:06:01Z")

</div>

v1.0.6  
SORRY

---

<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:** [25 March 2023 12:06 UTC](https://discourse.nodered.org/t/text-node-background-color/74408/17 "2023-03-25T12:06:55Z")

</div>

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