# Ui template style classes

**URL:** <https://discourse.nodered.org/t/ui-template-style-classes/87342>\
**Category:** Dashboard\
**Created:** [19 April 2024 13:03 UTC](https://discourse.nodered.org/t/ui-template-style-classes/87342 "2024-04-19T13:03:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kubasmyk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kubasmyk/32/38021_2.png) [@kubasmyk](https://discourse.nodered.org/u/kubasmyk)\
**Post date:** [19 April 2024 13:03 UTC](https://discourse.nodered.org/t/ui-template-style-classes/87342/1 "2024-04-19T13:03:32Z")

</div>

Hi, I am trying to get a background color of ui text node change dynamically.

```auto
<style>
.nr-dashboard-widget-123_Test.Happy {
background-color: #ff0000; /* Change to the color you desire */
}
.nr-dashboard-widget-123_Test.Sad {
background-color: #0000ff; /* Change to the color you desire */
}
</style>

```

and change the colors by sending

msg.className in the msgs.

The current approach requires knowing the label name when defining the classes.

I want to ask if there is a better way.

When I inspect the page the ".nr-dashboard-widget-" is always added at the begging but couple tutorials i found online do not have that. Why is that.

If I have same label name for 2 text nodes but different classes i wish to use is it not problematic?

Kind Regards

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [19 May 2024 13:04 UTC](https://discourse.nodered.org/t/ui-template-style-classes/87342/2 "2024-05-19T13:04:11Z")

</div>

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