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

Flow
1

hello vaadiners

How can I override an addon’s css?

According to firebug the order of css files is as follows:

  • my themes css file(VAADIN/themes/mytheme/styles.css)
  • styles.css from the widgetset (VAADIN/widgetsets/bla bla/styles.css)
  • AFTER THOSE comes the addon’s own css files (…/stepper/stepper.css)

so if I copy-paste a style definition from the addons original css file to my css themes css file (the first css file) to change it to my taste it will be overriden by the original style definiition (in the 3rd css file)

So how can I change this addons look and feel OR in other words How can I change the order of css files to make my custom themes css file load last so this way I can easily override EVERY css styles I want without using css magic (!important, specificity etc)

2

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
}
3

in connection with the div selector: Is it for sure that a container div is generated for every vaadin addon?

finally I used the !important keyword instead of additional selectors

But I think your solution is good as well :slight_smile:

4

It always work as it is pretty sure that the component is put into a layout or a window, which means that it is into a div at some point.

5

Thank you Jouni :wink:

6

Hello All,
Please help me!!
my inline css code is:
.login .v-accordion-item-caption > .v-caption {
background: transparent;
}

now I want to replce it, so according to the above solution, I have applied all three below options: But nothing works.

  1. div .v-accordion-item-caption > .v-caption {
    background: rgba(206,206,206,0.8);
    }

  2. div .v-accordion-item-caption >div .v-caption {
    background: rgba(206,206,206,0.8);
    }

  3. .v-accordion-item-caption >.v-caption {
    background: rgba(206,206,206,0.8);
    }

Thanks
Anjali

7

Hey Anjali,

.v-accordion-item-caption > .v-caption is the correct way to go about it if you’re using Valo. For example:

@import "../valo/valo.scss";

@mixin <your-theme-name> {
  @include valo;

  .v-accordion-item-caption > .v-caption {
    background: rgba(206, 206, 206, 0.8);
  }
}