4 Replies Latest reply on Dec 7, 2012 7:04 AM by 956927

    Global CSS definitions

      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-Oracle
          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 http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html for more.
          • 2. Re: Global CSS definitions
            For colors you can. See http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#typecolor and scroll down to "Looked Up Color".
            • 3. Re: Global CSS definitions
              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
                Hy thats what i needed. Thx