JavaFX change close tab button color using JFoenix framework

Question

I'm using JFoenix to have google material like elements in my JavaFX application. I notice that in order to style JFoenix's elements with css, some commands are not the same as when using only JavaFX, so I'm not being able to style JFoenix's TabPane as I'd wish to.

At the moment my TabPane is as shown in the following image: https://ibb.co/DtxVpJJ

And I wish to change those close tab buttons color as follows: https://ibb.co/yRbDGnQ

I already tried a lot of solutions I found in the internet, but none of them is able solve the problem. The main two solutions were:

Change directly the color of the button (https://blog.samirhadzic.com/2016/08/30/close-options-for-tabpane).
Hide the button and replace it with an icon. (Javafx change Tab X to image icon from url)

Using the code to change the color, nothing happens:

.jfx-tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button{
    -fx-background-color:red;
}

Using the following code, the icon appears but still behind the white default cross:

.jfx-tab-pane .tab-close-button {
    -fx-background-color: transparent;
    -fx-shape:null;
    -fx-background-image: url("../../assets/close-32.png");
    -fx-background-size: 25;
    -fx-background-repeat: no-repeat;
}

Result:

https://ibb.co/NSmWQ3m

This seems such a simple problem and I'm not being able to fix it. Any ideas?

Topaco · Accepted Answer · 2019-07-26T06:48:27.573

As an example the TabsDemo of JFoenix in

JFoenix-master\demo\src\main\java\demos\components\TabsDemo.java

is used with the modification of closeable panes. The default is as follows:

The color of the close buttons can be changed to e.g. red with the following css:

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
     -fx-background-color: red;
}

Alternatively an icon can be used. In this case the css could be:

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button {
    -fx-background-image: url(<path to icon file>);
    -fx-background-repeat: no-repeat;
}

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
    -fx-shape: "";
    -jfx-size: 0;
    -fx-background-color: Transparent;
}

The last section overwrites the default style, which defines the shape, size and color of the cross as SVG:

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
    -fx-shape: "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z";
    -jfx-size: 12;
    -fx-background-color: rgba(255, 255, 255, .87);
}

A blueprint for the TabPane-css can be found in

JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-tab-pane.css

and

JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-button.css

section JFXTabPane.

This can be used to create more complex effects, such as changing the color/icon when selecting a pane etc.

JavaFX change close tab button color using JFoenix framework

1 Answers1