4 Replies Latest reply: Oct 24, 2012 10:40 AM by 914420 RSS

    Customize menu css

    ascuccimarra
      I'm trying to change the background to a Menu inside a MenuBar. I was able to change the MenuItem's background, but there's this gap at the top and at the bottom of the menu which is still gray, and I can't seem to find a way to change it.
      This is my code
      import javafx.application.Application;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.*;
      import javafx.stage.Stage;
      
      public class CustomizeMenu extends Application {
        public static void main(String[] args) { launch(args); }
        @Override public void start(Stage stage) {
          
          MenuBar mb = new MenuBar();
          Menu menuFile = new Menu("File");
          Menu menuView = new Menu("View");
          menuView.getItems().addAll(new CheckMenuItem("All"), new CheckMenuItem("None"));
          menuFile.getItems().addAll(new MenuItem("Open"), menuView, new MenuItem("Close"));
          mb.getMenus().add(menuFile);
          Group g = new Group(mb);
          Scene scene = new Scene(g, 400, 300);
          scene.getStylesheets().add(CustomizeMenu.class.getResource("custom-menu.css").toExternalForm());
          stage.setScene(scene);
          stage.show();
        }
      }
      This is my css
      .menu  {
        -fx-background-color: blue;
        -fx-text-fill: white;
      }
      .menu-item{
          -fx-background-color: blue;
      }
      
      .menu-item .label {
        -fx-text-fill: white;
      }
      
      .menu-item:focused .label {
        -fx-text-fill: white;
      }
      Any help would be much appreciated, thanks.
        • 1. Re: Customize menu css
          EJP
          Moderator action: Deleted your duplicate. You could have edited it instead of re-posting.
          • 2. Re: Customize menu css
            David Grieve
            Try
            ContextMenuContent {
                -fx-background-color: yellow;
            }
            There should be a better/easier way via css to style this.
            • 3. Re: Customize menu css
              ascuccimarra
              Thanks for your response David, that did the trick. Didn't even find a reference to it in caspian.css. This definitely seems something that could be improved. Hope this thread helps others.
              • 4. Re: Customize menu css
                914420
                ascuccimarra wrote:
                Thanks for your response David, that did the trick. Didn't even find a reference to it in caspian.css. This definitely seems something that could be improved. Hope this thread helps others.
                ContextMenuContent is inserted into the scene graph when the menu is rendered. Basically it seems belong to the skin. You can find out about this with ScenicView if you manage to get hold of the scene used by the ContextMenu popup (I could do this with a CustomMenuItem). Regarding the css, David simply used the classname as selector as documented in the css reference.