# Group background color

**URL:** https://discourse.nodered.org/t/group-background-color/92094
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [1 October 2024 08:46 UTC](https://discourse.nodered.org/t/group-background-color/92094 "2024-10-01T08:46:07Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![selwynjackson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/selwynjackson/32/94976_2.png) [@selwynjackson](https://discourse.nodered.org/u/selwynjackson)
#### Post date: [1 October 2024 08:46 UTC](https://discourse.nodered.org/t/group-background-color/92094/1 "2024-10-01T08:46:07Z")

</div>

How do I set the background colour for a group? I would like a different colour for each group. I have tried setting 'background-color' in a template, but that only works for the widgets.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [1 October 2024 09:16 UTC](https://discourse.nodered.org/t/group-background-color/92094/3 "2024-10-01T09:16:42Z")

</div>

If you mean the dashboard 2 group, You can go into edit group via the dashboard 2 sidebar, click edit group, then select create theme, and there you can select the theme colours for the group.

 ![chrome_screenshot_1 Oct 2024 10_13_09 BST](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/636e17fd26e67e73580b52458817556593a2d65a.png)  
You can then use that theme for the group

---

<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: [1 October 2024 09:16 UTC](https://discourse.nodered.org/t/group-background-color/92094/4 "2024-10-01T09:16:43Z")

</div>

Target the v-card in the group with CSS in a `CSS All Pages` type template. Also, use `!important` (yes, not cool, but necessary in this case)

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

```auto
div.nrdb-ui-group.pink div.v-card {
    background-color: pink !important;
}

div.nrdb-ui-group.lime div.v-card {
    background-color: lime !important;
}

div.nrdb-ui-group.cyan div.v-card {
    background-color: lightcyan !important
}

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/6970c1d4e102dfed7958179c63dd109110d640b4.png)

---

<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: [1 October 2024 09:25 UTC](https://discourse.nodered.org/t/group-background-color/92094/5 "2024-10-01T09:25:42Z")

</div>

First you'll need to add the class names for all your groups where you want to modify CSS

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec08908cb6909160cce8dcebd9c87139eb64b672.png)

And then write the CSS for page/pages where those groups will live.

Actually many ways to target the group background.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fea1439a91887fd4284923550b9aeb364469f556.png)

---

<div class="post-metadata">

### Author: ![selwynjackson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/selwynjackson/32/94976_2.png) [@selwynjackson](https://discourse.nodered.org/u/selwynjackson)
#### Post date: [1 October 2024 10:14 UTC](https://discourse.nodered.org/t/group-background-color/92094/7 "2024-10-01T10:14:08Z")

</div>

@ [Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl) you have the solution. You add the definitions to the template:  
div.nrdb-ui-group.pink div.v-card {  
background-color: pink !important;  
}

div.nrdb-ui-group.lime div.v-card {  
background-color: lime !important;  
}

div.nrdb-ui-group.cyan div.v-card {  
background-color: lightcyan !important  
}

Then in the group Class, you just specify the colour: lime, lightcyan or pink.

Thank you Steve

---

<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: [15 October 2024 10:14 UTC](https://discourse.nodered.org/t/group-background-color/92094/8 "2024-10-15T10:14:13Z")

</div>

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