# I want to change the background colour of a whole group

**URL:** <https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, security, function-node, home-assistant, mqtt\
**Created:** [12 July 2023 14:29 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770 "2023-07-12T14:29:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [12 July 2023 14:29 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/1 "2023-07-12T14:29:21Z")

</div>

Hello,  
I would like to give an entire dashboard group a certain colour depending on a message in node red.  
This does it for a short section, how do I do it for a whole group?

````auto
[
    {
        "id": "924fc5d03c51a6fb",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "ef6cc5fbb5a1f21e",
        "type": "ui_template",
        "z": "924fc5d03c51a6fb",
        "group": "3b47bcb290ba7812",
        "name": "",
        "order": 5,
        "width": 0,
        "height": 0,
        "format": "<div style=\"width: 100%; height: 100%; background-color: {{msg.topic}};\">\n <div class=\"content\">\n <span>{{(msg.payload)}}</span>\n </div>\n</div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 580,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "5bbc18e7b7bb3e93",
        "type": "ui_text",
        "z": "924fc5d03c51a6fb",
        "group": "3b47bcb290ba7812",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text:",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 570,
        "y": 500,
        "wires": []
    },
    {
        "id": "e070d8e912bd0b59",
        "type": "inject",
        "z": "924fc5d03c51a6fb",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "2",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "efe",
        "payloadType": "str",
        "x": 310,
        "y": 500,
        "wires": [
            [
                "5bbc18e7b7bb3e93"
            ]
        ]
    },
    {
        "id": "8c781ce47bd229d6",
        "type": "inject",
        "z": "924fc5d03c51a6fb",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "green",
        "payload": "red",
        "payloadType": "str",
        "x": 330,
        "y": 600,
        "wires": [
            [
                "ef6cc5fbb5a1f21e"
            ]
        ]
    },
    {
        "id": "3b47bcb290ba7812",
        "type": "ui_group",
        "name": "Default",
        "tab": "681dd137c2c59e18",
        "order": 1,
        "disp": false,
        "width": "5",
        "collapse": false
    },
    {
        "id": "681dd137c2c59e18",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]```
````

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [13 July 2023 06:13 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/2 "2023-07-13T06:13:09Z")

</div>

Does anyone know how to do 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:** [13 July 2023 07:02 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/3 "2023-07-13T07:02:16Z")

</div>

Many ways to do it. I made small example which make use of custom CSS classes you can add to group element. (You can add classes for widgets too)

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

```auto
[{"id":"a1c6641342c94ce5","type":"ui_template","z":"02ca79a9a08a0cf4","group":"f8bc2a9c02118c89","name":"G-main","order":0,"width":0,"height":0,"format":"<div>MAIN GROUP CONTENT</div>\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.group && msg.color){\n $(\".selectablegroup.\"+msg.group).css(\"background\",msg.color)\n }\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":140,"wires":[[]]},{"id":"0664c1a1fe9dd68d","type":"ui_template","z":"02ca79a9a08a0cf4","group":"eff456b64193f742","name":"G-first","order":0,"width":0,"height":0,"format":"<div>FIRST GROUP CONTENT</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":610,"y":180,"wires":[[]]},{"id":"f840a4f1a02bde35","type":"ui_template","z":"02ca79a9a08a0cf4","group":"6555d7979726b021","name":"G-second","order":0,"width":0,"height":0,"format":"<div>SECOND GROUP CONTENT</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":220,"wires":[[]]},{"id":"3d6bb70694ce7b9d","type":"inject","z":"02ca79a9a08a0cf4","name":"make first group background green","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"group","v":"first","vt":"str"},{"p":"color","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":280,"y":140,"wires":[["a1c6641342c94ce5"]]},{"id":"baeebff519cb685d","type":"inject","z":"02ca79a9a08a0cf4","name":"make second group background orange","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"group","v":"second","vt":"str"},{"p":"color","v":"orange","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":270,"y":180,"wires":[["a1c6641342c94ce5"]]},{"id":"700de17538b2c549","type":"ui_text_input","z":"02ca79a9a08a0cf4","name":"","label":"Pick a color","tooltip":"","group":"13274f4cc1e31a04","order":0,"width":0,"height":0,"passthru":true,"mode":"color","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":450,"y":280,"wires":[["2de006e3b6d76b19"]]},{"id":"2de006e3b6d76b19","type":"ui_template","z":"02ca79a9a08a0cf4","group":"13274f4cc1e31a04","name":"G-smart","order":0,"width":0,"height":0,"format":"<div>SMART GROUP CONTENT</div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) { \n $(\".smartgroup\").css(\"background\",msg.payload) \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":280,"wires":[[]]},{"id":"f8bc2a9c02118c89","type":"ui_group","name":"MAIN","tab":"c131f37e7b482bea","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"eff456b64193f742","type":"ui_group","name":"FIRST","tab":"c131f37e7b482bea","order":2,"disp":true,"width":"6","collapse":false,"className":"selectablegroup first"},{"id":"6555d7979726b021","type":"ui_group","name":"SECOND","tab":"c131f37e7b482bea","order":3,"disp":true,"width":"6","collapse":false,"className":"selectablegroup second"},{"id":"13274f4cc1e31a04","type":"ui_group","name":"SELF SMART","tab":"c131f37e7b482bea","order":4,"disp":true,"width":"6","collapse":false,"className":"smartgroup"},{"id":"c131f37e7b482bea","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [13 July 2023 07:16 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/4 "2023-07-13T07:16:42Z")

</div>

Thank u very much, is it possible to color the whole group not just the headline?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/bab19e05865f728f925671f8a6b47094375d6a1b.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:** [13 July 2023 07:31 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/5 "2023-07-13T07:31:56Z")

</div>

It actually changes that background of group but all the widgets in the group also have background. So that is why it does not show.

Again many ways to get over it.  
You can try this:

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

It selects everything inside `.selectablegroup` and makes the background for them transparent. It may be what you want but worth of trying.

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [13 July 2023 08:35 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/6 "2023-07-13T08:35:27Z")

</div>

Great thanks!  
Do you know how to change the colour of the group header?

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [13 July 2023 08:39 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/7 "2023-07-13T08:39:35Z")

</div>

And is it possible to only colour the background of th group header?

---

<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:** [13 July 2023 08:44 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/8 "2023-07-13T08:44:28Z")

</div>

Again one of many possible ways:

```auto
<div>SMART GROUP CONTENT</div>

<script>
    (function(scope) {
    scope.$watch('msg', function(msg) {
    if (msg) {     
        $(".smartgroup").css("background",msg.payload)
        if(msg.titlecolor){
            $(".smartgroup").find(".nr-dashboard-cardtitle").css("color",msg.titlecolor)
        }
    }
    
  });
})(scope);
</script>

```

> [@sophia.maurer](#):
>
> And is it possible to only colour the background of th group header?

Yes but it does not do what you think it should  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/049d7913d9ba2905ac6cc218cc6525a61779beb6.png)

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [13 July 2023 09:18 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/9 "2023-07-13T09:18:26Z")

</div>

Yes I would like there to be no more colour between the widgets, so that is not possible?

---

<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:** [13 July 2023 09:37 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/10 "2023-07-13T09:37:02Z")

</div>

Now it will be complicated. Not about those questions individually but as the dashboard and it's appearance is one whole thing, the solution for one question may contradict with others. It takes to think more about the styling the dashboard first and then adjusting or changing some elements on fly based on some inputs or events or so.

But as the dashboard is a bit more complicated than it may seem, it takes to get knowledge about the structure of it and how all elements are decorated (the CSS)

Take a little time to examine this post, talking about customizing the dashboard

> [@paintbrush Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139):
>
> Couple of things first.. Many things can happen if you start to play with CSS. You may break whole thing, but you can make your page really good looking. But be aware that it can be addictive. The result of your adjustments is art. So if you are changing CSS for your dashboard, you are an artist. (and a little bit a programmer of course) I'm not an expert of art nor the CSS. The tools Browser developer tools. [https://developers.google.com/web/tools/chrome-devtools/css](https://developers.google.com/web/tools/chrome-devtools/css) The main too…

You may find many answers from there but most probably you gain more questions but those will be then more sharp on point.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 July 2023 16:23 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/11 "2023-07-13T16:23:43Z")

</div>

The other consideration is about how much Dashboard is helping you and how much it might be hindering. As with most frameworks, Dashboard is great at what it does. But if you want to go off-track, it rapidly becomes exponentially harder to do things. That's why there are alternatives 😉

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [14 July 2023 06:33 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/12 "2023-07-14T06:33:18Z")

</div>

Hello, unfortunately I have not been able to find anything helpful on the site. Does anyone know the command to colour only the header of the group?

---

<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:** [14 July 2023 06:40 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/13 "2023-07-14T06:40:30Z")

</div>

Most simple trick will be hide the default header and use simple text node, which then you can address with CSS and make the appearance as you like.

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [14 July 2023 06:55 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/14 "2023-07-14T06:55:43Z")

</div>

Hm oke is it possible to somehow enlarge the text widgets centrally so that there is no gap between them?

---

<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:** [14 July 2023 06:58 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/15 "2023-07-14T06:58:16Z")

</div>

Couldn't understand that.

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [14 July 2023 07:16 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/16 "2023-07-14T07:16:27Z")

</div>

I dont want to have this green gap between the text widgets  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6ec668fd59baaf6dc8632d3c14434a09eb50f58e.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:** [14 July 2023 07:27 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/17 "2023-07-14T07:27:37Z")

</div>

OK maybe this option then, your main CSS override add

```auto
.nr-dashboard-cardcontainer{
        background:var(--nr-dashboard-groupBackgroundColor)
    }

```

This makes content area of card to have background but the header area is not affected.

EDIT: it takes to have the !important flag to affect

```auto
.nr-dashboard-cardcontainer{
        background:var(--nr-dashboard-groupBackgroundColor) !important;
    }

```

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [14 July 2023 08:15 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/18 "2023-07-14T08:15:59Z")

</div>

Thank u very much!!!! Looks great

---

<div class="post-metadata">

**Author:** ![sophia.maurer](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@sophia.maurer](https://discourse.nodered.org/u/sophia.maurer)\
**Post date:** [20 July 2023 08:45 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/19 "2023-07-20T08:45:45Z")

</div>

Does anyone know how I can set the background of only one text node to invisible, my group header has a backgorund colour thats why i am asking

---

<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:** [20 July 2023 09:21 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/20 "2023-07-20T09:21:38Z")

</div>

Make a rule

```auto
.transparent{
        background:transparent !important;
 }

```

And for that one text node add className `transparent`

[Next page](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770.md?page=2)