Search code examples
javafxjfoenix

JavaFX JFoenix - I can't change the color of the Tabs Selection Bar


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 Car color. Can anyone help me with this.

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.


Solution

  • This worked for me:

    .jfx-tab-pane:top .depth-container .tab-header-area .headers-region .tab-selected-line {
        -fx-background-color: green;
    }
    

    I'm using SceneBuilder. I got to this path by displaying the CSS Analyzer and then clicking on the bar itself with the CSS picking mod in the bottom right corner of the screen.

    Then messing around, your original path works too:

    .jfx-tab-pane .tab-header-area .tab-selected-line {
        -fx-background-color: #ffffff;
    }
    

    Seems like it's just changing "stroke" to background-color". Hope this helps! It was frustrating me too. Oh, and I decided to try background-color because it's been working for most other color changes, and the CSS Analyzer lists it as a field when the element is selected. It's been hard to find out what these properties are named when trying to make changes.