# Request: Add a option on UI nodes to add a CSS class

**URL:** <https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918>\
**Category:** Core Development\
**Created:** [8 December 2019 16:31 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918 "2019-12-08T16:31:19Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 December 2019 16:31 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/1 "2019-12-08T16:31:19Z")

</div>

Several times I've had a case where I wanted to change the color of just one ui-text node. For example,  
I am monitoring a temperatures which is display in text node 'A'. I also have text node 'B' under text node 'A' which is normally empty.

If the temperature exceeds the set value, I move the word 'ALERT' to text node 'B' and it shows up. When the valud drops back to normal levels, Ithe flow moves spaces to text node 'B' and the word 'ALERT' is removed.

What I want to do is add some CSS to change the color of text node 'B' to display red. The problem is if I use '.nr-dashboard-theme .nr-dashboard-text p' it changes the text for both naod 'B' and node 'A'.

What would be useful is if each ui node hade another entry that would allow the user to add a CSS class. This way they could have CSS address ui's as groups or uniquely.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 December 2019 19:15 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/2 "2019-12-08T19:15:42Z")

</div>

Did you spot this thread a day or so ago ?

> [@How to change ui-text background color?](https://discourse.nodered.org/t/how-to-change-ui-text-background-color/18854/10):
>
> If I make the CSS more targetable you could do this by adding a style template like \<style\> .nr-dashboard-widget-Test\_text { background-color:red !important; } \</style\> (by using the label to help set the class...) Any good ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 December 2019 19:24 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/3 "2019-12-08T19:24:40Z")

</div>

But what if you don't use the label because you don't want it to show?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 December 2019 19:45 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/4 "2019-12-08T19:45:59Z")

</div>

edge cases can use a template 🙂

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 December 2019 20:28 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/5 "2019-12-08T20:28:11Z")

</div>

or there could be a switch not to show the label 🤨

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 December 2019 20:29 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/6 "2019-12-08T20:29:59Z")

</div>

Actually it would still have a class of `nr-dashboard-widget-`  
as that is prepended to the label...  
(and no - I don't want to add a switch)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 December 2019 20:33 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/7 "2019-12-08T20:33:06Z")

</div>

I suppose I can use CSS to hide the label 😜

Actually having something that will allow targeting of individual widgets will be a great improvement

Thanks for all you do!

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [30 April 2020 15:41 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/8 "2020-04-30T15:41:40Z")

</div>

I wonder if this feature is already implemented for the ui\_text node.

The help text says so:

> The widget also has a class of `nr-dashboard-widget-{the_widget_label_with_underscores}` which can be used for additional styling if required. You may need to use the _!important_ flag to override the theme.

But adding the node to a dashboard I can´t find the CSS class when doing a search in the browser dev tools.

I am running Dashboard 2.21.0 on a windows machine.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 April 2020 15:48 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/9 "2020-04-30T15:48:50Z")

</div>

It should do - here is one for a text box with a label "Simple"

\<md-card ui-card-size="3x1" layout="row" layout-align="space-between center" class="nr-dashboard-text ng-scope \_md layout-row layout-align-space-between-center **nr-dashboard-widget-Simple** visible" ng-class="[me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}]" style="left: 162px; top: 270px; width: 156px; height: 48px;"\>

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [30 April 2020 17:30 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/10 "2020-04-30T17:30:44Z")

</div>

Thanks for the feedback Dave ! I will have a (careful) look as soon as I get a chance.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [30 April 2020 18:02 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/11 "2020-04-30T18:02:55Z")

</div>

I have a `ui-text` widget box with a label of `node17: ` here is what the class shows:

`class="nr-dashboard-text ng-scope _md layout-row layout-align-start-center nr-dashboard-widget-node17__ visible"`

Looks like the two underline characters replace the colin(`:`) and space that follows it but atleast it is addressable!!

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 April 2020 18:24 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/12 "2020-04-30T18:24:18Z")

</div>

Classes can’t contain special characters or spaces so we convert them to underscores

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [30 April 2020 18:56 UTC](https://discourse.nodered.org/t/request-add-a-option-on-ui-nodes-to-add-a-css-class/18918/13 "2020-04-30T18:56:09Z")

</div>

I confirm it is all good for me. I just cleared the browser cache to make it work.