Really basic problem trying to set CSS for a text box in Dashboard 2

Dashboard
1

One text box, one CSS thingie, and I can't get the box or text to change color, somewhere I am really missing the boat, can anyone point out what I am missing

[{"id":"0e7ec42d35bd7059","type":"ui-text","z":"1ea15e8ec7c9f134","group":"fa99d9056d946d55","order":0,"width":"3","height":"1","name":"Time","label":"Time","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","className":"red","x":630,"y":140,"wires":[]},{"id":"fa99d9056d946d55","type":"ui-group","name":"Test","page":"1f6b2a55f32c0495","width":"3","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"1f6b2a55f32c0495","type":"ui-page","name":"Test","ui":"95707ac6476e0696","path":"/page4","icon":"home","layout":"grid","theme":"af27d8bd1af493a2","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"95707ac6476e0696","type":"ui-base","name":"home","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"af27d8bd1af493a2","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
2

One possible solution to manipulate ui_text colors can be found here UI-TEXT - Dynamic color for value · Issue #535 · FlowFuse/node-red-dashboard · GitHub

3

Ok, that got me way down the road, thanks.
If I may impose one more time, I use to be able to set the icons for the menu by using "fa fa-compass" for instance, that seems to not work now, could you provide the correct syntax?
thanks
[edit]
never mind for the icon, I stumbled upon the right wording,
again, thanks

4

Dashboard 2.0 uses material design icons only.
Choose your icons from here Material Design Icons - Icon Library - Pictogrammers

5

Actually I have a bit better example for ui_text. Usually the text color is changed to indicate some conditions. The solution can support that logic. And it is more flexible that way.

[{"id":"b607d1be694f207f","type":"ui-text","z":"4eb808f5e19fb7e2","group":"a3080de905f2fb29","order":13,"width":"6","height":"1","name":"","label":"I'm label","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":"20","color":"#8c27a0","className":"hotnipi-textwidget","x":500,"y":2580,"wires":[]},{"id":"d703e5e7c25f23ba","type":"ui-template","z":"4eb808f5e19fb7e2","group":"","page":"","ui":"da26eafa8eb48ab3","name":"Dasboard 2.0 CSS","order":0,"width":0,"height":0,"head":"","format":".hotnipi-textwidget{\n    --error:red;\n    --wet:blue;\n    --hot:orange;\n    --textcolor:currentColor;\n    --labelcolor:currentColor;\n}\n\n.hotnipi-textwidget.error{\n    --textcolor:var(--error);\n    --labelcolor:var(--error);\n}\n.hotnipi-textwidget.hot{\n    --textcolor:var(--hot);\n}\n.hotnipi-textwidget.wet{\n    --textcolor:var(--wet);\n}\n.hotnipi-textwidget .nrdb-ui-text-value{\n    color:var(--textcolor); \n}\n.hotnipi-textwidget .nrdb-ui-text-label{\n    color:var(--labelcolor); \n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":530,"y":2540,"wires":[[]]},{"id":"61ef7c45fd5873f8","type":"inject","z":"4eb808f5e19fb7e2","name":"","props":[{"p":"payload"},{"p":"class","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Condition is unknown","payloadType":"str","x":220,"y":2520,"wires":[["b607d1be694f207f"]]},{"id":"97863e43fc8a5f40","type":"inject","z":"4eb808f5e19fb7e2","name":"wet","props":[{"p":"payload"},{"p":"class","v":"wet","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Condition is wet","payloadType":"str","x":230,"y":2560,"wires":[["b607d1be694f207f"]]},{"id":"4254a11031768ff0","type":"inject","z":"4eb808f5e19fb7e2","name":"hot","props":[{"p":"payload"},{"p":"class","v":"hot","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Condition is hot","payloadType":"str","x":230,"y":2600,"wires":[["b607d1be694f207f"]]},{"id":"55a9aa8d0f04414e","type":"inject","z":"4eb808f5e19fb7e2","name":"error","props":[{"p":"payload"},{"p":"class","v":"error","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Now we have an error","payloadType":"str","x":230,"y":2640,"wires":[["b607d1be694f207f"]]},{"id":"a3080de905f2fb29","type":"ui-group","name":"Test","page":"de1b5cd94c089676","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"da26eafa8eb48ab3","type":"ui-base","name":"Board","path":"/dashboard","showPathInSidebar":false},{"id":"de1b5cd94c089676","type":"ui-page","name":"Text","ui":"da26eafa8eb48ab3","path":"/text","icon":"text","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
6

Thanks for that, I imported and will study further

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.