This discussion is archived
5 Replies Latest reply: Jul 7, 2011 9:07 AM by 854072 RSS

Separator and CSS

854072 Newbie
Currently Being Moderated
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 Guru Moderator
    Currently Being Moderated
    Have you tried <tt>-fx-background-color</tt>?

    db
  • 2. Re: Separator and CSS
    854072 Newbie
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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

Legend

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