Override table selected row style (background color) in Valo Theme

Flow
1

Using the new Valo theme I miserably fail to change the default selected table row style.

.v-table tr.v-selected {
    background: #466c90;
    color: #fff;
}

used to work with Vaadin 6 / Theme Reindeer, but with Valo it doesn’t.

Examining the generated Valo styles.css I tried the following, also without success:

.v-table .v-selected[class*="-row"]
 {
    background-color: #mySelectionColor;
    background-image: none;
    background-origin: border-box;
    color: $myFontColor;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

Changing the default selection color throug $v-selection-color works but has a lot of undesired “side effects”…

Can anybody help?

Best, Sascha

2

Actually,

.v-table .v-selected[class*=“-row”]
{
background-color: $mySelectionColor;
background-image: none;
background-origin: border-box;
color: $myFontColor;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

works. I outsmarted myself with a parentheses mess in my styles.scss.

Cheers, Sascha

3

This works except for the font color, do you know why? this is my code:

.v-table-overviewtable .v-selected[class*="-row"]
 {
background-color: $divider-color;
background-image: none;
background-origin: border-box;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
4

Hey Jose,

That should work. What does your browser’s inspector/dev tools say? Is the style overriden? Not applied?

5

the inspector say the style is applyed. Maybe this style is overdiding the selected style?

.v-table-cell-content {
color:$secondary-text-color;
font-size:14px;
font-weight:400;
}

21028.png

6

Yes, most definitely.

7

Hi, everyone!
I found the solution in another blog, you can add style names to your components and then, create custom component-specific selectors without OVERRIDING theme styles, it works:

.v-table tr.v-selected.v-selected { background: #8A8D8F; color: #F1F2F4; } :slight_smile:

p.s. it applies for any theme you want to use (I has been using Material Vaadin Theme).

8

I hope this help to you!

.v-table tr.v-selected.v-selected {
background: #8A8D8F;
color: #F1F2F4;
}