# Change widget colour for specific page

**URL:** https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736
**Category:** Dashboard
**Created:** [15 December 2023 09:00 UTC](https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736 "2023-12-15T09:00:55Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [15 December 2023 09:00 UTC](https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736/1 "2023-12-15T09:00:55Z")

</div>

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:

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

---

<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: [15 December 2023 10:21 UTC](https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736/2 "2023-12-15T10:21:56Z")

</div>

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

```auto
<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:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6fbf46f38e55317494df7d113d2844176a5fc99e.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [15 December 2023 11:48 UTC](https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736/3 "2023-12-15T11:48:47Z")

</div>

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`

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

```

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [17 December 2023 15:48 UTC](https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736/4 "2023-12-17T15:48:42Z")

</div>

A post was split to a new topic: [Incorporate a slider into a button](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782)

---

<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: [31 December 2023 15:49 UTC](https://discourse.nodered.org/t/change-widget-colour-for-specific-page/83736/5 "2023-12-31T15:49:28Z")

</div>

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