Apply styles to individual ui nodes (dashboard 2)

Dashboard
1

In a template node I have the following css;

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

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

2

Hi @Paul-Reed

Try it in reverse.
Each css class in your selector, is applied in ancestry order.

Screenshot 2025-05-04 at 21.06.10
Screenshot 2025-05-04 at 21.06.10697×258 24.6 KB

Its possible:

.v-snackbar__wrapper is a descendant of .nrdb-ui-notification
BUT both not a descendant of .confirm-action

Screenshot 2025-05-04 at 21.08.56
Screenshot 2025-05-04 at 21.08.56629×281 24.4 KB

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

Screenshot 2025-05-04 at 21.12.00
Screenshot 2025-05-04 at 21.12.00675×265 22.2 KB

.nrdb-ui-notification .v-snackbar__wrapper.confirm-action
3

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.

4

Already tried that, and also .nrdb-ui-notification .v-snackbar__wrapper .confirm-action and neither work.

5

What if you use only the class you specify
And adjust the importance of the rule?

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

6

Thanks for suggestions Marcus, but no, makes no difference.

7

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.

8

I'm not doing that, sorry.

9

If there is no clarity from the flowfuse team, I'll raise an issue tomorrow.

As above, thanks both.