Action Buttons css style in JavaFX ControlFX dialog

Question

I\'ve been using ControlsFX dialogs to show information, but the style of my application is not blue, and does not match dialog style (color, borders) is there a way to cha

Answer 1

Note

In a more recent question, this time regarding the new Dialog API bundled with JDK8u40 early releases, I came with a less hacky and more clean solution, using stylesheets instead of inline styles and lookups.

So I'm updating this question, as openjfx-dialogs is still the way to have dialogs for the official releases 8u20, 8u25 and 8u31.

New solution

To customize the default style of a dialog with our own css file, we need to take into consideration that the dialog is in fact a new stage, with a new scene, and the root node is a DialogPane instance.

So once we have some dialog instance:

@Override
public void start(Stage primaryStage) {        
    Alert alert = new Alert(AlertType.CONFIRMATION);
    alert.setTitle("Confirmation Dialog");
    alert.setHeaderText("This is a Custom Confirmation Dialog");
    alert.setContentText("We override the style classes of the dialog");
    ...
}

we can access to its dialog pane and add our own style sheet:

DialogPane dialogPane = alert.getDialogPane();
dialogPane.getStylesheets().add(
   getClass().getResource("myDialogs.css").toExternalForm());

In order to define our rules we need to know the descriptors already used. For that, we just need to look for dialog.css file in the openjfx-dialogs.jar (under the package com.sun.javafx.scene.control.skin.modena), or go to the source code at the repository.

Now we need to provide our custom rules to override the default ones for dialog and alert class selectors. The following rules will have the exact same effect as the inline styiling from my first answer.

.dialog > .dialog-pane {
    -fx-background-color: greenyellow;
}

.dialog > .dialog-pane > .button-bar {
    -fx-font-size: 24px;
    -fx-background-color: indianred;
    -fx-font-family: "Andalus";
}

.dialog > .dialog-pane > .content.label {
    -fx-font-size: 16px;
    -fx-font-weight: bold; 
    -fx-fill: blue;
}

.dialog:header > .dialog-pane .header-panel {
    -fx-background-color: cadetblue;
    -fx-font-style: italic;
}

.alert.confirmation.dialog-pane {
    -fx-graphic: url("lock24.png");
}