Background color of a Label...

Hi all,

I have a small problem of setting the background color of a label.

I have gone through the forum already & there are solutions to achieve this by using Themes.
Unfortunately I’m totally new to Themes… :wacko:

Can anyone help me to achieve this please?

Thanks in advance,
Asela.

Hi, Asela.

To create you own theme, you need create a folder in WebContent/VAADIN/themes with a name of your style, e.g. my_theme, and styles.css into that folder (WebContent/VAADIN/themes/my_theme/styles.css):

@import url(../base/styles.css); 
.v-label {
background: #ffffc0; /* Pale yellow */
}

then you need to set this theme for your application in init() method:

public class MyApplication extends Application {
        @Override
	public void init() {
                ...
		setTheme("my_theme");
                ....
        }
}

That’s it.

see
http://vaadin.com/book/-/page/themes.creating.html
for details.

Hi Gregory,

Thanks for the reply & it works fine.

Thanks again.
Asela.

Hi!

This solution doesn’t seem to work anymore (with Vaadin 6.8). I’m no guru with CSS, but when I dig the html with Firebug, it shows:


<div style="height: 18px; width: 150px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-label" style="width: 150px;">

(I have the Label as the first component in a Vertical Layout)

It seems to me, that the background color should be applied to the parent div and not the div with v-label class.

How can I do that?

Now that i dug deeper, it seems that it’s the xhtml content in my label that messes things up.

<div style="float: left; margin-left: 0px;">
<div class="v-label" style="width: 150px;">
<span style="float:left">
Left aligned label text
</span>
<span style="float:right">right aligned label text</span>
</div>
</div>

I don’t know why, but if i give the label a specific height in pixels, it works. Otherwise not :slight_smile:

To avoid this height hardcoding, I did this change:

<div class="v-label" style="width: 150px;">
Left aligned text
<span style="float:right">right aligned text</span>
</div>

And now it’s ok :slight_smile:

Hi,

You can also add the background color directly using the java code like this :


Label
myLabel =
new Label
(“<p style="
background-color:rgb(55,55,55)
;font-size:50px;color:rgb(255,255,255)">LABEL

”,Label.CONTENT_RAW);

Eric