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.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

how to override vaadin addon's css OR how to change the order of css files

Peter Olah
1 decade ago Feb 06, 2012 4:55pm
Jouni Koivuviita
1 decade ago Feb 06, 2012 6:58pm

Well, currently you can’t. The order is so because most add-ons load their theme using GWT’s module descriptor, which adds the stylesheet after the initial render of the application HTML. So your only option is CSS “magic”. In most cases, just adding one extra “div” (element selector) before the copied selector is enough so that the specificity increases:

// Original
.v-addon-foobar {
   // Stuff you want to override

// Use this
div .v-addon-foobar {
   // Your overrides
Peter Olah
1 decade ago Feb 15, 2012 2:33pm
Mathias Clerc
1 decade ago Feb 16, 2012 12:21am
CK Wane
7 years ago Feb 09, 2016 10:50am
Anjali Jain
7 years ago Mar 01, 2016 12:27pm
Joacim Päivärinne
7 years ago Apr 01, 2016 3:23pm