Overriding caspian.css -fx-background

[David Grieve]

Probably a question better put to the OTN forums, but…

In caspian.css, you'll find

    /* A very light grey used for the background of windows.  See also
     * -fx-text-background-color, which should be used as the -fx-text-fill
     * value for text painted on top of backgrounds colored with -fx-background.
     */
    -fx-background: #f4f4f4;

and 

    /* A bright blue for highlighting/accenting objects.  For example: selected
     * text; selected items in menus, lists, trees, and tables; progress bars;
     * default buttons.
     */
    -fx-accent: #0093ff;

So if you want to change the bright blue, play with the accent color. For example, in your stylesheet you could change the accent color to yellow by 
	.root { -fx-accent: yellow; }

Note that by the way it is used in caspian, it needs to be a Color, not a Paint. 

On Jul 17, 2013, at 7:33 AM, John Hendrikx <hjohn at xs4all.nl> wrote:

> 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
> 
>