2

I want to customize the buttons, button container, backgroud color, the AlertType icon as well in an Alert Dialog.

Tried following these two solutions :

  1. Styling default JavaFX Dialogs
  2. Customize JavaFx Alert with css

I suppose the code from CSS that I have mentioned should be applicable to all the Alert dialog-pane ? Not sure what am I missing here.

private static void createSimpleInformationDialog(String message){
    Alert alert = createSimpleInformationAlert(message, AlertType.INFORMATION);
    alert.getDialogPane().setHeaderText(StringTools.isNull(null, ""));
    alert.getDialogPane().setMaxWidth(200);
    alert.getDialogPane().setMinWidth(150);
    alert.getDialogPane().setPadding(new Insets(0, 10, 0, 10));
    alert.showAndWait();
}

private static Alert createSimpleInformationAlert(String message, AlertType type) {
    Alert alert = new Alert(type);
    alert.setTitle(Lang.get(Defs.FX_DIALOGS_EXCEPTIONS_GENERIC_TITLE));
    alert.setContentText(message);
    alert.initModality(Modality.APPLICATION_MODAL);
    alert.initOwner(FXMain.getInstance().getStage());
    return alert;
}

CSS file :

.dialog-pane{
  -fx-border-color:black;
  -fx-border-width:2.0px;
 }

/**Costumization of The Bar where the buttons are located**/
.dialog-pane > .button-bar > .container {
  -fx-background-color:black;
}

.dialog-pane > .content.label {
   -fx-padding: 0.5em 0.5em 0.5em 0.5em;
   -fx-background-color: yellow;
   -fx-text-fill:black;
   -fx-font-size:15.0px;
}

/**Costumization of DialogPane Header**/
.dialog-pane:header .header-panel {
  -fx-background-color: black;
}

.dialog-pane:header .header-panel .label{
  -fx-background-color: yellow;
  -fx-background-radius:10px;
  -fx-text-fill:black;
  -fx-font-size:15.0px;
}


/**Costumization of Buttons**/
.dialog-pane .button{
   -fx-background-color:black;
   -fx-text-fill:white;
   -fx-wrap-text: true;
   -fx-effect: dropshadow( three-pass-box, yellow, 10.0, 0.0, 0.0, 0.0);
   -fx-cursor:hand;
 }

.dialog-pane .button:hover{     
  -fx-background-color:white;
  -fx-text-fill:black;
  -fx-font-weight:bold; 
 }
vi90
  • 73
  • 8
  • Perhaps the CSS selectors in your css file are wrong (I don't know I didn't try it). If so, you might get some help determining the correct selectors to use if you make use of the [Scenic View tool](https://github.com/JonathanGiles/scenic-view). The other place to look is to the `moderna.css` file in the JavaFX source code base. Moderna might show how the default dialogs are styled. However, if the default dialogs are not customizing the style of the buttons (which they probably aren't), then there probably won't be a specific styling rule for them in moderna.css. – jewelsea Sep 17 '20 at 22:33
  • 2
    I think [SceneBuilder](https://gluonhq.com/products/scene-builder/) also has a [css analyzer](https://docs.oracle.com/javafx/scenebuilder/1/user_guide/stylesheet-support.htm) built in that might help you (though I haven't used the latest versions of it, so I'm not sure if the css analyzer in SceneBuilder is still supported). – jewelsea Sep 17 '20 at 22:40

1 Answers1

0

Helping out future searchers for the same answer as I came here looking for 'styling JavaFX alerts' as well.

The answer is actually mentioned on the first link, tell the Dialog (parent) of the alert what css to use: alert.getDialogPane().getStylesheets().add(getClass().getResource("application.css").toExternalForm());

JeroenV
  • 53
  • 2
  • 10