Overriding css widget

Flow
1

Hi vaadins guys,

I’m using some widgets and need to overide css widgets.
I’ve modified styles.css inside my custom them by adding

@import url(../reindeer/styles.css);

to import reindeer theme.

I’ve also tried to explicitly imported first the widget set by adding this :

@import url(../../widgetsets/<MyWidgetSet>/<add-on-widgetset>/styles.css);

as when we compile with gwt, widgetsets are placed outside themes directory in widgetsets directory.

It seems this method doesn’t work.

Has anybody succedeed in overriding an add-on css widget ?

Thanks

2

No one has already done that ?

Or maybe it’s impossible ?

If you need further explanations of my problem please tell me !

thanks

3

I’m not quite sure if I understand what you want to achieve.

If you want to customize your widget in a specific project using it, you can simply add the CSS rules to that project.

If you want your new widget to apply some CSS rules automatically whenever it is used, use the
stylesheet
 tag in the add-on GWT module file (see
GWT documentation
) and a public resource (essentially a directory called “public” under the directory with the GWT module, I don’t remember if it is automatically included as a public path or if you need to tell that in the GWT module as well). Put your add-on specific CSS in the public directory and refer to it as a stylesheet in your GWT module.

I don’t have an example at hand right now, and cannot recall the exact details.

4

Sorry to resurrect a 4 month old thread, but I think I’ve run into what the original post was describing…

It seems the add-on widget css files are included AFTER the main theme css file, which makes it difficult to override any add-on styles.

For example, I’m using the Popup Button add-on in my project, and here is what the generated looks like:

:

As you can see, my “styles.css” is included before “popupbutton.css”. When I try to override a particular style (e.g. “.v-popupbutton-popup”), my styles are superseded by the styles in popupbutton.css.

This sounds a lot like what the original poster was trying to describe (although I can’t tell for sure).

Am I doing something wrong, or is there some way to specify the load order of the different css files?

Regards,
Charles

5

This is unfortunate and true. The order is such because the Vaadin theme stylesheet link-element is generated to the initial HTML page coming from the server with the initial request, but each add-on stylesheet is loaded dynamically by GWT, and it appends them to the head-element, after the Vaadin theme.

The current workaround is just to use a slightly more specific selector in your theme, which will then override the add-on styles. An easy way is to prepend the element type to the selector (although this selector will stop working if the add-on implementor decides to change the element to some other).

div.v-popupbutton-popup {
    ...
    }
6

Good info, thanks. I’ll just add “div.” as a quick work-around.

Charles

7

Hi,

It was this exact problem i’ve tried to solve althought I’ve never tried come back to it.

I will do as u suggest to fixe this :slight_smile:

Thanks !

ps : sometimes it quick good to resurrect a 4 month thread if there is a better explanation :wink: