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

[jagades]

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:

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

</style>

[E1cid]

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

[{"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.

[jbudd]

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?

[jagades]

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

[jbudd]

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?

[jagades]

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.

[jbudd]

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.