Can't set Panel background with CSS

After learning the vaadin basics, i’m experimenting a bit with ‘CSS in vaadin’ now.

I tried using my own theme to override certain CSS-selectors and to set the background color inside a panel like this:

[b]
[font=Courier New]
@import “…/reindeer/styles.css”;

.v-panel
{
background: blue;
}

[/font]
[/b]

What i get is a very thin blue border around my panel and the background inside the panel stays unchanged.

I then tried other panel-related collectors like ‘.v-panel-content’ and ‘.v-panel-deco’ without success.

Where’s my mistake ?

Regards,
Gaston

Hi,

The theme for the Reindeer theme panel is a bit more intricate than it looks on the outside. Here’s an explanation from another post:
http://vaadin.com/forum/-/message_boards/message/77010#_19_message_77049

Basically you need to use a different selector to match the panel content and disable the current white background.

.v-panel-content > div

and

.v-ie6 .v-panel-content

Now it works fine.

Thanks, Jouni

PS: How can i set a thread to “Resolved” ?

To mark a thread as “resolved”, it first has be marked as a question.

You can mark a thread as a question by editing the initial post, checking the “Mark as a Question” option, and then saving it.

After that, you should be able to mark a response as an answer.

Hi all,

Here is what i did in order to successfully modify the background color of a panel :

I took into account these posts :

Setting an image as background of a panel


Can’t set panel background with CSS


Step 1 :
create a folder like : WebContent/VAADIN/themes/eric_theme

Step 2 :
create an empty styles.css file into this new folder

Step 3 :
I disable the current white background and set the newcolor.
So, the following code is added into the new CSS file :

@import "../reindeer/styles.css";

.v-panel-content > div {
   background: transparent;
}

.v-panel-content {
   background-color:yellow;
}


Step 4 :
in the XXX extends Application class, add : [color=#2b942b]
setTheme(“eric_theme”);

[/color] Strange thing : if i add panel.addStyleName(“v-panel-content”); the logo image deasappears ! I guess it means all panels will be yellow …

Step 5 :
clean Tomcat + refresh and cleaned the vaadin project in Eclipse
[/color]

Eric
12564.png

And the background color of the panel can be modified in the java code with the following code :

[code]

CSSInject css = new CSSInject();
css.setValue(“.v-panel-content > div { background: transparent; }.v-panel-content { background-color:”+VaadinContext.BANNER_BACKGROUND_COLOR +“; }”);

[/code]You need to add cssinject-1.0.jar with vaadin6