# Apply styles to individual ui nodes (dashboard 2)
**URL:** https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [4 May 2025 19:20 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884 "2025-05-04T19:20:52Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [4 May 2025 19:20 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/1 "2025-05-04T19:20:52Z")
In a template node I have the following css;
```auto
.nrdb-ui-notification .v-snackbar__wrapper {
background-color: red;
border-left: 0px
}
```
...which adds a background colour to a notification node, and works.
However, I have a number of notification nodes, and I only want to apply the style only to one of them, so tried;
```auto
.confirm-action .nrdb-ui-notification .v-snackbar__wrapper {
background-color: red;
border-left: 0px
}
```
and added `confirm-action` to the `class` field in the notification node, however it does not apply the style.
I'm obviously approaching this incorrectly 🤔
---
### Author:  [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [4 May 2025 20:10 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/2 "2025-05-04T20:10:29Z")
Hi @Paul-Reed
Try it in reverse.
Each css class in your selector, is applied in ancestry order.
Its possible:
`.v-snackbar__wrapper` is a descendant of `.nrdb-ui-notification`
BUT both not a descendant of `.confirm-action`
You could just try `.confirm-action` on its own.
I don't do dashboard-ing much at all, so apologies, if this isn't the cause
it may even be at the same level the targeted classes sit
```auto
.nrdb-ui-notification .v-snackbar__wrapper.confirm-action
```
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 May 2025 20:21 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/3 "2025-05-04T20:21:30Z")
It seems that the class `confirm-action` is not applied, at least I can't find any sign of it.
Which explains why styling it is ineffective.
Seems to be a 'non-positive undocumented feature' in the notification node.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [4 May 2025 20:26 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/4 "2025-05-04T20:26:09Z")
> [@marcus-j-davies](#):
>
> You could just try `.confirm-action` on its own.
Already tried that, and also `.nrdb-ui-notification .v-snackbar__wrapper .confirm-action` and neither work.
---
### Author:  [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [4 May 2025 20:34 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/5 "2025-05-04T20:34:48Z")
What if you use only the class you specify
And adjust the importance of the rule?
```auto
.confirm-action {
background-color: red !important;
border-left: 0px !important;
}
```
Failing that, I’m not sure (I still use DB1)
So I’ll leave it to more experienced staff 😁
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [4 May 2025 20:57 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/6 "2025-05-04T20:57:18Z")
> [@marcus-j-davies](#):
>
> What if you use only the class you specify
> And adjust the importance of the rule?
Thanks for suggestions Marcus, but no, makes no difference.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [4 May 2025 20:59 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/7 "2025-05-04T20:59:53Z")
> [@jbudd](#):
>
> It seems that the class `confirm-action` is not applied, at least I can't find any sign of it.
I think you are right. Inspecting the notification in the developer tools, I can see no sign of the the class. I suggest filing an issue.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 May 2025 21:14 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/8 "2025-05-04T21:14:34Z")
I'm not doing that, sorry.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [4 May 2025 21:15 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/9 "2025-05-04T21:15:19Z")
> [@jbudd](#):
>
> It seems that the class `confirm-action` is not applied,
If there is no clarity from the flowfuse team, I'll raise an issue tomorrow.
> [@Colin](#):
>
> I think you are right. Inspecting the notification in the developer tools, I can see no sign of the the class. I suggest filing an issue
As above, thanks both.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [5 May 2025 09:46 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/10 "2025-05-05T09:46:54Z")
Another reason why I need to target a specific notification node, is that it also styles the PWA popups, which of course I don't want to happen.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [5 May 2025 11:13 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/11 "2025-05-05T11:13:32Z")
I played with the "Accept raw HTML" setting. This is the best I could come up with.
It ought to be possible to hide the left hand margin but I couldn't find a way.
```auto
[{"id":"3076f1e5dca755a0","type":"ui-notification","z":"2bb77cea1390576c","ui":"d45641ed6d39fea1","position":"center center","colorDefault":true,"color":"#000000","displayTime":"0","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":true,"confirmText":"Confirm","raw":true,"className":"","name":"","x":560,"y":180,"wires":[[]]},{"id":"ef3dd5e59aa26180","type":"inject","z":"2bb77cea1390576c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"The sky is falling!","payloadType":"str","x":190,"y":180,"wires":[["95a98d0b35a72e6d"]]},{"id":"95a98d0b35a72e6d","type":"template","z":"2bb77cea1390576c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"
{{payload}}
","output":"str","x":380,"y":180,"wires":[["3076f1e5dca755a0"]]},{"id":"d45641ed6d39fea1","type":"ui-base","name":"base","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":5,"showDisconnectNotification":false}]
```
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [5 May 2025 18:12 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/12 "2025-05-05T18:12:32Z")
Thanks @jbudd, getting closer!
However, I'll raise an issue as it maybe just a bug that could be quickly fixed (and maybe not 🥴)
>
>
> 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":"\Confirm Action\\Press 'confirm' to complete the action \","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"}}\]
> \`\`\`
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 June 2025 18:13 UTC](https://discourse.nodered.org/t/apply-styles-to-individual-ui-nodes-dashboard-2/96884/13 "2025-06-04T18:13:11Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.