使用css Costumize JavaFx Alert [英] Costumize JavaFx Alert with css

问题描述

在 caspian.css 中搜索我发现我可以costumize对话框pane.Alert扩展Dialog所以我尝试这些代码行：

  .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 * / 
 ..... 
} 
 
 ..... 
  

解决方案

看看

a href =http://stackoverflow.com/questions/28417140/styling-default-javafx-dialogs/28421229#28421229>此处如何添加样式表或|和 ：

p>

 。对话框{
 -fx-border-color：black; 
 -fx-border-width：2.0px; 
} 
 
 / **按钮所在栏的成本** / 
 .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; 
} 
 
 / ** DialogPane页眉的costumization ** / 
 .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; 
} 
 
 
 / **按钮的成本计算** / 
 .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; 
} 
  

Searching in caspian.css i found that i can costumize 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 i can do that?I mean i want to costumize the background,the buttons,the header and everything other.Thanks for help!

解决方案

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

这篇关于使用css Costumize JavaFx Alert的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！