1

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.

Pedro Figueiredo
  • 457
  • 5
  • 13

2 Answers2

5

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.

B-man
  • 66
  • 3
0

In file.css

.tab-background{
-fx-background-color: #ff6e37;
}

In scene builder preview/scene style sheets/add a style sheets/search for mi file.css

in properties/Style Class/tab-background
tab-background is your function in this case, i hope was usefull

Algorithm
  • 21
  • 3