Vaadin upgrade +theme

Flow
1

Hi!

We running vaadin application in liferay portal.
We have own custom vaadin theme. After we upgraded vaadin version to 6.4.7 we can’t see anymore all theme styles in vaadin application. Everything work well in old vaadin version (6.2.something). When I debugging in firebug I can see our custom theme but almost every properties has overridden in /portal/html/VAADIN/themes/liferay. It is funny that I first override liferay theme in our custom theme and after that liferay theme override our custom theme. We are not did any changes to themes or any config files. Liferay theme is bundled to vaadin-6.4.7 package.

2

Hi!

The “liferay” theme bundled with Vaadin was earlier just an extension of “runo” with some very minor fixes. It was not very Liferay like and new portlets did not really fit well with the rest of the portal. It was therefore replaced by a Liferay/Alloy UI like theme in Vaadin 6.4.

If you have extended the old “liferay” theme you should get pretty much the same theme by extending the “runo” theme in Vaadin 6.4. There were some extra CSS in the “liferay” theme that you might need to add to your theme. You can find the old theme here: http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/liferay/styles.css?rev=12465&format=txt

3

Hi Artur!

My point is not liferay theme. I known that liferay theme change fonts and background colors how it is in liferay. Actually I tried our custom theme inherited runo or reindeer themes, but my problem seems still exists.
Below attachment is taken from firebug. Maybe it explain beter (in that time I used runo what you recommended).
11483.png
11484.png

4

Can anybody help? We use vaadin 6.4.7 and gwt 2.0.3 version. This look like it is bug because inherit go wrong order.

5

CSS does not care about the order of imports, just about how specific the selectors are. You need to use a more specific selector to be able to override the other selector.

6

Is it implementation of themes changed between 6.2 and 6.4.7? Everything work well in 6.2.
If you look screenshot what I send earlier and below sample you can see that I
set button background color and image, but somehow runo theme override all of them.
So what I have to do to set button style without call setStyle for all buttons in code?

This is sample of my custom theme:


@import url(../runa/styles.css);

.v-button,
.v-disabled.v-button {
        height: 22px;
        padding: 0 0 0 3px;
        background-color: transparent;
        background-repeat: no-repeat;
  background-image: url(img/button.png);
  -background-image: url(img/button.png);
  background-position: left -0px;
        border: none;
        cursor: default;
        -moz-background-origin:padding;
        -moz-border-radius-bottomleft:0;
        -moz-border-radius-bottomright:0;
        -moz-border-radius-topleft:0;
        -moz-border-radius-topright:0;
        -webkit-border-radius:0;
        -border-radius:0;
        }

.v-button-wrap,
.v-disabled.v-button .v-button-wrap {
        display: block;
        height: 22px;
        padding: 4px 15px 0 9px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: right top;
  background-image: url(img/button.png);
  -background-image: url(img/button.png);
  background-position: right -22px;
        }

.v-button:active, .v-button.v-pressed {
        background-image: url(img/button.png);
        -background-image: url(img/button.png);
        background-position: left -44px;
}

.v-button:active .v-button-wrap,
.v-button.v-pressed .v-button-wrap {
        background-image: url(img/button.png);
        -background-image: url(img/button.png);
        background-position: right -66px;
}


.v-button-caption {
        color: #333333;
        text-shadow: none;
        font-weight: bolder;
        font-size: 10px;
        line-height: 14px;
        }

.v-button.v-button-link,
.v-button.v-button-link:focus,
.v-button.v-button-link:active,
.v-button-link.v-pressed,
.v-disabled.v-button.v-button-link,
.v-button.v-button-link .v-button-wrap,
.v-button.v-button-link:focus .v-button-wrap,
.v-button.v-button-link:active .v-button-wrap,
.v-button-link.v-pressed .v-button-wrap,
.v-disabled.v-button.v-button-link .v-button-wrap {
        background: transparent;
        height: auto;
        padding: 0;
        cursor: pointer;
        line-height: inherit;
        }
7

Yes, this is the case, I’m sorry to inform. I made some large theme changes in 6.3 (iirc), button’s theme being the one affected the most.

There’s an open ticket in our Trac about a similar case with our own Address Book tutorial theme. I’ve added a comment there that outlines some of the proper selectors to override:
#5455: AddressBook tutorial buttons looks regression
.

The main relevant change is that the button’s background image no longer resides in the
.v-button
 element, but in the
.v-button-wrap
 element instead.


Edit
: And now that I looked your CSS a bit closer, your theme gets overridden for the fact that Artur already outlined: Runo’s selector is more specific than yours. Change

.v-button-wrap,
.v-disabled.v-button .v-button-wrap

to

.v-button .v-button-wrap,
.v-disabled.v-button .v-button-wrap

and things should improve.

8

Thanks for information!