# Change dashboard 2.0 UI-Group Background color based on bool in the payload

**URL:** <https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [2 November 2024 21:30 UTC](https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874 "2024-11-02T21:30:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![matz](https://avatars.discourse-cdn.com/v4/letter/m/7993a0/32.png) [@matz](https://discourse.nodered.org/u/matz)\
**Post date:** [2 November 2024 21:30 UTC](https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874/1 "2024-11-02T21:30:33Z")

</div>

I am new to node red. I am trying to change the UI-Group background color to green it the device is on and red if it is off. I am not sure if i need to use UI-control or UI-templet nodes?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 November 2024 09:28 UTC](https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874/2 "2024-11-06T09:28:07Z")

</div>

We don't currently have a way of adding dynamic classes to Groups, only widgets. Could I trouble you to open a Feature Request here please: [Sign in to GitHub · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/new/choose)

---

<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:** [6 November 2024 10:13 UTC](https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874/3 "2024-11-06T10:13:08Z")

</div>

For group(s) add a class, name it as you like. For example `device-state`

Then write a bit of CSS

```auto
.device-state:has(.device-on) .bg-group-background{
    background-color: #ccff90 !important;    
}
.device-state:has(.device-off) .bg-group-background {
    background-color: #ffc290 !important;
}

```

Now you can choose your favourite widget in group and add or remove classes `device-off` or `device-on` for it. Dynamically or statically. Do it with one widget in group only.

The magic of the CSS selector explained:  
select elements with class `device-state`, check if has any element with class `device-on`, and if so, find the element with class `bg-group-background` in it and forcibly apply background color for it.

---

<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:** [6 December 2024 10:13 UTC](https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874/4 "2024-12-06T10:13:45Z")

</div>

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