This discussion is archived
4 Replies Latest reply: Dec 6, 2012 11:04 PM by 956927 RSS

Global CSS definitions

956927 Newbie
Currently Being Moderated
Hy there,

i wonder if there is a possibility to declare some "global" custom styledefinitions.
Not global own style classes, because i know how to do that.
Further i mean to do some -fx-customColor: #666666;
and use that definition on a button:
-fx-background-color: -fx-customColor;

i know that there is a -fx-color where all colors can be derived but i need to define
more than one custom color ;)

  • 1. Re: Global CSS definitions
    David Grieve Pro
    Currently Being Moderated
    JavaFX CSS has a property value 'lookup' feature that works for paint valued properties. If the parser encounters a value that is not a paint, it marks that value as needing to be looked up. When the style is applied, the code that calculates the actual value will look for a property with the same name as the lookup value. In your example, the code will look for a property named "-fx-customColor". The property must be defined somewhere in the styles that apply to either the node or the node's ancestors. Typically, people will put the value in the .root rule since that matches the root node of the scene graph. If the lookup fails, an warning message is logged.

    .root {
    -fx-customColor: chartreuse;

    See for more.
  • 2. Re: Global CSS definitions
    James_D Guru
    Currently Being Moderated
    For colors you can. See and scroll down to "Looked Up Color".
  • 3. Re: Global CSS definitions
    jsmith Guru
    Currently Being Moderated
    An interesting thing is that you can override the defined colors in a scope specific way.

    For example in caspian.css -fx-base under the .root style class is defined as a -fx-base: #d0d0d0; which gives it a light grey color (which is horrible IMO as the gray color themes look so 90s).
    But, you can define a custom stylesheet and under it's .root set -fx-base: antiquewhite and then everything is this nice antique white color rather than a metallic silver color.
    Now if you would like all of your buttons in peach and your scroll bars in gold, under the .button style set -fx-base to peachpuff and for .scroll-bar set -fx-base to palegoldenrod.
    You can also define a styleclass bigredeasy button with a -fx-base of firebrick and -fx-font-size of 5em and any button you assign that styleclass will have nice big letters on a red background.
    This trick also works for inline styles, so if you only want to create one bigredeasy button, instead of using a styleclass, you could button.setStyle("-fx-base: firebrick; -fx-font-size: 5em;") in the code.

    The great thing about all this is that when you redefine -fx-base everything else in caspian is derived from it, including all of the gradients, the enable/disable coloring, the hover and pressed state coloring etc. These means you don't lose all of the visual candy (some of which is integral to the UX of the whole UI) from the default css style like you would if you instead did button.setStyle("-fx-background-color: firebrick");

    So, for your example, I'd suggest:
    .root {
      -fx-custom-color: #666666;
    .button {
      -fx-base: -fx-custom-color;
  • 4. Re: Global CSS definitions
    956927 Newbie
    Currently Being Moderated
    Hy thats what i needed. Thx


  • Correct Answers - 10 points
  • Helpful Answers - 5 points