# NodeRED Dashboard 2.0 Group CSS

**URL:** https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [17 March 2025 09:28 UTC](https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058 "2025-03-17T09:28:56Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![marcOsram](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@marcOsram](https://discourse.nodered.org/u/marcOsram)
#### Post date: [17 March 2025 09:28 UTC](https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058/1 "2025-03-17T09:28:56Z")

</div>

Hey guys,  
i have a dashboard with some gauges. I'd like to have them transparent. Via dev console, i find the way to the property that i need to change, to set the group transparent, as you can see on the screenshot. As soon as i put a ', ' to that property, it turns all gauges in all groups transparent.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06786ca4a638984d8e55348558b7eca6e16ba1d7.png)

How do i address that css level, or item from the css template ?

---

<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: [17 March 2025 09:45 UTC](https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058/2 "2025-03-17T09:45:54Z")

</div>

This will affect all groups.

```auto
.bg-group-background {    
    background-color:transparent !important;
}

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 March 2025 09:46 UTC](https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058/3 "2025-03-17T09:46:29Z")

</div>

- Add a `class` to ONLY the gauges you want to affect (e.g. `transparent-group`)  

- Define the class in a ui-template set for `CSS` mode  

NOTE: you shouldnt not really need `!important` if you make the CSS selector sufficiently specific

---

<div class="post-metadata">

### Author: ![marcOsram](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@marcOsram](https://discourse.nodered.org/u/marcOsram)
#### Post date: [17 March 2025 09:48 UTC](https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058/4 "2025-03-17T09:48:35Z")

</div>

Oh, its really that easy! Thanks, works out for me.  
I thought i need to find the css node, which is used for styling and then add something to it.

Thank you!

---

<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: [16 April 2025 09:48 UTC](https://discourse.nodered.org/t/nodered-dashboard-2-0-group-css/96058/5 "2025-04-16T09:48:49Z")

</div>

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