How to integrate theme

Flow
1

Hello,

on your add-on page you offer some themes.

But they are not supportet for Vaadin 7.

I ask me how they are integrated into Vaadin 7 projects or Vaadin 6 projects have no migration path (getting lost/frozen?).

I tried to download the theme from demo.vaadin.com/chameleon-editor that looks more modern.

I tried to integrate it into the application and red many, many blogs and tips and tricks. And sat here days…(not hours).

But it doesn´t work. There are many opinions and work arounds in the internet. But no real how-to.

Isn´t there a general how-to-integrate-a-downloaded-theme-to-vaadin-7-guide?

I have the impression that there is no how-to-documention. The Vaadin 7 book is nice but it is not applicable for the download things.

All the themes are looking good. But it seems to be imposible to get them run.

A sample application with all its necessary files and codes could be fine…

Regards

Alex

2

Hi,

The Chameleon theme color editor isn’t Vaadin 7 compatible yet, as you noticed. I wrote instructions yesterday how to make it work. You can
find them here
 (just noticed you’ve posted there also).

As for general migration options for themes, there’s not much documented I guess. Some pointers:

  • All of the widget root elements are now using border-box sizing (i.e. borders and paddings are included in the elements width and height, so that 100% actually means 100% regardless if there are any borders or paddings specified).

  • Most of the widgets are also inline-blocks by default, meaning they will be side by side inside a CssLayout, rather than stacked like in Vaadin 6 (this can be reverted easily if needed)

  • Because of the inline-block + border-box + HTML5 doctype combination, Internet Explorer started behaving irrationally (IE9 and IE10 in particular, IIRC), which forces us to use the only proper workaround/fix we could find (the research took a few weeks), resulting in font-size: 0; being added to some component container elements. This fix makes em based font/element sizing practically impossible, so try to stick to other units instead.

  • Vertical and horizontal layouts are completely revamped, and the way margins and spacings are specified has changed. For margins, you can just use padding on the root element of the layout. For spacing, use the .v-spacing selector and set it’s width and height for horizontal and vertical spacing respectively.

Those are things of the top of my head. If you have a particular problem, just ask and we’ll try to help!

3

Hello Jouni,

thanks for your help! Tried your and another solution:
thread

Alex