5 Replies Latest reply: Jul 7, 2011 11:07 AM by 854072 RSS

    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.
              • 4. Re: Separator and CSS
                David Grieve
                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