We’re going to sketch in the photoshop and then cut and create a new theme for our new application. Since this is our first attempt for complete new theme creation, are there any requirements or underwater stones we should be aware of when designing styles of new theme elements in initial (photoshop template stage) ?
I mean, something that cannot be rendered or rendered properly in vaading, etc, or we can give our designer the freedom for creating a photoshop template ?
Great news keep us posted!
Who would be brave enough to say that there are no underwater stones? ;)
In theory any CSS should be possible, but you might want to be careful with usage of margins and borders for some DOM elements as
Well, at least for now I can tell our designer that she’s free to imaginate all these nice looking buttons, tables, lists, etc and draw them in a photoshop for further cutting into css and png’s.
There will be 2 persons involved into the process - one is our prepress designer to create an idea and photoshop template and a second is a css guru, to cut this template into png pieces and write the css itself.
We plan to change look and feel to all main controls, but I think we still need to inherit our css from reindeer theme, is this ok ?
You probably should use base theme instead of reindeer.
Hi Dmitri, great to hear someone else is brave enough to dive into more advanced themeing!
As Joonas said, it is better to start from the Base theme (included in the package, just import “VAADIN/themes/base/styles.css” in your theme), since Reindeer contains some quite complicated selectors that you’d have to override in order to change the looks.
Reindeer also has many browser specific adjustments, which you’d have to override with browser specific selectors such as .v-sa and .v-ie.
Base theme then instead tries to keep out of the way as much as possible, but still specifies the most crucial styles, so you are free to just implement the “eye-candy”, i.e. fonts, colors and such. All styles that the client side rendering engine needs and expects are already there.
But if you feel there’s too much work to do with the Base theme, I suggest you start with Runo and work on top of that, it is much less complex than Reindeer.
And then to the “underwater stones” section.
Like Joonas said, do not use margins (as in CSS margins, Vaadin layout margins are another concept). This goes for all component root elements (i.e. the main element of a component, with the main CSS class name e.g. v-panel). Reason: our layouts calculate most of the component sizes into pixels, and they don’t measure component margins when they calculate the accommodated space from them. A major lacking in the framework, IMO, but I’ve been able to live with it, and I hope you’ll be, too.
Another catch with the basic layouts is that they do not allow the contained components to overflow out of their allocated “layout-slot” (they’re all overflow:hidden). So if you would for instance want to use the outline property on a button, it’ll get clipped, since the layout slot is exactly as big as the button dimensions. This goes for at least Vertical, Horizontal, Form and Grid layouts. Absolute, Css and Custom layouts should not exhibit the same clipping.
One more: since the layouts rely heavily on size calculations taken directly from offsetWidth and offsetHeight on the component root elements, specifying borders and paddings on all of those elements is not possible. Some components take them into account, others do not.
If you’re unsure about something working, you can look from the Reindeer and Runo theme how stuff is done, and trial-n-error is always a valid way to go as well 
Firebug and Safari’s Inspector are your friends!
I’m more than eager to hear all problems you encounter during this process, since I don’t know anyone else than myself who would’ve done a completely new theme (all others have based theirs on either Runo or Reindeer).
Jouni, thanks for such detailed explanation, this will be a good startup help to our css person and for me as well. I’ll let you know about the progress of this task.
Thanks jouini…great sharing
Many themes are obtained from the websites…