CODEWITHSUNDEEP
cssjavafx-8
Samarek
Samarek

Reputation: 444

Style the title of a javafx TitledPane with css

I am trying to alter the look of the title on a TitledPane by using css, all the styles I assign are applied, except for the color of the text.

Can anyone see what I am doing wrong?

.titled-pane > .title
{
    -fx-background-color: rgba(0, 60, 136, 0.5);
    -fx-border-color: rgba(0, 60, 136, 0.8);
    -fx-font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-text-fill: WHITE;
}

I also tried

.titled-pane > .title > .text
{
    -fx-text-fill: WHITE;
}

with no success

Upvotes: 0

Views: 3022

Answers (1)

James_D
James_D

Reputation: 209330

Even though the documentation claims the .text node is a Labeled, it is actually a com.sun.javafx.scene.control.LabeledText, which is a subclass of Text.

A Text has no -fx-text-fill property, but has a -fx-fill property (because it is a subclass of Shape). Consequently, the correct CSS is

.titled-pane > .title
{
    -fx-background-color: rgba(0, 60, 136, 0.5);
    -fx-border-color: rgba(0, 60, 136, 0.8);
    -fx-font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
}


.titled-pane > .title > .text
{
    -fx-fill: WHITE;
}

Scenic View can be very useful in figuring out these issues.

Upvotes: 5

Related Questions