I tried to create a panel with an image set as background and then add a button to it but button is not shown on the background image. instead it is shown on the top of background image.
this is what I have done, I created a theme and inside styles.css I added
public class Desktop extends Panel{
public Desktop(){
this.addStyleName(“desktop”);
Button mycomputer = new Button(“MyComputer”);
this.addComponent(mycomputer);
}
}
Is there anything I haven’t done?
Thanks
Judging by the original "
instead it is shown on the top of background image ", I’m guessing yes.
If I understood correctly, you want the sunset to appear as the background of the panel. In that case, your CSS is a little off.
If you’re any familiar with Firebug or similar DOM inspector, you can see from the Panel’s generated HTML structure, that the style name “desktop” is applied to the root element of the panel, but the content of the panel is actually another DIV element.
The content element class (stylename) is .v-panel-content-desktop. So your CSS should be the following:
But there’s one more catch when you’re using the Reindeer theme as a starting point: it specifies a background color for the contained layout in the panel as white, so your panel’s background will not show through. In order to overcome that, you need to add this as well:
.v-panel-content-desktop > div {
background: transparent;
}
Yes I have. indeed eclipse plugin did it for me and since it shows the image I can understand that theme is set.
but I found out that If my class extends a Layout instead of Panel it works, but I wonder why.
If I change Desktop class this way:
public class Desktop extends VerticalLayout{
public Desktop(){
super();
this.addStyleName(“webos-desktop”);
Button mycomputer = new Button(“MyComputer”);
this.addComponent(mycomputer);
}
it works but I wonder why it does not work for panel.
Jouni is right, I did not read your post carefully enough. The also symptoms match what Jouni said about reindeer theme having white background color for vertical layout in panel.
I was able to make this work exactly like I described, though the correct style prefixes seem to be “webos-desktop” now rather than plain “desktop”. So change the CSS to have .v-panel-content-webos-desktop, and you’ll be set.
And always be sure to properly refresh the server, so no CSS files get caches, which can happen pretty easily with Eclipse and Tomcat. Check from the browser, that you get the updated files, by accessing http://localhost:8080/myapp/VAADIN/themes/mytheme/styles.css (change “myapp” and “mytheme”) with the browser.
I wanted to do the same thing so I have been following this thread. I did exactly as you outlined, but I also have no luck. I know the background image is showing up because I was messing with the Opacity field and actually saw the background image as such:
I was just trying to set the background of a panel Orange. It was easy using a custom theme and
panel.setStyleName("topic_panel"); // orange
to get the border Orange, but took longer to get the panel centre orange. The comments in this post helped zero in on my problem.
I tried looking in the DOM with Firebug, but for me that is a lot of digging.
Later I just exploded the vaadin jar to look in VAADIN/themes/reindeer/panel/panel.css.
There it is all nicely laid out so I can see what I am fighting. I think it was the lines:
.v-panel-content > div {
background: #fff;
min-height: 100%;
}
but in any case you can see all the css classes currently in use in your jar relating to panel. Looking in Firebug will allow you to relate to specific text in your display. Similarly, you can look at other components.
Then you can redefine these in your custom theme.
I also had to look up what in css ".v-panel-content > div " means!
Dear Mahmoud
Hello
I am wondering Whether we know each other or not , So if " Mofatteh High School " Expression , flashes anything in your mind , kindly please send an email for me to youreverfriend@gmail.com.
Best regards
Your ever friend!..
