UI-TEXT - Dynamic color for value

[va2px]

UI-TEXT - Dynamic color for value

[hotNipi]

The <font> tag is deprecated.
https://www.w3schools.com/tags/tag_font.asp

[va2px]

It appears the only thing that works for now is to apply a style. That affect both the label and the value.

[hotNipi]

Not the only way. You can add CSS class to widget and make that widget having different colors for label and value

.my-colored-text-widget label{ color:greenyellow; } .my-colored-text-widget span{ color:whitesmoke; }

[va2px]

Well, I am gonna need a crash course on CSS class.

[hotNipi]

On top of that, you can add css classes dynamically using msg.class

Her's the example:
[{"id":"b607d1be694f207f","type":"ui-text","z":"4eb808f5e19fb7e2","group":"46aafe434565ad2c","order":13,"width":"3","height":"1","name":"","label":"I'm label","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":"20","color":"#8c27a0","className":"","x":440,"y":1760,"wires":[]},{"id":"8eed72a47437bd32","type":"inject","z":"4eb808f5e19fb7e2","name":"label green & text red","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"class","v":"my-colored-text-widget label-green text-red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Text is red, Label is green","payloadType":"str","x":200,"y":1700,"wires":[["b607d1be694f207f"]]},{"id":"626c042436c32dab","type":"inject","z":"4eb808f5e19fb7e2","name":"text red","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"class","v":"my-colored-text-widget text-red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Text is red","payloadType":"str","x":250,"y":1740,"wires":[["b607d1be694f207f"]]},{"id":"f07702fbf8436d12","type":"inject","z":"4eb808f5e19fb7e2","name":"label green","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"class","v":"my-colored-text-widget label-green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Label is green","payloadType":"str","x":240,"y":1820,"wires":[["b607d1be694f207f"]]},{"id":"fdb37f42b4b741d0","type":"inject","z":"4eb808f5e19fb7e2","name":"text orange","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"class","v":"my-colored-text-widget text-orange","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Text is orange","payloadType":"str","x":240,"y":1780,"wires":[["b607d1be694f207f"]]},{"id":"d703e5e7c25f23ba","type":"ui-template","z":"4eb808f5e19fb7e2","group":"","page":"","ui":"da26eafa8eb48ab3","name":"Dasboard 2.0 CSS","order":0,"width":0,"height":0,"head":"","format":".my-colored-text-widget.label-green label{\n color:greenyellow;\n}\n.my-colored-text-widget.text-red span{\n color:rgb(255, 0, 0);\n}\n.my-colored-text-widget.text-orange span{\n color:rgb(255, 145, 0);\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":170,"y":1660,"wires":[[]]},{"id":"46aafe434565ad2c","type":"ui-group","name":"Regular Layout","page":"19eb6d108e9275e2","width":"6","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"da26eafa8eb48ab3","type":"ui-base","name":"Board","path":"/dashboard"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"da26eafa8eb48ab3","path":"/examples","icon":"","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#5c5c5c","primary":"#0094ce","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[va2px]

Now I get it.

Thanks for the help.