Titled pane css settings
25,349
Solution 1
Default css of titled pane...change it according your need.
.titled-pane
{
-fx-skin: "com.sun.javafx.scene.control.skin.TitledPaneSkin";
-fx-text-fill: -fx-text-base-color;
}
.titled-pane:focused
{
-fx-text-fill: white;
}
.titled-pane > .title
{
-fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
}
.titled-pane:focused > .title
{
-fx-color: -fx-focus-color;
}
.titled-pane > .title > .arrow-button
{
-fx-background-color: null;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */
}
.titled-pane > .title > .arrow-button .arrow
{
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
.titled-pane:collapsed > .title > .arrow-button .arrow
{
-fx-rotate: -90;
}
.titled-pane > *.content
{
-fx-background-color:
-fx-box-border,
linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border);
-fx-background-insets: 0, 0 1 1 1;
-fx-padding: 0.167em;
}
.titled-pane:focused > .title > .arrow-button .arrow
{
-fx-background-color: white;
}
Solution 2
Only the following properties are available for titled pane( which include all labeled properties and font properties)
extra properties
-fx-animated
-fx-collapsible
labeled properties
-fx-alignment
-fx-text-alignment
-fx-text-overrun
-fx-wrap-text
-fx-font
-fx-underline
-fx-graphic
-fx-content-display
-fx-graphic-text-gap
-fx-label-padding
-fx-text-fill
-fx-ellipsis-strin
font properties
-fx-font
-fx-font-family
-fx-font-size
-fx-font-style
-fx-font-weight
Solution 3
The official documentation for CSS styling Titled Panes can be found here (see @siddharth gupta's answer regarding possible properties).
You may consider to style only a certain sub-component, e.g., .titled-pane > .title > .text
. Titled panes have the following layout:
- titled-pane -
TitledPane
- title —
HBox
- text —
Label
- arrow-button —
StackPane
- arrow —
StackPane
- arrow —
- text —
- content —
StackPane
- title —
Here is the default formatting for the TitledPane
's "header":
.titled-pane > .title
{
-fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
}
Comments
-
Alberto acepsut almost 2 years
I wonder how to apply CSS settings to a
TitledPane
, but can't find any exampleI would like to apply custom settings for
TitledPane
toolbar and background, but this does not work.titled-pane { -fx-background-color: linear-gradient(aliceblue, lightslategray); }
-
Alberto acepsut over 10 years@Anshul...thank you very much that's just what I was searching for
-
Ari almost 7 yearsWhat's its stylesheet name and where is it called?
-
Markus Weninger almost 7 years@KeepMove: Just have a look at modena.css, the default theme in JavaFX: gist.github.com/maxd/63691840fc372f22f470
-
Hüseyin about 3 yearsHow to use this css class in fxml file