5 Replies Latest reply on Jul 7, 2011 4:07 PM by 854072

    Separator and CSS

    854072
      Hi,

      Anybody knows how to properly change the (line) color of a Separator?

      -fx-base doesn't work.
      -fx-border-color mess it up.

      Thanks in advance...
        • 1. Re: Separator and CSS
          darrylburke
          Have you tried <tt>-fx-background-color</tt>?

          db
          • 2. Re: Separator and CSS
            854072
            yes, but it is for the background...

            as it's shown here
            http://download.oracle.com/javafx/2.0/ui_controls/separator.htm#BGBIGJJG

            if you don't set up the insets, it also mess up the painting.
            • 3. Re: Separator and CSS
              jojorabbit
              Hi,

              separator only shows little tiny line because it has low padding values like this : -fx-padding: 1 0 0 0 so -fx- background-color does not "change" (well it changes but we can't see changes) anything but -fx-border-color does.
              try this code i commented as much i could so maybe u will get better understanding of insets, padding etc.

              .separator{
                  -fx-background-color: #e79423; 
                  -fx-background-radius: 5;
                  -fx-background-insets: -2 -1 -2 -1; /* top right bottom left */ 
                  -fx-padding: 2; /* if 0 then bg color #e79423 won't be seen */
              }
              
              .separator:vertical .line { 
                  /* 
                  line is region or stackpane (not sure about that) has -fx-padding property see jfx CSS StackPane for more info here : 
                  see CSS Ref: http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene/doc-files/cssref.html#stack
                  -fx-background-insets applies only to background colors not borders:
                  see here: http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene/doc-files/cssref.html#region
                  */
                  -fx-background-color: yellow, red; /* if padding lets say >=3 line becomes rectangle and bg color can be seen */
                  -fx-background-insets: 2, 8 4 8 4; /* as i know insets only apply to background not border */ 
                  -fx-border-color: green; /* changes line/border color of line/region */
                  -fx-border-width: 2; /* width of line/border */
                  -fx-border-radius: 5;
                  -fx-border-style: dashed;
                  -fx-padding: 3 5 3 5; /* change this to : 1 0 0 0 and only thin line will be visible for "stronger/fatter" line change to 1 1 1 1 */
                  /* for -fx-padding we can say that it in some way "resizes" that line/region */
                  /* or you can use -fx-shape to setup bigger line shape */
              }
              
              .separator:horizontal .line {
                  -fx-background-color: yellow, blue; /* if padding lets say >=3 line becomes rectangle and bg color can be seen */
                  -fx-background-insets: 1 3 1 3, 4 8 4 8; /* as i know insets only apply to background not border */ 
                  -fx-border-color: green; /* changes line/border color of line/region */ 
                  -fx-border-width: 2; /* width of line/border */
                  -fx-border-radius: 5;
                  -fx-border-style: dashed;
                  -fx-padding: 5 3 5 3; /* change this to : 1 0 0 0 and only thin line will be visible for "stronger/fatter" line change to 1 1 1 1 */
              }
              Hope it helps.
              1 person found this helpful
              • 4. Re: Separator and CSS
                David Grieve-Oracle
                Here is the relevant section of caspian.css. Notice that it is the .line style that specifies the style of the separator line. You can extract caspian.css from jfxrt.jar.
                .separator {
                    -fx-skin: "com.sun.javafx.scene.control.skin.SeparatorSkin";
                }
                
                .separator .line {
                    -fx-border-style: segments(0.166667em, 0.166667em);
                    -fx-border-width: 0.083333em; /* 1 */
                }
                
                .separator:horizontal .line {
                    -fx-background-color: null;
                    -fx-padding: 0.083333em 0.0em 0.0em 0.0em; /* 1 0 0 0 */
                    -fx-border-color: derive(-fx-background,-20%) transparent transparent transparent;
                }
                
                .separator:vertical .line {
                    -fx-background-color: null;
                    -fx-padding: 0.0em 0.083333em 0.0em 0.0em; /* 0 1 0 0 */
                    -fx-border-color:  transparent derive(-fx-background,-20%) transparent transparent;
                }
                -fx-border-color is four paint values - one for each edge of the border. In other words, the syntax is: -fx-border-color: <paint> <paint> <paint> <paint>;
                Here, we see that the horizontal line color is 20% of the -fx-background for the top edge and transparent for the others. For the vertical line, the line color is again 20% of the -fx-background color for the right edge and transparent for the others.

                You have a few options here. One is to create your own stylesheet and provide your own style.
                .separator:horizontal .line {
                    -fx-border-color: red transparent transparent transparent;
                }
                
                .separator:vertical .line {
                    -fx-border-color: transparent red transparent transparent;
                }
                Or you could do this in your stylesheet and you'll get 20% of red for the line color:
                .separator .line {
                    -fx-background: red;
                }
                Or you could .setStyle("-fx-background: red;") on the Separator instance. But note that this option will change the -fx-background value for the separator as a whole, not just the line.

                Edited by: dgrieve on Jul 7, 2011 4:34 AM
                • 5. Re: Separator and CSS
                  854072
                  Thanks...

                  This will do the job correctly...
                  Thanks for the explanation also....


                  By the way, I remember oppening this thread in JavaFx 2.0 or later.

                  Edited by: talizmelf on Jul 7, 2011 9:06 AM