# Dashboard widget class vs msg.className

**URL:** <https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805>\
**Category:** Dashboard\
**Created:** [30 May 2023 07:03 UTC](https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805 "2023-05-30T07:03:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 May 2023 07:03 UTC](https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805/1 "2023-05-30T07:03:20Z")

</div>

I have a widget, eg a text node, with class set to "green" in the config. This is intended to define default styling. It works fine.

```auto
.green p {
color: green;
}
.red p {
color: red;
}

```

If I send a message with msg.className "red" then that message is indeed displayed in red.

But subsequent messages _without msg.className_ never revert to green.

I'm guessing it's a feature of CSS rather than a bug in NR. Is there a work-around for this?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 May 2023 07:22 UTC](https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805/2 "2023-05-30T07:22:53Z")

</div>

Empty string does the trick, if you wan to remove all added classes

```auto
 msg.className = ""

```

But reverting by magic will not happen. If you are controlling it, you'll need to control it for all conditions you need.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 May 2023 07:36 UTC](https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805/3 "2023-05-30T07:36:41Z")

</div>

Happy cake day @hotNipi

> [@hotNipi](#):
>
> Empty string does the trick

Not really.

It stops the display in red but still overrides the class set in the widget config.  
The text is displayed in white (the default for a dark theme dashboard), it does not revert to green.

I'm not sure I want magic, I just think that if msg.className does not exist, then the class specified for the widget should be applied. Maybe it is and I just misinterpret the results.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 May 2023 07:57 UTC](https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805/4 "2023-05-30T07:57:30Z")

</div>

It still think the logic is - if msg.className does not exist, it means that list of the class names should remain as is. Reverting is an operation you need to describe somehow. There isn't any built in logic for that.

If you want default color be something else than dashboard default then you can set it with using node-id attribute selector.

```auto
[node-id="7fa7a07fe2814d5d"] p{
        color:green;
    }

```

But that has higher specificity so if you then want to change it with msg.className, that class must have rules with the `!important` flag.

```auto
 .red p {
        color: red !important;
    }

```

Then still you'll need to send empty string to remove any added class to get it back to your desired default

---

<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:** [29 June 2023 07:58 UTC](https://discourse.nodered.org/t/dashboard-widget-class-vs-msg-classname/78805/5 "2023-06-29T07:58:02Z")

</div>

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