Custom Style ui-group

I've been trying to apply a custom style to a UI-group for a while, but I'm not able to.

  1. I add a UI-template with Type: CSS (All Pages)
.miclase {
    color: red;
}
  1. In the UI-group, in the Class field, I add the name of my custom class (miclase).

My goal is to change the group's background color from a Boolean value passed in the flow.

I tried this, and it doesn't work either.

Doesn't that specify the text colour rather than background colour?

As it says, my goal is to change the background color, but since the style doesn't apply to me, I'm doing the simplest thing to get it to apply the style.

The CSS template you have shared can never affect the background colour.

I know that!!!
That's my ultimate goal. For now, I just want the style (whatever it is) to be applied.
After the first step (applying the style to the ui-group), the following would appear:
Do you know how it could affect the group's background color?

Export your flow and share it here so we can try and understand what's going on.

I don't know about color (could be CSS collision), but background-color seems to work:

 .myClass {
    background-color: aqua;
    border: 4px solid red; 
}

However, I don't know if you can change the class dynamically, as for this you need to send a ui_update message, and I don't know if it is possible to send a message to a ui-group node. Did you try the CSS trick proposed by @hotNipi above?

If a style does not take effect then it is most likely due to either misconfiguration or specificity.

Without sharing a small demo flow it is pretty tough to understand what your issue is.

thanks, yes I tried it but it doesn't apply.

[
    {
        "id": "768d2e6b4a117398",
        "type": "tab",
        "label": "Test",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "c884071357627e5c",
        "type": "ui-gauge",
        "z": "768d2e6b4a117398",
        "name": "Test 1",
        "group": "2bf45d898cab6025",
        "order": 1,
        "width": 3,
        "height": 3,
        "gtype": "gauge-34",
        "gstyle": "rounded",
        "title": "gauge",
        "units": "units",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#5cd65c"
            },
            {
                "from": "4",
                "color": "#ffc800"
            },
            {
                "from": "7",
                "color": "#ea5353"
            }
        ],
        "min": 0,
        "max": 10,
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 390,
        "y": 240,
        "wires": []
    },
    {
        "id": "f6ed848e6f96a4f5",
        "type": "ui-template",
        "z": "768d2e6b4a117398",
        "group": "",
        "page": "",
        "ui": "2c138c7da70ed946",
        "name": "estilo",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".myClass {\n    background-color: aqua;\n    border: 4px solid red; \n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 190,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "3de5e142b26d13fe",
        "type": "inject",
        "z": "768d2e6b4a117398",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "4",
        "payloadType": "num",
        "x": 190,
        "y": 240,
        "wires": [
            [
                "c884071357627e5c"
            ]
        ]
    },
    {
        "id": "2bf45d898cab6025",
        "type": "ui-group",
        "name": "GroupTest",
        "page": "b3ca132d0792292e",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "myClass",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "2c138c7da70ed946",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "b3ca132d0792292e",
        "type": "ui-page",
        "name": "Test",
        "ui": "2c138c7da70ed946",
        "path": "/test",
        "icon": "home",
        "layout": "grid",
        "theme": "c835807cdc98644e",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 13,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c835807cdc98644e",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

Your aquamarine background is overridden by the style for the v-card div inside it

v-card v-theme--nrdb v-card--density-default v-card--variant-outlined bg-group-background

The [default?] styling for .bg-group-background is

rgb(var(--v-theme-group-background)) !important

(white)

In order to impose your will on things I think you need a more specific CSS selector and to also use !important.

Try this

.myClass .v-card.bg-group-background{
    background-color: aquamarine !important;
    border: 4px solid rgb(0, 187, 255); 
}
1 Like

This way it worked, thanks a lot!!
Is there a way to apply the style from a switch (dashboard 2)?

You can also achieve it by changing that CSS variable --v-theme-group-background

.myClass .v-card.bg-group-background{
    --v-theme-group-background: 127, 255, 212;
    border: 4px solid rgb(0, 187, 255); 
}

(127,255,212 is the rgb values for aquamarine)
I notice that this approach does not need !important so I guess it's better but I don't like having those 3 magic numbers without a clear explanation of what they do, in contrast to the border declaration.

1 Like

Now you can successfully style the group background, you will have to explore the method given by @hotNipi in the other thread.

Perhaps it would be easier to use a ui-template, which you can dynamically style, with the other widgets inside it. I've not personally done that so I don't know how easy it is.

1 Like

This seems to work

[{"id":"c884071357627e5c","type":"ui-gauge","z":"768d2e6b4a117398","name":"Test 1","group":"2bf45d898cab6025","order":1,"value":"payload","valueType":"msg","width":3,"height":3,"gtype":"gauge-34","gstyle":"rounded","title":"gauge","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"trigger","x":610,"y":240,"wires":[]},{"id":"f6ed848e6f96a4f5","type":"ui-template","z":"768d2e6b4a117398","group":"","page":"b3ca132d0792292e","ui":"","name":"estilo","order":0,"width":0,"height":0,"head":"","format":".myClass .v-card.bg-group-background{\n    border: 4px solid rgb(0, 187, 255); \n    /* this is the colour if neither green nor red is set */\n    --v-theme-group-background: 222, 184, 135;\n}\n\n.myClass:has(.green) .bg-group-background{\n  --v-theme-group-background: 127, 255, 212;\n}\n.myClass:has(.red) .bg-group-background {\n  --v-theme-group-background: 255, 99, 71\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":610,"y":200,"wires":[[]]},{"id":"3de5e142b26d13fe","type":"inject","z":"768d2e6b4a117398","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":150,"y":240,"wires":[["c884071357627e5c"]]},{"id":"a53524c1ceccc021","type":"ui-button","z":"768d2e6b4a117398","group":"2bf45d898cab6025","name":"Red","label":"red","order":0,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"red","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":130,"y":280,"wires":[["63e47fa45ce550fe"]]},{"id":"17f68243bed3b672","type":"ui-button","z":"768d2e6b4a117398","group":"2bf45d898cab6025","name":"Green","label":"green","order":0,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"green","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":130,"y":320,"wires":[["63e47fa45ce550fe"]]},{"id":"63e47fa45ce550fe","type":"function","z":"768d2e6b4a117398","name":"Set the class of a widget in the group","func":"let newmsg = {\n    \"ui_update\": {\n        \"class\": msg.payload\n    }\n}\nreturn newmsg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":300,"wires":[["c884071357627e5c"]]},{"id":"2bf45d898cab6025","type":"ui-group","name":"GroupTest","page":"b3ca132d0792292e","width":"6","height":"1","order":1,"showTitle":true,"className":"myClass","visible":"true","disabled":"false","groupType":"default"},{"id":"b3ca132d0792292e","type":"ui-page","name":"Test","ui":"e9c974f7c1d080d1","path":"/test","icon":"home","layout":"grid","theme":"c835807cdc98644e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":13,"className":"","visible":"true","disabled":"false"},{"id":"e9c974f7c1d080d1","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"c835807cdc98644e","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"40578943acc9d562","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.25.0"}}]


1 Like

Thanks you..!!!
:raising_hands: