MenuBar and CSS in custom theme

Hi,

for a new web application that I am trying to create I need a MenuBar with another background-image.

I created my own theme and imported reindeer/styles.css into my styles.css. Now I would like to use a self-created image as background-image instead of vertical-sprites.png.

Whatever I try, the old image remains. Also changing other properties of .v-menubar doesn't seem to work.

The theme is set correctly in my application. Other changes in the theme are no problem. I'm not an CSS-expert, but I can help myself. Only this remains a mystery.

CSS

@import url(../reindeer/styles.css);

.v-menubar {
	background-image: url(common/img/menubar.png);
}
.custom-main-menu {
	background-image: url(common/img/menubar.png);
}

Java

MenuBar menuBar = new MenuBar();
menuBar.addStyleName("custom-main-menu");
menuBar.setAutoOpen(true);
menuBar.setWidth(100, Sizeable.UNITS_PIXELS);
menuBar.setHeight(100, Sizeable.UNITS_PIXELS);

Thank you very much,

Robby

Your style gets overriden by reindeer. You need to use more specific rules to overcome it :
Change :

.custom-main-menu {

Into:

.v-app .custom-main-menu {

Thanks,

that did the job :-)

To override the CSS in the Vaadin theme, I usually use "!important" in the style of my custom theme". In the case of the menu bar, I would do the following.

@import url(../reindeer/styles.css);

.v-menubar {
background-image: url(common/img/myOwnImage.png) !important;
}