Is there explanation of how to override CSS?


I am really stuck trying to figure out how themes/custom CSS work. I have read the tutorials and the Vaadin book, but it really doesnt explain how styling works in Vaadin.

For example, I am trying to customize the Button to look like a link. I saw in the example that I can set the style property Button.STYLE_LINK. Now this works fine but then I saw that the IDE says that this is deprecated. So I started writing own CSS to replicate that, copying stuff from the base styles, but could not get it to behave as a link.

What I am looking at is some detailed concepts/fundamentals on how to go about styling widgets, like the button.
if I define my own style for a button say “mine”, and do label.setStyleName(“mine”); then what exactly do I have to override? And is this how I override it?
.mine .v-button-caption {
text-decoration: underline;
background: none;
font-size: 20px;
color: blue;
This doesnt work. :frowning:

If I were to do this using plain old CSS/HTML this would be a 10 minute task.

I am trying to get our folks to switch to Vaadin, but styling seems to be a huge show stopper. Any light on this subject will be deeply appreciated.

Try using a NativeButton instead of a button. “Vaadin buttons” are actually quite complicated to style. It is regular CSS, but quite sophisticated. You will find that using a CSS debugger as in Chrome or Firebug is often necessary to figure out the whole picture.

Using a NativeButton instead of a “vaadin” button will make your life easier.

Thanks for your reply.

Button was just one example. What about the other stuff [labels, tabs, ]
? Is styling equally complex?

I was so excited about Vaadin, but my enthusiasm is slowly fading. After the mighty CSS battle, I just found out that Vaadin apps are not SEO friendly. So I am guessing, Vaadin is useful for pure functional apps but not for content oriented apps that require to be indexed and found by the search engines.

Are there other similar frameworks that will allow SEO friendly pages? I looked at ICEFaces, but all that XML made me nauseated.

In my experience, if you use chrome to show you the computed style for the element you are trying to style, and use “addStyle()” to give it a style name you are attempting to modify, things are fairly easy to fix, Buttons being the exception.

Regarding SEO friendliness, the issue is true of all AJAX-based sites. I don’t think that the ink is dry, in general, on how to handle searching/indexing of dynamically generated sites (the problem is actually quite tricky). There are some RFPs out with some recommended conventions and best practices, but I will leave the fine folks at Vaadin to state their recommendations. Perhaps the Navigator7 add-on could help you as well.

There is a way to make AJAX app
for google

In short, it advices specal syntax for: uris!key=value
And static html page should be accessible by:

For generating static snapshoots google advises to use HtmlUnit

if you look at (which is baserd on navigator7), you can see that seo friendly uris syntax is used (#!), but i can’t find how to get static version for pages.

I suppose the issue of crawlability is a little off-topic from the original post but, as far as the hashtag strategy for AJAX apps, that works as long as you are using a REAL URL defined on a REAL hyperlink, right? I mean, if you are using a Vaadin Button (styled to look like a hyperlink), no such URL would be visible to the crawler to crawl. Sure, after the user clicks the Button your server-side code can set a URI fragment but the Google crawler doesn’t know there’s an event listener to trigger. Right?