# Change background color of group

**URL:** https://discourse.nodered.org/t/change-background-color-of-group/10878
**Category:** Dashboard
**Created:** [7 May 2019 08:42 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878 "2019-05-07T08:42:41Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)
#### Post date: [7 May 2019 08:42 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/1 "2019-05-07T08:42:41Z")

</div>

is there a way to change the background color of group ?  
there's no id in md-card, even the class doesn't work !!  
 ![test3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ea0f19e0ea620e0a74b41a929788734a8f493a6a.png)

---

<div class="post-metadata">

### Author: ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)
#### Post date: [7 May 2019 09:08 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/2 "2019-05-07T09:08:08Z")

</div>

I moved this into #dashboard as it would appear to be about the dashboard

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 May 2019 10:16 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/3 "2019-05-07T10:16:15Z")

</div>

The id in on the div that contains the card - ("\_\_Liste\_de\_reference\_cards") - so you can target that with CSS if you wish.

---

<div class="post-metadata">

### Author: ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)
#### Post date: [22 July 2019 15:24 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/4 "2019-07-22T15:24:59Z")

</div>

Hello guys,

I need help, im trying to change the background color in the dashboard group, but i dont understand much about how to edit the css template, i use the dev tools in google chrome to check the ID and i use the template node (with section) but i dont had any sucess, so can someone share a part of the code or explain how to put work with this ?

thanks

---

<div class="post-metadata">

### Author: ![learning](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@learning](https://discourse.nodered.org/u/learning)
#### Post date: [22 July 2019 15:43 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/5 "2019-07-22T15:43:18Z")

</div>

Hi,

This is exactly what I have been searching for but when following the provided solution, mine still does not work. I am able to change the font size of the group through CSS but the background color will not change.

---

<div class="post-metadata">

### Author: ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)
#### Post date: [22 July 2019 17:54 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/6 "2019-07-22T17:54:48Z")

</div>

@learning it would be useful if you could show the code that you were using that didn't work. Perhaps someone can see what is wrong...

---

<div class="post-metadata">

### Author: ![learning](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@learning](https://discourse.nodered.org/u/learning)
#### Post date: [22 July 2019 18:01 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/7 "2019-07-22T18:01:28Z")

</div>

@ukmoose This is the code I am using. It is in a template node and "Added to site section" is selected

```auto
<style>
    #Small_Screen_Group_2 {
        font-size: 30px !important;
        background-color: "#FF0000" !important;
    }
</style>

```

Below is the dashboard. As you can see, the text is larger than the deault.

![Small](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1cb049c444a740c2557e9e642bdf437b6c0af5df.jpeg)

---

<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: [22 July 2019 18:17 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/8 "2019-07-22T18:17:53Z")

</div>

It may help if you do a little research on topic of how to work with chrome dev tools and CSS. [https://developers.google.com/web/tools/chrome-devtools/css/](https://developers.google.com/web/tools/chrome-devtools/css/)  
CSS as it name says cascades so it is hard to tell what is wrong by just looking an image of situation. By debugging dashboard elements you can find the real source of CSS rule what affects elements you are interested.

---

<div class="post-metadata">

### Author: ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)
#### Post date: [22 July 2019 18:57 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/9 "2019-07-22T18:57:42Z")

</div>

Hello

I have that, i can see in the devtools the green color and the style there, but probably it's in the wrong place.

![ee](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/45abcbbf196c29bfcbcda61b6eb3e92e39a60025.png)

 ![fe](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f50d3d264a7603379e996ce77c52685c4594fda2.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: [22 July 2019 19:30 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/10 "2019-07-22T19:30:05Z")

</div>

The div to change `CSS` rule for card background is hierarchically second in deeper direction (from your selection). The id of that div is `"Home_Teste_cards"`

---

<div class="post-metadata">

### Author: ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)
#### Post date: [23 July 2019 00:26 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/11 "2019-07-23T00:26:22Z")

</div>

Hello

Thanks for the help and your time.

If i use the ""Home\_Teste\_cards"", i just see a green line between Hello and the switch.  
If i use the code in the pic. he do that.

I increased the size of the font to see if i'm in the right place.

My question is the background color of the label and button is it an overlap?

What i want its change the background of the group inclued including all objects inside,I don't know if it's possible.

Thanks

 ![cgbdf](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c87f98d7f30453491d0f672c8ac7a94db7c6ea18.png)

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [23 July 2019 07:21 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/12 "2019-07-23T07:21:47Z")

</div>

They are different so you would need to override both. One is the group background and the other is the widget background

---

<div class="post-metadata">

### Author: ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)
#### Post date: [25 July 2019 19:50 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/13 "2019-07-25T19:50:47Z")

</div>

Hello

thanks for the help.

---

<div class="post-metadata">

### Author: ![hamad-ul-hassan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hamad-ul-hassan/32/16238_2.png) [@hamad-ul-hassan](https://discourse.nodered.org/u/hamad-ul-hassan)
#### Post date: [17 January 2020 07:36 UTC](https://discourse.nodered.org/t/change-background-color-of-group/10878/14 "2020-01-17T07:36:43Z")

</div>

Hi Cristiano,

I am new to node-red and facing the same problem. Can you show me how you override so that the whole group take the same color. Thanks
