# Dashboard 2 CSS for slider label, and button face
**URL:** https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753
**Category:** General
**Tags:** dashboard-2
**Created:** [28 October 2024 21:32 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753 "2024-10-28T21:32:19Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)
#### Post date: [28 October 2024 21:32 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/1 "2024-10-28T21:32:19Z")
Hello there, i have two quesionts regarding CSS in particular.
1. I can't get rid of that space infront of the slider. I cant get it aligned with buttons. Tried grind over html inspection, but could not find the correct class to affect. Anyone has any clue please?
2. Almost the same question, regarding buttons. I have several buttons, so if i want to chage color, its better to use CSS for it rather than loop through of them one by one. But i can't find the correct class to change the face color of the buttons in ON and OFF sates using CSS.
Any help please?
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [28 October 2024 21:53 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/2 "2024-10-28T21:53:58Z")
The indented beginning of the slider label seems to come from
```auto
.v-slider.v-input--horizontal {
align-items: center;
margin-inline: 8px 8px;
}
```
I'm not familiar with margin-inline so no idea what the effect would be if you override this.
> [@GIGS1975](#):
>
> I have several buttons
At first glance they seem to be button groups?
There is an option in the button group config to set the colour of the selected button. Untick "use theme colors" to choose your own.
---
### Author:  [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)
#### Post date: [29 October 2024 07:51 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/3 "2024-10-29T07:51:25Z")
Regardin the buttons, yes, there is the option, manually set it. But having 20 buttons on a page, it is not the best solution. I need some CSS to apply it to all the buttons, so i can easlily change color in one place.
Thanks anyway
---
### Author:  [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)
#### Post date: [29 October 2024 07:55 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/4 "2024-10-29T07:55:39Z")
Regarding the slider label, that worked..thanks a lot
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [29 October 2024 07:58 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/5 "2024-10-29T07:58:30Z")
> [@GIGS1975](#):
>
> yes, there is the option, manually set it. But having 20 buttons on a page
Setup one button group the way you like it, copy, paste, ...
---
### Author:  [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)
#### Post date: [29 October 2024 08:13 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/6 "2024-10-29T08:13:13Z")
You have a ready page, with everything set up, and once you want to change the color..thats the challenge..
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 October 2024 08:22 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/7 "2024-10-29T08:22:42Z")
Works for default colors
```auto
.nrdb-ui-button-group .v-btn-group .v-btn--variant-elevated {
--v-theme-surface: 1, 2, 3;
--v-theme-on-surface: 255, 254, 253;
}
.nrdb-ui-button-group .v-btn-group .v-btn--variant-elevated.v-btn--active {
--v-theme-primary: 253, 254, 255;
--v-theme-on-primary: 3, 2, 1;
}
```
---
### Author:  [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)
#### Post date: [29 October 2024 08:45 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/8 "2024-10-29T08:45:37Z")
this works, for overriding the default button face. Thanks
Actually i need to apply another color when the button is ON.
I think that is not achievable by CSS, or at least very hard to find.
SO when button is in OFF state i need it to be grey, and when its ON (so the other button, defien for "true" state) should be yellow. I think this is too complicated.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 October 2024 09:10 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/9 "2024-10-29T09:10:00Z")
It just takes to learn the CSS a bit.
```auto
.nrdb-ui-button-group .v-btn-group .v-btn--variant-elevated {
--v-theme-surface: 200, 200, 200;
--v-theme-on-surface: 0, 0, 0;
}
.nrdb-ui-button-group .v-btn-group .v-btn--variant-elevated.v-btn--active[value="OFF"] {
--v-theme-primary: 200, 200, 200;
--v-theme-on-primary: 0, 0, 0;
}
.nrdb-ui-button-group .v-btn-group .v-btn--variant-elevated.v-btn--active[value="ON"] {
--v-theme-primary: 255, 200, 0;
--v-theme-on-primary: 0, 0, 0;
}
```
---
### Author:  [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)
#### Post date: [29 October 2024 09:18 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/10 "2024-10-29T09:18:05Z")
Thanks, there is no problem with learning CSS syntax for me..i found difficalt to find wich class to apply to in Dashboard. Sometimes its evident when i open the page in firebug expector, but many times it is so deeply nested, that is hard to identify what class is for what. At least for me...But thank you for the help
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [12 November 2024 09:18 UTC](https://discourse.nodered.org/t/dashboard-2-css-for-slider-label-and-button-face/92753/11 "2024-11-12T09:18:18Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.