Dashboard - set background color of text node

[RogierQ]

I want to make the background color of a text node dynamic.
I think the question is not the first time but i cannot find the right answer on how to do it.

What i have now works great:
{{msg.payload}}

But i also want to include the background color
Tried a lot with background-color= and so on but without result.
Also saw that it should be possible with a template node but thats more complicated

Thanks

[TotallyInformation]

I don't think you can do that with a standard text node. You can certainly do it with a Dashboard template node.

Here is an example of showing a button (one of my wireless controllable switches). It shows you how to use data with CSS, you can use ng-style as well if you want to use data to switch between styles instead of in-line CSS. Your text should be a lot simpler than this.

<md-button
        style="color: white !important"
        ng-class="msg.payload=='On' ? 'md-accent md-raised md-hue-2 jk-boldwhite' : 'md-primary md-hue-3 jk-boldblack'"
        ng-click="msg.payload = (msg.payload=='On' ? 'Off' : 'On');send(msg);"
        ng-attr-title="Click to turn {{msg.payload=='On' ? 'Off' : 'On'}}"
    >
    {{msg.name}} &nbsp;::&nbsp; 
    {{msg.payload?msg.payload:'Unknown Status'}}
</md-button>

[Andrei]

@RogierQ

make the background color of a text node dynamic.

I don´t know what you mean by "dynamic". If you want to change the text color based on a msg property (that you can change dynamically) then flow below will do the trick. You can even change the color of the label.

[{"id":"e0f0c459.bbf218","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"976557a0.10d4d8","type":"ui_text","z":"e0f0c459.bbf218","group":"9e2bac96.b321b","order":0,"width":"6","height":"1","name":"Colored text","label":"<font color= {{msg.strongcolor}} > Display </font>","format":"<font color= {{msg.color}} > {{msg.payload}} </font>","layout":"row-spread","x":590,"y":140,"wires":[]},{"id":"c6bcdbe4.6822b8","type":"inject","z":"e0f0c459.bbf218","name":"","topic":"","payload":"Your payload","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":210,"y":140,"wires":[["94c95548.2b6ae8"]]},{"id":"94c95548.2b6ae8","type":"change","z":"e0f0c459.bbf218","name":"Set colors","rules":[{"t":"set","p":"color","pt":"msg","to":"lime","tot":"str"},{"t":"set","p":"strongcolor","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":140,"wires":[["976557a0.10d4d8"]]},{"id":"9e2bac96.b321b","type":"ui_group","z":"","name":"S1","tab":"62712bbf.888b94","disp":false,"width":"6","collapse":false},{"id":"62712bbf.888b94","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

[TotallyInformation]

Argh! I new I was missing something obvious. Good call. My only excuse is that I don't do much with Dashboard any more.

[dceejay]

You can't (easily) set the overall background colour of a text widget as that is part of the overall theme of the dashboard. Also what part would the background mean anyway... as the payload element is just the small area around the text - likewise the label element. The widget background could possibly be targeted by custom CSS via a template - but then, as already noted, you may as well use the template for the whole widget.

@Andrei 's answer above is the simplest approach for a dynamic colour change in the text widget.

[terra16]

Continuing the discussion from Dashboard - set background color of text node:

Hello

I just read your explanation how to change the font color of a widget and how you said it would be possible to change the widget background color with an ui_template and CSS.

I already made a group background change but i am not able to do it with a widget.
Could please anyone tell me how i have to "address" a spesific widget like i did with the group "#Cockbit_LED" in my example picture?

Thanks for advices...