I’m a bit new to Vaadin programming, so please bear with me if this has been asked before - the search function in this forum didn’t give any results, chapter 6.7 of the “Book of Vaadin” doesn’t have any info, and the API docs don’t seem to mention CSS at all…so I’m out of ideas.
I can’t seem to find a central document which describes the CSS properties used by the various Vaadin components. Although I’m specifically looking at how to style the height of Vaadin sub windows (the default is a pretty darn fat black bar), I have other stuff that I’ll have to style and am looking for an easy place to look.
This is a small known problem that the CSS structure is not very well documented. The Cheat Sheet mentions the main CSS class of each component, and the book sections on most components have a CSS styling sub-section. The section 6.7 (sub-windows) that you mentioned is one that is missing the styling sub-section. I am actually considering to leave those out from the printed book altogether, as they are something that you usually need during development, when you can access the web version of the book.
I’m not sure if it is even useful to document the CSS styles in much detail, because it is usually much easier and faster to look them with FireBug or a similar tool than from documentation. However, this process isn’t documented very well either, so it would probably be useful to explain it better in the themeing chapter.
I don’t need much detail, but it would be nice if you’d list somewhere all the allowed styling properties for a given component. I have a Swing/Java background. Although I saw mention of Firebug in parts of the Vaadin book, I thought it was mainly for debugging purposes - not a must-have to discover styling properties. I will install it and hope it’s obvious to someone without much CSS/HTML background.
Back to the question that motivated my post: how do I change the height of the window title bar?
You typically need to know a bit more detail about the sub-elements of the components, so using Firebug (or similar) is usually necessary.
There’s nowadays a built-in tool in Firefox, so Firebug is not absolutely necessary. Just right-click on an element and select “Inspect element”. It can also show the CSS styles. There’s a similar tool built-in in Chrome. You will anyhow need to use such tool to see what definitions the used base theme (such as Reindeer) has and make your CSS (or Sass) according to that.
The book has some documentation of the CSS class names for most components, such as for
Panel here .
The sub-window caption is inside a v-window-outerheader element (which you can easily see with Firebug), so you should be able to set its height with something like:
.v-window-outerheader {
height: 100px;
}
Some heights can be tricky to set, especially if the background is an image that has fixed height.