UI-TEXT - Dynamic color for value

[va2px]

Description

This is a feature I use in the old dashboard. Wasn't able to acheive it with th V2 dashboard. It would be great to add this feature on a future release.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

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

[riprock67]

Thanks hotNipi! Just figured this out. Duh!

Just an edit - I was really confused by this, to the point of banging my head on my desk. As usual, this was me being an idiot. After placing the text above in every imaginable widget as a container, it suddenly hit me that I was supposed to import it. Sorry for briefly venting my frustration on this excellent resource - including hotNipi's amazing skills.