Dashboard 2 CSS for slider label, and button face

General
1

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?

    image
    image884×484 15.6 KB

  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.

    image
    image382×155 2.79 KB

Any help please?

2

The indented beginning of the slider label seems to come from

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

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.

3

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

4

Regarding the slider label, that worked..thanks a lot

5

Setup one button group the way you like it, copy, paste, ...

6

You have a ready page, with everything set up, and once you want to change the color..thats the challenge..

7

Works for default colors

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

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.

9

It just takes to learn the CSS a bit.

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

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

11

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