Customize JavaFx Alert with css

Question

Searching in caspian.css I found that I can customize dialog-pane.Alert extends Dialog so I tried some of of these lines of code:

.dialog-pane {
   -fx-background-color: black;
   -fx-padding: 0;
    .....
  }

 .dialog-pane > .expandable-content {
     -fx-padding: 0.666em; /* 8px */
    .....
  }

.dialog-pane > .button-bar > .container {
    -fx-padding: 0.833em; /* 10px */
    .....
  }

.....

but nothing changes.

Question: How can I do that? I mean I want to customize the background, the buttons, the header and everything other.

`caspian.css` hasn't been the default stylesheet for JavaFX for years, you should use [`modena.css`](http://fxexperience.com/2013/01/modena-new-theme-for-javafx-8/) instead. — jewelsea, May 20 '16 at 20:07
@Jewelsea i see that it has the the same things as caspian, i mean the css selectors etc which doesn't work. — GOXR3PLUS, May 20 '16 at 20:11
@fabian Yes.It is supposed this piece of code to work properly with Alert? — GOXR3PLUS, May 20 '16 at 21:25
@José Pereda amazing... that is the answer thanks!!I hadn't understand that the Alert is a different stage so it needs to add stylesheet manually. — GOXR3PLUS, May 21 '16 at 18:15

score 17 · Accepted Answer · edited May 23 '17 at 12:24

Take a look here how to add stylesheet or|and styleclass to DialogPane,so you can add your costume css file.

Example(picture + css code):

 .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; 
 }

Customize JavaFx Alert with css

1 Answers1

Linked