Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Different CSS for TabSheet and Layout
Hi,
i am trying to change the color of the TabSheet Tab-Caption and the Caption of an Layout for Example HorizontalLayout.
For now i already had this, which worked fine for the Tabs:
.v-tabsheet-tabitem .v-caption {
background: none;
color: #ffffff;
font-weight: bold;
font-size: 16px;
}
Now i wanted to display the captions on my Layouts and Tables.
.v-widget .v-caption .v-captiontext {
padding-bottom: 15px;
background: none;
color: #0072c6;
font-weight: bold;
font-size: 16px;
}
This CSS works for its own, but it affects also the Tabsheet Caption.
I need to have all Layouts and Tables the Same Caption and the TabSheet a different.
Anybody got any help on that ?
Thank you
Hi!
I'm very, very late with this answer, but in case you (or someone else) still has problems with this, the trick is to make the tabsheet caption style more specific to grow it in importance in comparison to the generic widget caption styles. So e.g. .v-tabsheet .v-tabsheet-tabitem .v-caption .v-captiontext {...} should override .v-widget .v-caption .v-captiontext {...}.