CSS rules order: Vaadin always first?

Flow
1

Another dummy question: I have my own style.css in my theme folder. The first statement imports Reindeer.

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

Then I try to change the color of a button having the style “link”.
But I’ve the impression that I won’t be able to do it, because reindeer/styles.css statements are declared before my statements (the css @import must be at the top of my css file).

Screenshot example in firebug:

http://screencast.com/t/2Xmtburo6PZ

In this screenshot, you see the html around the button link (Vaadin generated).

<div class="v-button v-button-link link v-button-headerLink headerLink" tabindex="0" role="button">
  <span class="v-button-wrap">
    <span class="v-button-caption">logout</span>
  </span>
</div>

I’ve found no style/element combination that overrides the Vaadin color.
In the screenshot, the first style on the top comes from Reeinder. My style (with color: red) comes always after, even if I’m very specific (span.v-button-caption, is it possible te be more specific?)

If I remove the @import, the link turns red. But I loose reindeer theme.

Question: How am I supposed to do?
I feel like in a dead end. If only it was possible to put the @import at the end of my css file…

Many thanks.
John.

2

Hi John.

In CSS the latest statement is taken as the most important one, so as long as the import reindeer statement is the first row in your styles, your css will always override it. The problem is, as I already answered in one of your other threads today, is how specific you are.

Reindeers “.v-button-link v-button-caption” (two levels) is more specific than yours span.v-button-caption (one level) so that is probably the reason why this is happening. Try changing your css from “span.v-button-caption” to “.v-button-link span.v-button-caption” and it
should
 start to work. :wink: Jonatan gave a good
link on this topic
 on another
thread
 today.

Regards,
Jens

3

You are completely right. It works now, the link is red.
I’ve to train my CSS muscles, thank you for the link.

4

I have firebug installed. I’m not sure how I can view the actual html that Vaadin generates. I am assuming this is injected into the page, like an innerhtml kind of thing? I was just wondering as in the previous post the author includes some html that looks like it was Vaadin generated.

Thanks

5

Vaadin sends updates to screen in JSON format that describes UI on a logical level. This is quite a bit more compact than sending HTML. DOM is generated programmatically - no HTML parsing is needed at all.

You can inspect the resulting DOM tree with Firebug. You can even take snapshots of the tree and serialize them as HTML.