Text node background color

[juntiedt]

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

[{"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}]

[jbudd]

Are you also using dashboard v 3 or higher?

[juntiedt]

[jbudd]

This is what it looks like for me

What do you get, what should it do?

[juntiedt]

it should do what you posted.
mine looks like this

[juntiedt]

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

[juntiedt]

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

[juntiedt]

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?

[jbudd]

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

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.

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.

[juntiedt]

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

[jbudd]

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

[juntiedt]

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?

[jbudd]

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

[juntiedt]

great! Thanks!
all problems solved

[fritserasmus]

Can I update from GUI?

[fritserasmus]

v1.0.6
SORRY