JavaFX : Custom styling for multiple TabPanes

Question

I have a TabPane for which I have set a style through CSS. However, I would like to have the different style fot the TabPane on another screen(for selected and unselected tabs). The following code is what I have working when I was using a common style for all the TabPane.

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.tab-pane
{
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab
{
    -fx-background-color: #abe0ff;

}

.tab-pane .tab:selected
{
    -fx-background-color: #015A7C;
}

.tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
}

.tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

In the case of trying to set it to different colors, I tried the following which was an unsuccessful attempt :

.MyTabPane > .tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.MyTabPane > .tab-pane
{
    -fx-tab-min-width:90px;
}

.MyTabPane > .tab{
    -fx-background-insets: 0 1 0 1,0,0;
}

.MyTabPane > .tab-pane .tab
{
    -fx-background-color: #e8e8e8;

}

.MyTabPane > .tab-pane .tab:selected
{
    -fx-background-color: #c0c0c0;
}

.MyTabPane > .tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.MyTabPane > .tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
}

.MyTabPane > .tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

This is from my FXML :

<TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" styleClass="MyTabPane">

Can someone please point me in the right direction.

I also tried following this idea, but couldn't get it through for the color of unselected tab: How do you set JavaFX TabPane CSS in code?

P.S. I am pretty new to CSS. I apologize if it is a silly question. Any suggestions are welcome.

Would you like to change style when you select a `TabPane` or do you want to define different permanent styles for each tabpane, for example a blue tab and a yellow tab? — 0009laH, Sep 11 '20 at 08:40
Yes, I would like to have 2 different permanent styles for both TabPanes. For example. The frist TabPane in the shade of blue: Selected Tab(dark blue tab-button background/ text color white) / Unselected Tab (Light blue tab-button background gray text). Second TabPane in the shade of Yellow: Selected Tab(dark yellow tab-button background/ text color white) / Unselected Tab (Light yellow tab-button background gray text) — vi90, Sep 17 '20 at 06:42
please stick to naming conventions: https://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/doc-files/cssref.html#intronaming — kleopatra, Sep 18 '20 at 09:48

score 0 · Answer 1 · answered Sep 10 '20 at 16:27

Create a simple TabPane and add style class:

    TabPane tabPane = new TabPane();
    tabPane.getStyleClass().add("MyTabPane");
    Tab tab1 = new Tab("Page 1", new Label("Page 1"));
    Tab tab2 = new Tab("Page 2", new Label("Page 2"));
    Tab tab3 = new Tab("Page 3", new Label("Page 3"));
    tabPane.getTabs().addAll(tab1, tab2, tab3);

In CSS:

.MyTabPane .tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.MyTabPane .tab-pane {
    -fx-tab-min-width: 90px;
}

.MyTabPane .tab {
    -fx-background-insets: 0 1 0 1, 0, 0;
}

.MyTabPane .tab-pane .tab {
    -fx-background-color: #e8e8e8;
}

.MyTabPane .tab-pane .tab:selected {
    -fx-background-color: #c0c0c0;
}

.MyTabPane .tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.MyTabPane .tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: red;
}

.MyTabPane .tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

This only changes the color of the text of the selected and unselected tabs,. I would like to change the background color of the tab (buttons - selected and unselected) as well. — vi90, Sep 14 '20 at 16:23

score 0 · Accepted Answer · answered Sep 18 '20 at 09:37

Anybody facing this issue can refer the following code. Turns out I was not using the selector correctly :

FXML :

<TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" styleClass="MyTabPane">

CSS : .MyTabPane { -fx-tab-min-width:90px; }

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.MyTabPane .tab
{
    -fx-background-color: #e8e8e8;
}

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

.tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
}

.MyTabPane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

JavaFX : Custom styling for multiple TabPanes

2 Answers2