Different Stile for the MenuItems in the MenuBar

Flow
1

Hi All,
I want to set a specific Style for certain MenuItems, specificly these that are shown in the MenuBar. No changes in the SubMenu…
Therefore I defined a own style in SASS


.v-menubar-menuitem-main-item, .v-menubar-menuitem-main-item:hover {
     height: 100%;
     border:2px solid;
     border-radius:5px;
     @include amos-header-colors;

     .v-menubar-menuitem-caption {
       margin-top: 8px;
     }
   }

I also have follwoing lines of Java-Code when creating the
MenuItems


MenuItem item = this.menuBar.addItem(action.getCaption(), action.getIcon(), getCommadFromAction(action));
item.setStyleName("main-item");

The problem now is, it always gets overwritten by the default Reindeer .v-menubar-menuitem
It only applies my CSS-Definitions that are not set it the Reindeer theme.
As I still want to use the default MenuBar in different Ocassions I don’t really want to overwrite the settings there.

Any clue on how i can handle this?

Thanks

2

Same problem here. All styles on submenu items are overriden with default one

3

If they are overridden, you need to make your styles more specific - check the overriding selectors using e.g. FireBug or Chrome Inspector and search for information on CSS specificity.

It is also possible to create a composite theme where you include only selected parts of e.g. reindeer, but it is a bit more complicated. First see
the Sass tutorials
 and then create a theme which does not include all the mixins from the reindeer theme but rather imports …/reindeer/reindeer.scss and includes only the desired mixins in your own theme mixin.