Custom CSS Style not applied to Label ?

Flow
1

In eclipse helios, using the latest VAADIN, I created a new theme, subclassing the reindeer theme. I modified the styles.css file in the new theme directory to be:


@import url(../reindeer/styles.css);
.mylabelstyle {
    font-size: 25px;
    font-weight:bold;
    line-height:normal;
}

Then, in a vertical layout, created a new label and attempted to apply the custom style:


Label myLabel = new Label("This is a custom css Label with mylabelstyle");
myLabel.setStyleName("mylabelstyle");
vLayout.addComponent(myLabel);

The style of the label remains unchanged, in firebug, the label appears as:


<div style="height: 18px; width: 890px; overflow: hidden; padding-left: 0pt; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-label v-label-mylabelstyle mylabelstyle" style="width: 890px;">This is a custom css Label with mylabelstyle</div>
</div>
</div>

What am I missing ??

I also attempted:


.v-label-mylabelstyle,
.v-label mylabelstyle {
    font-size: 25px;
    font-weight:bold;
    line-height:normal;
}

and


@import url(../reindeer/styles.css);
mylabelstyle {
    font-size: 25px;
    font-weight:bold;
    line-height:normal;
}

As well as various other simple changes, color, weight, size. The css style is never reflected on my page.

2

It should work that way. At least it does in
this example
.

You should be able to see in the right left-side panel in Firebug if your rule matches the element and if some style rule overrides your rule. If that happens, you need to add more specificity (more specific selector) to your rule. The Label shouldn’t need it, I think, as it works in the above example just OK.

I hope that you also set the theme with setTheme(), you can check that the correct styles.css is actually loaded in the Net tab in Firebug.

3

Hi Marko -

I have set my theme (and am able to load other resources like images from my theme, with no problem). I checked the CSS tab in Firebug, and my styles.css shows there with the contents as expected.


@import url(../reindeer/styles.css);
.mystyle {
    font-style: italic;
    font-size: 20px;
    font-weight: bolder;
    line-height: normal;
}

I changed the name of the style to “.mystyle”, and turned off caching, now things are working in firefox. Changing the name again works fine now.

Interestingly, when using the eclipse built in browser to test the application, the styling other than “italic” does not show on the label (no weight, no size change is shown).

Thanks for the help !

  • Terry
4

Actually when using “run on server” and the internal browser in eclipse, it seems like the css styles are being cached somehow, and they eventually show up, but not on the first run after making the changes.

I guess this can cause confusion when testing in the eclipse browser, but with caching off in firefox externally, changes are reflected on each run.

Thanks again.

  • Terry