Change widget colour for specific page

[Sirhc]

Hello

I have a default colour set for my node red dashboard widgets. On a particular tab however where I have a slider widget, I need to override this colour so I can change the colour of the red dot on the slider.

I have a style node setup, but not sure of the code. I tried something like this, but it didn't work:

#nr-dashboard .masonry-container ui-card-panel#MasterDimmer_MasterDimmer {{
background-color: #FFFFFF;
}

Where MasterDimmer is the tab.

See below circled in red for the colour I am trying to change:

[jbudd]

Since your picture shows non-standard colours, I presume that you are already overruling the default styling and don't need step by step instructions.

To give different styling to just this slider, in it's config give it a custom class, let's say "special".

Use a template node with style tags to style the element within class .special

<style>
.special <more css selectors needed here> {
   background-color: #ffffff
}
</style>

Use your browser tools to pin down the precise CSS selectors needed.
Note that the slider widget uses a pseudoclass ::after and you need to style this pseudoclass.

And when you get it working:

[hotNipi]

Example:
For tab named "Colors" all slider thumbs (+active state) will be orange.

See that the selector starts with #Tab_Colors
Tab name can have spaces. In that case you'll need to join words with underscore.

My Page will be then #Tab_My_Page

<style>
    #Tab_Colors .nr-dashboard-slider .md-thumb:after{
        background-color: orange;
        border-color: orange;
    }
    #Tab_Colors .nr-dashboard-slider .md-focus-ring {
        background-color: orange;
    }
</style>