Panel with different colors

Flow
1

Hi,

I am updating an old project in vaadin 6.
In this project, there is a theme in which bakground colors of panels are blue.
I need to create a new panel with no color at all, i dont know how to do it.
This new panel is blue, how to make it transparent ?

styles.css :
@import “…/reindeer/styles.css”;

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

.v-panel-content {
background-color:rgb(1, 147, 213);
}

2

No answer yet. Other way to describe my problem : how to create 1 panel with blue background color, and another panel with no background color.

Eric

3

You should be creating multiple styles in styles.scss and adding it to the panels.

SCSS-
.mystyle {
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid black;
}

Java -
Panel mypanel = new Panel();
mypanel.addStyleName(“mystyle”);

4

Larsen : your solution doesn’t work by my side. I am using Vaadin 6. I think your solution is for Vaadin 7
Thank you for your answer !

5

So, i re-explain my problem in Vaadin
6
 :
On each page displayed of the vaadin 6 application, there is a banner with a logo at the top :

// TOP BANNER WITH LOGO CSSInject css = new CSSInject(); css.setValue(".v-panel-content > div { background: transparent; }.v-panel-content { background-color:"+VaadinContext.BANNER_BACKGROUND_COLOR +"; }"); => the background color comes from an xml file.
=> CSSInject version 1.0 for vaadin 6 is used here
=> this code works fine (after compiling widgetset by using vaadin 6 plugin for Eclipse)

THEN, i need to create a new panel no background color.
So in the style.css file, i added

@import "../reindeer/styles.css"; .mystyle { background: transparent; } then

Panel panel = new Panel(); panel.addStyleName("mystyle"); => doesn’t work, this new panel is still blue instead of transparent. Any idea where i am wrong ???

6

There is no answer, so i decided to set transparent background to all panels.
I will migrate this application into Vaadin7 later, in order to use the new version of CSSinject.