[SOLVED] How to stylize JFoenix for JavaFX Scene Builder nodes and classes in CSS?

How to stylize JFoenix for JavaFX Scene Builder nodes and classes in CSS?

I'm trying to add my custom values to a JFXButton property class in the CSS stylesheet but I can't make these work:

.eliminarBtn {
    -fx-background-color: #eb490f; //This work
    -fx-font-color: WHITE; //This doesn't work
    -fx-font-weight: bold; //This doesn't work. Edit: had to refresh(works) 
    -fx-font-size: 20px; //this work
    -fx-background-radius: 8px; //This work
}

In this case, I know some of its values because Scene Builder has a drop-down to choose which and then I can type it out in the stylesheet. The others I tried using HTML standard with -fx- and hope to have it running but it didn't. So how do I add weight and color to the button text instead? By the way, I can set the CSS classes for any button node I need too.

Also, if you have a guide for JavaFX styles and/or JFoenix components please add me the link. Thanks.

Solution

You can check the JavaFX CSS Reference Guide for more information about JavaFX's components' style classes and their default values.

JFXButton extends JavaFX's Button and it seems to add only one extra CSS property which is -jfx-button-type, the two possible values are FLAT (default) and RAISED. Answering your question, you can change the color and weight of a JFXButton's text using the following CSS:

.button {
    -fx-text-fill: WHITE;
    -fx-font-weight: BOLD;
}

A raised JFXButton can be created in CSS like this:

JFXButton raisedButton = new JFXButton("RAISED BUTTON");
button.getStyleClass().add("button-raised");

.button-raised {
    -jfx-button-type: RAISED;
    -fx-background-color: TURQUOISE;
    -fx-text-fill: WHITE;
    -fx-font-weight: BOLD;
}