Menubar background

Flow
1

Hi,

Is it possible to change menubar, menubar-menuitem, and menubar-menuitem-selected background color for a specific menubar using Valo theme ?

2

Yes you can, you need to apply a style name for you menu (menu.addStyleName(“mymenu”):wink: and then your scss file define a custom style using Valo’s mixins. For example, here’s how you change the background color of the menubar.

[code]
.mymenu {

@include valo-menubar-style($primary-stylename: v-menubar, $background-color: #00ff00, $unit-size: $v-unit-size);

}
[/code]See
Valo API documentation
 for details about the mixins.

3

Using the following entry does not apply background-color to menubar-popup

.v-menubar-mybar { @include valo-menubar-style($background-color: $mycolor); } How to cascade backgroud color to child components ?

4

Hey Ruddy,

By default, the popup background-color is defined in
.v-menubar-popup
, and the selection color is defined in
.v-menubar-popup .v-menubar-menuitem-selected
.

However,
.v-menubar-popup
 does not contain any custom style names (i.e. styles changes become global). Also, it has padding, so its background will be shown around its content.

So, if you only want to change the background of a specific menubar style, you could do the following:

.v-menubar-submenu.my-menubar {
  background-color: green;

  .v-menubar-menuitem-selected {
    background-image: none;
    background-color: yellow;
  }
}
5

Oh, I forgot about the padding “fix”. You can remove the padding from v-menubar-popup and move it to v-menubar-submenu.

.v-menubar-popup {
  padding: 0;
}

.v-menubar-submenu {
  padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
}

That should do it, unless I’m forgetting something.