First of all, what a wonderful toolkit. Cant believe I had been living in the misery of coding Javascript+HTML for so long… You guys ROCK!!!
My question:
So, I have followed the instructions and created a custom theme and am able to change properties via CSS. However, no matter what I try, I just cant seem to control the borders. For some, I want to hide them and for some I want to increase their width.
Is it not possible to change the border? Is it hard coded?
Eg: I added a tabsheet and want to remove the borders. The vertical layout seems to be the parent container, so I tried:
.v-verticallayout {
border: none;
border-color: none;
}
It doesnt work, tried for tabsheet and other child component, but just cant get rid of the border. Please help.
No borders are “hard coded”, they’re all just regular CSS, which you can override in your own custom theme (extending the built-in themes).
Note, though, that the borders might not be specified directly for root element of a component. Often they are specified for some inner element of the component. The borders might even be implemented as a background image and not CSS borders.
Layouts do not have any borders specified for them, and they in fact don’t support CSS borders at all.
To make it easy to see what should be overridden, use tools like Firebug and Web Inspector, they’re invaluable.
Thanks for your response. I was able to identify the borders using firebug.
One feedback I have is that the entire themeing concept for vaadin needs to be made simpler. It is extremely hard to get the UI to look as one would want it to. Perhaps its my little knowledge of Vaadin, but it took me four times as much time to customize a widget vs plain old CSS/HTML I know there is a CSSLayout class but that defeats the whole purpose of keeping functionality away from the LAF. If the time I save developing functionality is then spent in refining the UI, then the value proposition of Vaadin is negated.
For people who are happy with the default theme, it wont be an issue, however most time I end up creating custom branded LAF for my clients. Beats me why everyone cant be happy with one thing.
Also it would be a good idea to provide a RAW theme [ie with no borders, bg images, colors etc]
and a styles.css [with minimum empty CSS classes]
vs the current mechanism of inheriting from a theme. This way I can give the CSS template to the graphics designer, who can create a mock up of what the LAF ought to be and that can then be plugged right into Vaadin. Maybe all this wont be necessary once the IDE designer is functional and on par with other GUI based IDE’s to control the LAF precisely [eg: Netbeans]
.
Some of the problems in themeing will be addressed in version 7 (development starting soon). Hard to say exactly what at this point, but themeing in general at least.
I assume you were extending the Reindeer theme, which is indeed very complicated/sophisticated in the way it is built and quite hard to override on some parts, mostly due to just plain CSS being a beast to maintain in such a large context. The Runo and Base themes are easier to override.
CSSLayout doesn’t really help much, it only makes it easier to override styles without having to know a specific selector, and you can only style the root element of a component with that (which is most of the times quite restrictive as I pointed out previously). I personally have never used the getCss method of it. A great layout in any case, makes styling magnitudes easier than with other layouts.
Well, that’s what we end up doing for nearly all of our clients as well, so I feel your pain. I think it’s somewhat funny, that everything needs to be branded and made look different on the web. I guess most would not complain if a regular Windows/OS X application looks like a native app. On the contrary, it is considered a good thing, that all applications look alike.
There is a barebones Base theme that you are free to use as a starting point for your own theme. Both Reindeer and Runo extend from Base. The Base theme tries to stay out of the way as much as it can, only providing the absolute essential styles to make the application work. The styles themselves are really really simple and easy to override (well, as easy as CSS gets).
And to be absolutely puristic about it, you’re not obligated to inherit/extend any theme if you don’t want to. You’re free to start from completely scratch, but that’s not recommended since the client side rendering engine expects and needs some styles to work correctly which are not documented anywhere except in the Base theme.
There is no “skeleton” for the available selectors, though, but that might be a really good idea, so everyone could learn just by looking at those empty selectors what is available to styling.
I would be very skeptic about the Visual Designer ever touching on the theme. The main purpose if it will be just laying out components and adding style names, not modifying the theme. Maybe a little CSS can be modified directly there, but I’m not so sure about that either.
Lastly, all ideas/wishes/recommendations are welcome on our
UserVoice page, feel free to start a topic there!
