# Really basic problem trying to set CSS for a text box in Dashboard 2
**URL:** https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [13 February 2024 04:59 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470 "2024-02-13T04:59:32Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [13 February 2024 04:59 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/1 "2024-02-13T04:59:32Z")
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
```auto
[{"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"}}]
```
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 February 2024 07:22 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/2 "2024-02-13T07:22:01Z")
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](https://github.com/FlowFuse/node-red-dashboard/issues/535)
---
### Author:  [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [13 February 2024 12:04 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/3 "2024-02-13T12:04:30Z")
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
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 February 2024 12:10 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/4 "2024-02-13T12:10:59Z")
Dashboard 2.0 uses material design icons only.
Choose your icons from here [Material Design Icons - Icon Library - Pictogrammers](https://pictogrammers.com/library/mdi/)
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 February 2024 12:23 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/5 "2024-02-13T12:23:46Z")
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.
```auto
[{"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"}}]
```
---
### Author:  [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [14 February 2024 21:26 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/6 "2024-02-14T21:26:31Z")
Thanks for that, I imported and will study further
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [28 February 2024 21:26 UTC](https://discourse.nodered.org/t/really-basic-problem-trying-to-set-css-for-a-text-box-in-dashboard-2/85470/7 "2024-02-28T21:26:39Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.