Overriding caspian.css -fx-background

John Hendrikx hjohn at xs4all.nl
Wed Jul 17 04:33:37 PDT 2013


So,

I'm having huge problems trying to make a simple change to a control to 
give it a custom look.  Something that used to look exactly right on 
JavaFX 2.2 is now (since say 6 months) being overriden by the standard 
css and I just cannot find any way to get rid of it.  It seems to be 
related to an (undocumented??) property -fx-background -- I cannot find 
what this does, but it seems to specify a background color, just like 
-fx-background-color.... although they're often used in combination, 
like so:

.list-view:focused > .virtual-flow > .clipped-container > .sheet > 
.list-cell:filled:focused:selected {
     -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, 
-fx-selection-bar;
     -fx-background-insets: 0, 1, 2;
     -fx-background: -fx-accent;
     -fx-text-fill: -fx-selection-bar-text;
}

Note that -fx-focus-color is the same as -fx-accent...

Anyway, I want to override this standard "caspian bright blue" color 
used to highlight items to something else.  For TreeCells, this used to 
be enough:

.list-cell:focused, .tree-cell:focused {
   -fx-background-insets: 1, 1, 1;
   -fx-background-color: radial-gradient(center 25% 0%, radius 25%, 
color-blue 0%, transparent),
                         radial-gradient(center 75% 100%, radius 25%, 
color-blue 0%, transparent),
                         linear-gradient(to right, transparent, 
color-blue-20 15%, color-blue-20 85%, transparent);
}

...but the only time this gradient will show is when my Stage does not 
have the focus (or I guess when the tree control it is used in does not 
have the focus -- I don't know, I only have one control).

Now, no matter what I do, when the window has the focus and some cell is 
selected, it will display that solid blue highlight color in 
caspian.css... and I've tried a lot of things.  For some reason 
-fx-background is overriding whatever I do with -fx-background-color.  I 
tried this for example:

.tree-view:focused .tree-cell:focused,
.tree-view:focused .tree-cell:selected,
.tree-view:focused .tree-cell:focused:filled,
.tree-view:focused .tree-cell:selected:filled,
.list-cell:focused, .tree-cell:focused,
.list-cell:focused:selected, .tree-cell:focused:selected,
.list-cell:focused:filled, .tree-cell:focused:filled,
.list-cell:focused:selected:filled, .tree-cell:focused:selected:filled,
.list-cell:selected:filled, .tree-cell:selected:filled,
.list-cell:selected, .tree-cell:selected {
   -fx-background: transparent;
   -fx-background-insets: 1, 1, 1;
   -fx-background-color: radial-gradient(center 25% 0%, radius 25%, 
color-blue 0%, transparent),
                         radial-gradient(center 75% 100%, radius 25%, 
color-blue 0%, transparent),
                         linear-gradient(to right, transparent, 
color-blue-20 15%, color-blue-20 85%, transparent);
}

Note the "-fx-background: transparent".  No matter what I put there, or 
even if I leave it out, it will override the gradient I set.  So putting 
"-fx-background: black" results in a black background, no gradient 
(except when unfocused).  Putting transparent makes it caspian blue 
(aargh), no gradient... leave it out completely, and I get caspian 
blue... set it to null, I get a transparent background (or black, I 
can't tell) but still no gradient.

How do I just show my gradient??

--John




More information about the openjfx-dev mailing list