# How do I change pop-up notification's background color?

**URL:** <https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 March 2026 19:32 UTC](https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659 "2026-03-26T19:32:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nearbyatom](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@nearbyatom](https://discourse.nodered.org/u/nearbyatom)\
**Post date:** [26 March 2026 19:32 UTC](https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659/1 "2026-03-26T19:32:57Z")

</div>

My project uses the notification nodes. I have 3 of them, and I'd like to be able to change the background color, text size, and notification size. How do i do this? Is there a better way to do this than to use the notification node?

When I set the color, why does it only change the left border of the notification?

AI has taken me down this path with the ui-template node. Using Dashboard 2.0 BTW.

```auto
[
    {
        "id": "973707f243168d80",
        "type": "tab",
        "label": "Flow 4",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "4361077ac9a3f807",
        "type": "ui-template",
        "z": "973707f243168d80",
        "group": "",
        "page": "",
        "ui": "ff48cd83ca1ae463",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "/* Red / Critical */\n.big-red .v-snackbar __wrapper {\n background-color: #0090f8 !important; /* Full red background */\n min-width: 600px !important;\n min-height: 120px !important;\n}\n\n/* Green / Success */\n.big-green .v-snackbar__ wrapper {\n background-color: #0ff71a !important; /* Full green background */\n min-width: 500px !important;\n}\n\n/* ORANGE/ SEMI-Critical */\n.big-red .v-snackbar __wrapper {\n background-color: #f88d00 !important; /* Full red background */\n min-width: 600px !important;\n min-height: 120px !important;\n}\n/* Ensure text is readable on the dark colors */\n.big-red .v-snackbar__ content, \n.big-orange .v-snackbar __content, \n.big-green .v-snackbar__ content {\n color: white !important;\n font-size: 32px !important;\n font-weight: bold !important;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 160,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "70ae0ec4e289204b",
        "type": "ui-notification",
        "z": "973707f243168d80",
        "ui": "ff48cd83ca1ae463",
        "position": "top right",
        "colorDefault": true,
        "color": "#000000",
        "displayTime": "",
        "showCountdown": false,
        "outputs": 1,
        "allowDismiss": true,
        "dismissText": "Close",
        "allowConfirm": false,
        "confirmText": "Confirm",
        "raw": false,
        "className": "",
        "name": "red",
        "x": 830,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "44043e43750768b0",
        "type": "ui-notification",
        "z": "973707f243168d80",
        "ui": "ff48cd83ca1ae463",
        "position": "top right",
        "colorDefault": true,
        "color": "#ff8800",
        "displayTime": "",
        "showCountdown": false,
        "outputs": 1,
        "allowDismiss": true,
        "dismissText": "Close",
        "allowConfirm": false,
        "confirmText": "Confirm",
        "raw": false,
        "className": "",
        "name": "big-orange",
        "x": 850,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "6fd52d2854faa28f",
        "type": "ui-notification",
        "z": "973707f243168d80",
        "ui": "ff48cd83ca1ae463",
        "position": "top right",
        "colorDefault": true,
        "color": "#04ff00",
        "displayTime": "",
        "showCountdown": false,
        "outputs": 1,
        "allowDismiss": true,
        "dismissText": "Close",
        "allowConfirm": false,
        "confirmText": "Confirm",
        "raw": false,
        "className": "",
        "name": "green",
        "x": 830,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "b38c522a61d53a03",
        "type": "inject",
        "z": "973707f243168d80",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 280,
        "wires": [
            [
                "165e639299b48414"
            ]
        ]
    },
    {
        "id": "742d82204512d5b5",
        "type": "inject",
        "z": "973707f243168d80",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 340,
        "wires": [
            [
                "b947a681f831d3fb"
            ]
        ]
    },
    {
        "id": "93b0b68e27f57b91",
        "type": "change",
        "z": "973707f243168d80",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.class",
                "pt": "msg",
                "to": "big-red",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 610,
        "y": 220,
        "wires": [
            [
                "70ae0ec4e289204b",
                "48e6725bbb68349b"
            ]
        ]
    },
    {
        "id": "165e639299b48414",
        "type": "change",
        "z": "973707f243168d80",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.class",
                "pt": "msg",
                "to": "big-orange",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 610,
        "y": 280,
        "wires": [
            [
                "44043e43750768b0"
            ]
        ]
    },
    {
        "id": "b947a681f831d3fb",
        "type": "change",
        "z": "973707f243168d80",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.class",
                "pt": "msg",
                "to": "big-green",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 610,
        "y": 340,
        "wires": [
            [
                "6fd52d2854faa28f"
            ]
        ]
    },
    {
        "id": "48e6725bbb68349b",
        "type": "debug",
        "z": "973707f243168d80",
        "name": "debug 10",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 820,
        "y": 140,
        "wires": []
    },
    {
        "id": "da0abcc81dc53166",
        "type": "inject",
        "z": "973707f243168d80",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 220,
        "wires": [
            [
                "93b0b68e27f57b91"
            ]
        ]
    },
    {
        "id": "ff48cd83ca1ae463",
        "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": false
    },
    {
        "id": "69acb52704590921",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.29.0"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [27 March 2026 14:48 UTC](https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659/2 "2026-03-27T14:48:59Z")

</div>

It appears there is a bug in the notification node. If you use the browser tools to inspect the elements you will see that the node does not pickup the class from msg.ui\_update.class. In fact it also does not pick it up from msg.class. What is even worse, it does not even pick it up from class field in the node's config dialog.

There is a bug report for this already.

> <https://github.com/FlowFuse/node-red-dashboard/issues/1692>
>
> I'm trying to change the appearance of a notification node using CSS style defin…ed in a template node, which works fine.
> \`\`\`
> .nrdb-ui-notification .v-snackbar\_\_wrapper {
> background-color: red;
> border-left: 0px
> }
> \`\`\`
> Result -
> 
> !\[Image\](https://github.com/user-attachments/assets/5ffff67c-a769-478d-8183-fc9bf028b49f)
> 
> However... I need to specify the class in the notification node to ensure that the styling \*\*only\*\* applies to that node, and I don't seem to be able to do so.
> It has been \[discussed in the forum\](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884), and other members have suggested;
> 
> \> \_Inspecting the notification in the developer tools, I can see no sign of the the class. I suggest filing an issue\_
> 
> Without being able to confine the css to that node, it affects other notifications, such as the PWA pop-ups -
> 
> !\[Image\](https://github.com/user-attachments/assets/e6d150ea-4716-4c14-aafa-a5f1404ea010)
> 
> Example flow;
> \`\`\`
> \[{"id":"ffdc76785f8ce058","type":"group","z":"377bddeb0095cfd4","name":"Button with confirmation","style":{"fill":"#e3f3d3","label":true},"nodes":\["0946e16e5b47813b","1bdf3dbd393321d9","8a1e5c20a1fa0c97","6133763840c32655","ef3b0c92fe4e636f","2b40907b13fff3f5"\],"x":74,"y":114,"w":812,"h":122},{"id":"0946e16e5b47813b","type":"ui-button","z":"377bddeb0095cfd4","g":"ffdc76785f8ce058","group":"b1f57c00ab19b181","name":"","label":"button","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"\<h3\>Confirm Action\</h3\>\<p\>Press 'confirm' to complete the action \</p\>","payloadType":"str","topic":"","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":150,"y":155,"wires":\[\["1bdf3dbd393321d9"\]\]},{"id":"1bdf3dbd393321d9","type":"ui-notification","z":"377bddeb0095cfd4","g":"ffdc76785f8ce058","ui":"8c151b59721a8d9a","position":"center center","colorDefault":true,"color":"#000000","displayTime":"100","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":true,"confirmText":"Confirm","raw":true,"className":"confirm-action","name":"","x":325,"y":155,"wires":\[\["8a1e5c20a1fa0c97"\]\]},{"id":"8a1e5c20a1fa0c97","type":"switch","z":"377bddeb0095cfd4","g":"ffdc76785f8ce058","name":"","property":"payload","propertyType":"msg","rules":\[{"t":"eq","v":"confirm\_clicked","vt":"str"},{"t":"else"}\],"checkall":"true","repair":false,"outputs":2,"x":495,"y":155,"wires":\[\["6133763840c32655"\],\[\]\]},{"id":"6133763840c32655","type":"change","z":"377bddeb0095cfd4","g":"ffdc76785f8ce058","name":"change","rules":\[{"t":"set","p":"payload","pt":"msg","to":"topic","tot":"msg"}\],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":155,"wires":\[\["ef3b0c92fe4e636f"\]\]},{"id":"ef3b0c92fe4e636f","type":"debug","z":"377bddeb0095cfd4","g":"ffdc76785f8ce058","name":"debug 6","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":780,"y":155,"wires":\[\]},{"id":"2b40907b13fff3f5","type":"ui-template","z":"377bddeb0095cfd4","g":"ffdc76785f8ce058","group":"","page":"5f0bda35e5ab69ba","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":".nrdb-ui-notification .v-snackbar\_\_wrapper {\\nbackground-color: red;\\nborder-left: 0px\\n}\\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":305,"y":195,"wires":\[\[\]\]},{"id":"b1f57c00ab19b181","type":"ui-group","name":"snippets","page":"5f0bda35e5ab69ba","width":"13","height":"6","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"8c151b59721a8d9a","type":"ui-base","name":"Homeserver","path":"/dashboard","appIcon":"https://homeserver.forest-bicolor.ts.net/icon","includeClientData":true,"acceptsClientConfig":\["ui-notification","ui-control"\],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"5f0bda35e5ab69ba","type":"ui-page","name":"Examples","ui":"8c151b59721a8d9a","path":"/examples","icon":"home","layout":"grid","theme":"6a4b46dde830beb1","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":3,"className":"","visible":"true","disabled":"false"},{"id":"6a4b46dde830beb1","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px"}}\]
> \`\`\`

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [28 March 2026 08:56 UTC](https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659/3 "2026-03-28T08:56:11Z")

</div>

To get more flexibility in a popup you can put whatever widget (or widgets) you like in a Group and then configure the group to be of type Dialog. Then you can use a ui\_control node to pop it up or hide it as you want.

---

<div class="post-metadata">

**Author:** ![nearbyatom](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@nearbyatom](https://discourse.nodered.org/u/nearbyatom)\
**Post date:** [1 April 2026 18:10 UTC](https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659/4 "2026-04-01T18:10:01Z")

</div>

Yup. This worked. Thanks for the suggestions.

---

<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:** [15 April 2026 18:10 UTC](https://discourse.nodered.org/t/how-do-i-change-pop-up-notifications-background-color/100659/5 "2026-04-15T18:10:20Z")

</div>

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