Marco Marco - 10 days ago 6
CSS Question

Text styled with CSS does not appear white

I have got this code:

private void createAndAddCommonInformationSection(){
Text text = new Text("CommonText");
gridPane.add(header);
}


The should appear in white color, so I have a CCS-file as follows:

.root {
-fx-base: rgb(50, 50, 50);
-fx-background: rgb(50, 50, 50);
-fx-control-inner-background: rgb(50, 50, 50);
}

.tab {
-fx-background-color: linear-gradient(to top, -fx-base, derive(-fx-base,30%));
}

.menu-bar {
-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));
}

.tool-bar:horizontal {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,+50%), derive(-fx-base,-40%), derive(-fx-base,-20%));
}

.button {
-fx-background-color: transparent;
}

.button:hover {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-color: -fx-hover-base;
}

.table-view {
-fx-table-cell-border-color:derive(-fx-base,+10%);
-fx-table-header-border-color:derive(-fx-base,+20%);
}

.split-pane:horizontal > * > .split-pane-divider {
-fx-border-color: transparent -fx-base transparent -fx-base;
-fx-background-color: transparent, derive(-fx-base,20%);
-fx-background-insets: 0, 0 1 0 1;
}

.my-gridpane {
-fx-background-color: radial-gradient(radius 100%, derive(-fx-base,20%), derive(-fx-base,-20%));
}

.separator-label {
-fx-text-fill: orange;
}

.text{
-fx-text-fill: white;
}


Everythin is working fine with the CSS-file, except the the color of the text in my code snippet does not appear in the expected color.

I have already tried

-fx-fill: white;


and

-fx-fill-text: white;


but nothing helps.

What am I doing wrong?

Answer

According to the documentation, Text nodes have no default style class. so you need

text.getStyleClass().add("text");

in order for the text node to match the CSS selector. Then

.text {
    -fx-fill: white ;
}

will work.

Typically you would use a Label along with the fx-text-fill property if you want to style it with CSS, though adding a style class manually to a Text node should work.

Comments