Jfoenix: Customize Tab

[Natreve]

How do you change the color of the tabs selection bar and click animation? from the default yellow?

[jfoenixadmin]

you can use the following css selectors :

.jfx-tab-pane .tab-header-area .jfx-rippler{
    -jfx-rippler-fill :RED;
}
.jfx-tab-pane .tab-selected-line{
    -fx-stroke : RED;
}

[Natreve]

Thanks a lot! that was a big help.

[Sashie]

I'm not sure if this is something new or if that was a typo but for anyone wondering why the rippler color wont change in the newer versions, you can use this instead...

.jfx-tab-pane .tab-header-area .jfx-rippler{
    -jfx-rippler-fill: RED;
}

[peteralien]

I'm using the 1.7.0 version of jfoenix, but i can't change the color of the tabs selection bar :(
Everything works except changing the tabs selection bar color.

Here is the code i'm using:

.jfx-tab-pane
{
-fx-padding: 1px;
-fx-background-color: blue, -fx-control-inner-background;
-fx-background-insets: 0, 1;
}

.jfx-tab-pane .headers-region
{
-fx-background-color: cornflowerblue;
}

.jfx-tab-pane .tab-header-background
{
-fx-background-color: cornflowerblue;
}

.jfx-tab-pane .tab-header-area .jfx-rippler
{
-jfx-rippler-fill: orange;
}

.jfx-tab-pane .tab-header-area .tab-selected-line{
-fx-stroke: red;
}

Many thanks.

[jfoenixadmin]

Hello,
well JFoenix css properties has been updated, we replaced the prefix "-fx" with "-jfx" to distinguish jfoenix properties from original JavaFX properties.

Regards,

[Kooldeji]

For some reason, this doesn't update the selected line's color.

.jfx-tab-pane .tab-selected-line
{
-fx-stroke: #33ffff;
}

Please, correct this script...

[skmedix]

@Kooldeji

.jfx-tab-pane .tab-selected-line {
    -fx-background-color: #33ffff;
}

[Kooldeji]

@skmedix
Is it possible to Centralize the tabs on the top bar and also change their text fill. The regular
-fx-text-fill: #color;
ain't working.

[skmedix]

@Kooldeji Yeah, sure

.jfx-tab-pane .tab .tab-label {
    -fx-font-weight: normal;
    -fx-text-fill: #424242;
    -fx-font-size: 16;
}

.jfx-tab-pane .tab:selected .tab-label {
    -fx-text-fill: #000;
}

I didn't try tab alignment, but when I'll have more free time I'm gonna check it.

[ayushchadha23]

how could i change the "space" between tabs in JFXTabpane via css or java?