Best reference for JavaFX CSS properties & selectors

Question

I'm trying to learn JavaFX 2, but I've been stumbling a lot trying to style my application. I've found this document which tries to document controls and the css properties that apply to them. I can't tell if it's incomplete, if I should be using some unknown selectors or JavaFX's CSS support just isn't powerful enough for my needs.

Here are a couple of examples:

How would I change the background color for the area behind a TabPane without coloring every other child component (is there a selector for that, or perhaps a property?)
How would I change the color of non-selected tabs?

JimClarke · Accepted Answer · 2011-11-05 15:17:36Z

10

Have you tried something like this?

This uses an ID selector as shown in the "Skinning JavaFX Applications with CSS" document. You could also leave off the "#MyTabPane" selector and have it apply to all TabPane's. (It looks like the .tab and .tab-content-area selectors are not discussed in the reference guide. I went to the "caspian.css" file contained in jfxrt.jar file to find them.)

TabExample.css

#MyTabPane .tab {
    -fx-background-color: blue;
}
#MyTabPane .tab:selected {
    -fx-background-color: red;
}

#MyTabPane .tab-content-area {
    -fx-background-color: cyan;
}

#MyTabPane .tab *.tab-label {
    -fx-text-fill: white;
}

TabPaneEx.java

@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World");
        StackPane root = new StackPane();
        TabPane pane = new TabPane();
        pane.setId(("MyTabPane"));
        Tab tab1 = new Tab("ONE");
        Tab tab2 = new Tab("TWO");
        Tab tab3 = new Tab("THREE");
        pane.getTabs().addAll(tab1,tab2,tab3);
        Scene scene = new Scene(root, 300, 250);
        root.getChildren().add(pane);
        scene.getStylesheets().add(
                this.getClass().getClassLoader().getResource("tabpaneex/TabExample.css").toString());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

answered Nov 5, 2011 at 15:17

JimClarke

1,40913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryan Young Over a year ago

This is exactly what I was looking for (in addition to .tab-header-background, which I also found in caspian.css). It's a shame there isn't a more complete reference document, but I suppose that will come with time.

The Unfun Cat Over a year ago

Great answer. For simplicity- is there a way to access the tab parts from from java.´? I'm thinking something along the lines of tabPane.getTabContent.setStyle()?

JimClarke · Accepted Answer · 2011-11-01 22:13:50Z

4

JavaFX CSS Reference Guide

Skinning JavaFX Applications with CSS

answered Nov 1, 2011 at 22:13

JimClarke

1,40913 silver badges12 bronze badges

4 Comments

Bryan Young Over a year ago

Neither of these documents seems to have solutions for these problem. Can I assume JavaFX's CSS isn't powerful enough for my needs? If so, do I need to create a custom skin? Without access to Oracle's original skins (in the com.sun package), I imagine that would be a lot of work.

JimClarke Over a year ago

I am not sure exactly what you want, but this should be similar.

metasim Over a year ago

Note the instruction in the second document to extract the default CSS file from the JavaFX Jar: jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

Andrew S Over a year ago

Oracles documentation of the CSS is essentially bloated garbage, with poor organization and categorization. They could do better.

Collectives™ on Stack Overflow

Best reference for JavaFX CSS properties & selectors

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related