# 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:** 15
**Page:** 2

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

</div>

Where do I include this code? in what node?

---

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

</div>

Your main CSS override. It is recommended to keep all the custom CSS in one place. Easier to maintain.

---

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

</div>

in a template node?

---

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

</div>

I have added it between script but it does not work

---

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

</div>

I dont know what you mean with css override sadly, could you explain that in detail?

---

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

</div>

You should have one `ui_template` node which is targeted to the `site head` and which then contain all CSS rules ( `<style> ... all your rules ... </style>` tag) to override default styles of the dashboard.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/458c2d7ee46bc098741063f53f9a2978162b1507.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: [24 July 2023 05:54 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/30 "2023-07-24T05:54:18Z")

</div>

Okay thank you! I think the issue is that it is overwritten by the statement that i dont want to have a cardcontainer background .  
nr-dashboard-cardcontainer{  
background:var(--nr-dashboard-groupBackgroundColor) !important;  
}  
How can i color the background of only one text node in the color of msg.color?

---

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

</div>

It is not that easy to say anything at this point cos as you have already many overrides, I cant figure out what may affect and where. You'll need to do small example with your CSS overrides included and then point out the issue you are struggling.

---

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

</div>

[flows (20).json](https://discourse.nodered.org/uploads/short-url/gi8GjCQ9h7TGmwvw0kOP3LNWlVq.json) (4.0 KB)

That is my flow with what i already have in the template node and now I only want one text node to have a red background as well as 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: [24 July 2023 06:47 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/33 "2023-07-24T06:47:30Z")

</div>

```auto
[
    {
        "id": "cae798a90f809ae1",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "f15148ee24afb09b",
        "type": "ui_template",
        "z": "cae798a90f809ae1",
        "group": "3e2c11c9a647e6ee",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "\n<script>\n(function(scope) \n{\n scope.$watch('msg', function(msg) \n {\n $(\".Test1\").css(\"background\", msg.color); // Select color of group background \n $(\".nr-dashboard-cardcontainer\").css(\"background\", '#333333'); // Select color of group content background\n $(\".nr-dashboard-cardtitle\").css(\"color\",'black') // Select colour of group heading\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 860,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "7c041dba6651676b",
        "type": "inject",
        "z": "cae798a90f809ae1",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "color",
                "v": "red",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "x": 590,
        "y": 460,
        "wires": [
            [
                "f15148ee24afb09b"
            ]
        ]
    },
    {
        "id": "2fbd32cf1a0e2e4b",
        "type": "inject",
        "z": "cae798a90f809ae1",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Not red background",
        "payloadType": "str",
        "x": 630,
        "y": 580,
        "wires": [
            [
                "1989453bd94e092b"
            ]
        ]
    },
    {
        "id": "1989453bd94e092b",
        "type": "ui_text",
        "z": "cae798a90f809ae1",
        "group": "3e2c11c9a647e6ee",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text:",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 870,
        "y": 580,
        "wires": []
    },
    {
        "id": "c2f5f52ac90d0e24",
        "type": "inject",
        "z": "cae798a90f809ae1",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Red background",
        "payloadType": "str",
        "x": 620,
        "y": 520,
        "wires": [
            [
                "7ffa91228068d7a1"
            ]
        ]
    },
    {
        "id": "7ffa91228068d7a1",
        "type": "ui_text",
        "z": "cae798a90f809ae1",
        "group": "3e2c11c9a647e6ee",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text:",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 870,
        "y": 520,
        "wires": []
    },
    {
        "id": "3e2c11c9a647e6ee",
        "type": "ui_group",
        "name": "Test1",
        "tab": "9a5408f1ef3d4783",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": "Test1"
    },
    {
        "id": "9a5408f1ef3d4783",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

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

</div>

Maybe this way then..

```auto
[{"id":"f15148ee24afb09b","type":"ui_template","z":"cae798a90f809ae1","group":"3e2c11c9a647e6ee","name":"","order":0,"width":0,"height":0,"format":"\n<script>\n(function(scope) \n{\n scope.$watch('msg', function(msg) \n {\n $(\".Test1\").css(\"background\", msg.color); // Select color of group background \n $(\".nr-dashboard-cardcontainer\").css(\"background\", '#333333'); // Select color of group content background\n $(\".nr-dashboard-cardtitle\").css(\"color\",'black') // Select colour of group heading\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":860,"y":460,"wires":[[]]},{"id":"7c041dba6651676b","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":590,"y":460,"wires":[["f15148ee24afb09b"]]},{"id":"2fbd32cf1a0e2e4b","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Not red background","payloadType":"str","x":630,"y":640,"wires":[["1989453bd94e092b"]]},{"id":"1989453bd94e092b","type":"ui_text","z":"cae798a90f809ae1","group":"3e2c11c9a647e6ee","order":1,"width":0,"height":0,"name":"","label":"text:","format":"{{msg.payload}}","layout":"row-spread","className":"","x":870,"y":640,"wires":[]},{"id":"c2f5f52ac90d0e24","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"red-back","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Red background","payloadType":"str","x":620,"y":520,"wires":[["7ffa91228068d7a1"]]},{"id":"7ffa91228068d7a1","type":"ui_text","z":"cae798a90f809ae1","group":"3e2c11c9a647e6ee","order":1,"width":0,"height":0,"name":"","label":"text:","format":"{{msg.payload}}","layout":"row-spread","className":"","x":870,"y":520,"wires":[]},{"id":"ca53f2408c66f304","type":"ui_template","z":"cae798a90f809ae1","group":"55888982bdd0637f","name":"CSS","order":6,"width":0,"height":0,"format":"<style>\n .red-background{\n background:red !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":850,"y":360,"wires":[[]]},{"id":"8895d692ec685906","type":"inject","z":"cae798a90f809ae1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Remove Red background","payloadType":"str","x":650,"y":560,"wires":[["7ffa91228068d7a1"]]},{"id":"3e2c11c9a647e6ee","type":"ui_group","name":"Test1","tab":"9a5408f1ef3d4783","order":1,"disp":true,"width":"6","collapse":false,"className":"Test1"},{"id":"55888982bdd0637f","type":"ui_group","name":"Swatches","tab":"62083694d0eab7ca","order":1,"disp":true,"width":9,"collapse":false,"className":""},{"id":"9a5408f1ef3d4783","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Colors","icon":"dashboard","order":1,"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: [24 July 2023 07:09 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/36 "2023-07-24T07:09:11Z")

</div>

Thank you very much!!! Just one last question, do you know how to place the group header in the middle?

---

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

</div>

If for all group headers, then for CSS

```auto
.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
   text-align: center;
}

```

---

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

</div>

Thank you so much!!

---

<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: [23 August 2023 07:17 UTC](https://discourse.nodered.org/t/i-want-to-change-the-background-colour-of-a-whole-group/79770/39 "2023-08-23T07:17:57Z")

</div>

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

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