15

I've got a MenuBar that is setup as follows in FXML:

<MenuBar VBox.vgrow="NEVER">
    <menus>
        <Menu mnemonicParsing="true" text="_File">
            <items>
                <MenuItem mnemonicParsing="true" text="_New Project"/>
                <MenuItem mnemonicParsing="true" text="_Open…"/>
                <MenuItem mnemonicParsing="false" text="Quit"/>
            </items>
        </Menu>
    </menus>
</MenuBar>

This produces a menu as follows:

enter image description here

I've successfully styled the MenuBar and the Menu File with the following CSS:

.menu-bar { /* The menu bar itself */ }
.menu { /* The File menu item */ }
.menu:showing { /* menu when it's being shown (activated) */ }
.menu .label { /* Styles the text on a menu item */ }
.menu:showing .label { /* Styles the text on a menu item when activated */ }

However, I've been unable to style the menu that is displayed.

I've tried treating it as a ContextMenu:

.context-menu {
    -fx-background-color: red;
}

Doesn't do anything (it's not a ContextMenu, so no big surprise here).

I've tried styling menu-item and menu-button:

.menu-button,
.menu-item {
    -fx-background-color: red;
}

This changes the menu (File), but not the menu items or the menu that is displayed.

I've tried selecting a substructure called .items but that doesn't seem to exist.

Questions

  1. How do I select/style the menu (the container that is holding New Project, Open..., Quit)?
  2. How do I select/style each individual MenuItem in the menu?

Clarification

To help clarify which elements I'm looking to style, I've added this image which outlines the components I'm wishing to style:

enter image description here

Community
  • 1
  • 1
crush
  • 16,713
  • 9
  • 59
  • 100

2 Answers2

7

I think you forgot the -fx-skin property in .context-menu.
Follow the How to style menu button and menu items.

Community
  • 1
  • 1
Uluk Biy
  • 48,655
  • 13
  • 146
  • 153
  • 3
    This does seem to fix the problem. Thanks so much. Can you explain a little bit about why the `-fx-skin` property is required? – crush Feb 21 '14 at 13:58
  • @crush: It is not necessary to use `-fx-skin`, see my answer. But still, if you are still interested, the [official documentation](https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html) says that `-fx-skin` defines `The class name of the Control's Skin`. – Markus Weninger Jul 27 '17 at 13:50
3
.menu-bar {
    -fx-background-color: black ;
    -fx-opacity: 0.5;
    -fx-border-width: 2.0;

}
.menu-bar .label {
    -fx-font-size: 14.0 pt;
    -fx-font-family: "Bookman Old Style";
    -fx-text-fill: white;
    -fx-font-weight: bold; 
    -fx-padding: 10.0px;

}
.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
    -fx-background: black ;
    -fx-opacity: 0.5;
    -fx-text-fill: white;
}

.menu-item {
    -fx-padding: 0.0em 0.0em 0.0em 0.0em;
    -fx-text-fill: black;
    -fx-background: darkgray ;
}
.menu-item .label{
    -fx-font-size: 14.0 pt;
    -fx-text-fill: black;
}
.menu-item .label:hover{
    -fx-font-size: 14.0 pt;
    -fx-background: black ;
    -fx-text-fill: white;
}
.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color:white ;
    -fx-border-width: 0.2px;
    -fx-border-color: black;
    /** -fx-background-insets: 0.0, 1.0, 2.0;
    -fx-background-radius: 0.0 6.0 6.0 6.0, 0.0 5.0 5.0 5.0, 0.0 4.0 4.0 4.0;
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; 
    -fx-opacity: 0.9;*/
}
Rashmin Mevada
  • 41
  • 2