# Custom Style ui-group

**URL:** <https://discourse.nodered.org/t/custom-style-ui-group/98250>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 July 2025 16:28 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250 "2025-07-22T16:28:39Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 16:28 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/1 "2025-07-22T16:28:39Z")

</div>

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)

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

> [@Change dashboard 2.0 UI-Group Background color based on bool in the payload](https://discourse.nodered.org/t/change-dashboard-2-0-ui-group-background-color-based-on-bool-in-the-payload/92874):
>
> I am new to node red. I am trying to change the UI-Group background color to green it the device is on and red if it is off. I am not sure if i need to use UI-control or UI-templet nodes?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 16:49 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/2 "2025-07-22T16:49:02Z")

</div>

> [@Pepex7](#):
>
> ```auto
> .miclase {
> color: red;
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 17:03 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/3 "2025-07-22T17:03:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 17:19 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/4 "2025-07-22T17:19:14Z")

</div>

> [@Pepex7](#):
>
> As it says, my goal is to change the background color,

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

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 17:25 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/5 "2025-07-22T17:25:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 17:40 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/6 "2025-07-22T17:40:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [22 July 2025 19:06 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/7 "2025-07-22T19:06:12Z")

</div>

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

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/522d8e63ad150760b7bb82a8c3c042fe0c0467ef.png)

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

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 July 2025 19:37 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/8 "2025-07-22T19:37:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 21:38 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/9 "2025-07-22T21:38:47Z")

</div>

> [@omrid](#):
>
> 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?

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

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 21:39 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/10 "2025-07-22T21:39:30Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 22:23 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/11 "2025-07-22T22:23:17Z")

</div>

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

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

```

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

```auto
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

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

```

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 22:30 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/12 "2025-07-22T22:30:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 22:32 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/13 "2025-07-22T22:32:27Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 22:35 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/14 "2025-07-22T22:35:38Z")

</div>

> [@Pepex7](#):
>
> Is there a way to apply the style from a switch (dashboard 2)?

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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 July 2025 23:07 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/15 "2025-07-22T23:07:37Z")

</div>

This seems to work

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/63e0cc82b7427c1e89fcf4c64c3962ad7e92e5f5.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c87e60c3ce6b706f5974649499191102e844f389.png)

---

<div class="post-metadata">

**Author:** ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Post date:** [22 July 2025 23:12 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/16 "2025-07-22T23:12:29Z")

</div>

Thanks you..!!!  
🙌

---

<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:** [5 August 2025 23:12 UTC](https://discourse.nodered.org/t/custom-style-ui-group/98250/17 "2025-08-05T23:12:54Z")

</div>

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