2

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.

Miss Chanandler Bong
  • 4,081
  • 10
  • 26
  • 36
Ultra
  • 55
  • 9

2 Answers2

3

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;
}
Miss Chanandler Bong
  • 4,081
  • 10
  • 26
  • 36
0

When using Scene Builder, the properties panel at the right side tells you the options available to modify: for example you can fill the text in the "Text Fill" area. However to implement the code you must add fx like so: 

-fx-text-fill: #colorvalue;

And so on for the other modifiers. However, there are modifiers that accept more than 1 value which I do not know of. Maybe those formats follow the css rules, you must start there too.

Ultra
  • 55
  • 9