I have a listview. I want to change the color of the background and the text fill. I have tried doing the following:
playlistView.setStyle("-fx-background-color: blue; -fx-text-fill: black;");
But, this doesn't work. However, the following is working:
playlistView.setStyle("-fx-font-size: 24px; -fx-font-family: 'SketchFlow Print';");
Can you please tell me how to get the background and text-fill to work? Thank you.
You can use the following CSS styles:
.list-view .list-cell:even {
-fx-background-color: blue;
-fx-text-fill: black;
}
.list-view .list-cell:odd {
-fx-background-color: blue;
-fx-text-fill: black;
}
lisStyles.css
.Add the URL for the lisStyles.css
style sheet to the scene:
scene.getStylesheets().add(getClass().getResource("lisStyles.css").toExternalForm());
You are styling the ListView
, but the background color is determined by styles on the list cells. So style the cells. If you change the value of the looked-up color -fx-control-inner-background
you will preserve both the "striping" of alternate rows, and the changing text color so that it contrasts the background. Use
.list-cell {
-fx-control-inner-background: blue ;
}
in an external style sheet. Note the striping is very subtle (almost invisible) when the background is this dark: you might want to adjust it with
.list-cell {
-fx-control-inner-background: blue ;
-fx-control-inner-background-alt: derive(-fx-control-inner-background, 50%);
}
As a quick hack, you can set that looked-up color directly on the list view, and it will propagate to the cells it contains:
playlistView.setStyle("-fx-control-inner-background: blue;");
however, it is better (better separation of code, and more robust) to define it on the cells in an external style sheet.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With