I want to change the background colour of a whole group

[sophia.maurer]

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?

[
    {
        "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
    }
]```

[sophia.maurer]

Does anyone know how to do this?

[hotNipi]

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)

[{"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}]

[sophia.maurer]

Thank u very much, is it possible to color the whole group not just the headline?

[hotNipi]

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:

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

[sophia.maurer]

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

[sophia.maurer]

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

[hotNipi]

Again one of many possible ways:

<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

[sophia.maurer]

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

[hotNipi]

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

Customize dashboard CSS

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 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.

[TotallyInformation]

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

[sophia.maurer]

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?

[hotNipi]

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.

[sophia.maurer]

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

[hotNipi]

Couldn't understand that.

[sophia.maurer]

I dont want to have this green gap between the text widgets

[hotNipi]

OK maybe this option then, your main CSS override add

.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

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

[sophia.maurer]

Thank u very much!!!! Looks great

[sophia.maurer]

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

[hotNipi]

Make a rule

.transparent{
        background:transparent !important;
 }

And for that one text node add className transparent