I am trying to change the style of the javafx spinner using a css stylesheet.
However, when changing the colour I can only change the colour of the text field and the arrow buttons to the side of spinner still look like the default.
How can I change the colour of these buttons too?
Set the -fx-body-color that is used as background for the buttons:
.spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
-fx-body-color: yellow;
}
.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
/* interpolate color between yellow and red based on first color brightness */
-fx-body-color: ladder(#444, yellow 0%, red 100%);
}
.spinner .increment-arrow-button:hover:pressed,
.spinner .decrement-arrow-button:hover:pressed,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
/* interpolate color between yellow and red based on first color brightness */
-fx-body-color: ladder(#AAA, yellow 0%, red 100%);
}
Those are used by the default stylesheet as the button's background color.
I know the OP figured it out but I'm putting this here in case someone else needs an answer.
You can edit spinner buttons with these selectors:
.spinner .increment-arrow-button {}
.spinner .decrement-arrow-button {}
.spinner .increment-arrow-button:hover {}
.spinner .decrement-arrow-button:hover {}
.spinner .increment-arrow-button:pressed {}
.spinner .decrement-arrow-button:pressed {}
If you'd like to edit the arrows inside the buttons themselves, use these selectors:
.spinner .increment-arrow-button .increment-arrow {
/* The default Modena styling */
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
/* The default Modena styling */
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
Here is another helpful tip for something people may also run into: changing the color in the area behind the buttons.
Setting these selectors to have a transparent background will remove the highlighted areas behind the buttons within the spinner.
You can achieve that with something like this:
/* In general */
.spinner {
-fx-background-color: transparent;
}
/* On user interaction */
.spinner:focused,
.spinner:contains-focus {
-fx-background-color: transparent;
}
Just a few things I picked up while creating my own dark theme stylesheet that I use for school projects.
Related
I want to change width for increase and decrease arrow buttons in JavaFX 11 (not change the layout).
I've tried the following CSS, but that doesn't work
.spinner .increment-arrow-button {
-fx-pref-width: 50px;
}
This one works, however it stretches the arrow itself. I'd like to resize the button, not the glyph.
.spinner .decrement-arrow-button .decrement-arrow {
-fx-pref-width: 50px;
}
Setting min/max width doesn't change a thing either.
Try playing around with the -fx-padding for the following style classes
The following reduces the width of buttons and arrows
.spinner .increment-arrow-button {
-fx-padding: 1 2 1 2; /*caspian.css values are 4 8 4 8 */
}
.spinner .decrement-arrow-button {
-fx-padding: 1 2 1 2; /*caspian.css values are 3 8 6 8 */
}
.spinner .increment-arrow-button .increment-arrow {
-fx-padding: 2 3 2 3; /*caspian.css values are 2 4 2 4 */
}
.spinner .decrement-arrow-button .decrement-arrow {
-fx-padding: 2 3 2 3; /*caspian.css values are 2 4 2 4 */
}
You might have to increase the padding on left and right to make buttons wider.
I want to create button in JavaFX having the following style:
I tried to use linear-gradient, but not able to add horizontal and vertical gradient at the same time.
Will you please help to create CSS for the above button style?
As per the comments I am including the css, that I have done so far :
.button-sales {
-fx-border-width: 4px;
-fx-border-color: white rgb(7,2,226) rgb(7,2,226) white;
-fx-background-radius: 0,0,0,0;
-fx-background-color: rgb(0,0,254);
-fx-font-weight: bold;
-fx-font-size: 1.1em;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, rgb(7,2,226) 0%, rgb(7,2,226) 100%),
white,
rgb(0,0,254);
}
but above css not exactly match with the button I required. Please help.
I have a problem with the CSS properties of a ComboBox-Popup. In the picture you see a tiny white line between rounded border an the list cell element.
I think this line is a background color or a border from a other css property.
Have you any idea which css property I must change?
This picture show you on the right side my problem with the white line. On the left side you see a menubar without any line.
In this screenshot I have removed all combobox css properties and you can see a gap beetween the border an the selected cell.
Here is the css combobox property of my stylesheet.
-fx-base and fx-color = dark grey background color
-fx-accent = green hover and highlight color.
.combo-box-popup .list-view {
-fx-color: -fx-base;
-fx-background-color:
derive(-fx-color,-40%),
derive(-fx-color,100%),
linear-gradient(to bottom, derive(-fx-color, 15%) 0%, derive(-fx-color, 40%) 15%, derive(-fx-color,55%) 75%, derive(-fx-color,15%) 100%);
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
-fx-padding: 0.333333em 0.333333em 0.666667em 0.083333em;
}.combo-box-popup .list-view .list-cell:filled {
-fx-background-color: transparent;
-fx-text-fill: white;
}
.combo-box-popup .list-view .list-cell:filled:hover {
-fx-background-color: -fx-accent;
}
.combo-box-popup .list-view .list-cell:filled:selected {
-fx-background-color: -fx-accent;
}
I found the solution. The transparency for the list-view was not set.
.combo-box-popup .list-view .list-cell {
-fx-background-color: transparent;
}
I'm attempting to style the borders of my context menus in JavaFX with CSS.
The Problem
I want a 1 pixel, solid black line as the border of the context menu. Instead, I'm getting a 2 pixel, solid black line as the border of the context menu.
Here are two images showing the pixel border.
100%
1000%
Clearly, there are 2 pixels being rendered instead of 1 pixel for the border.
CSS
I'm setting the border with the following CSS:
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: red;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-effect: null;
-fx-border-width: 1; /* I also tried 1px here */
-fx-border-color: black;
-fx-border-style: solid outside line-cap square;
-fx-padding: 0;
}
I also set the child nodes to transparent borders and backgrounds just to rule out that they were responsible:
.context-menu .menu-item,
.context-menu .menu-item .label {
-fx-background-color: transparent;
-fx-border-color: transparent;
}
Question(s)
Why am I getting a 2 pixel border, instead of a 1 pixel border?
How can I get a 1 pixel border, instead of this 2 pixel border?
There are a couple of answers already on StackOverflow that explain why the strokes can't seem to render a 1px border all of the time:
JavaFX graphics “blurred” or anti-aliased? (No effects used)
What are a line's exact dimensions in JavaFX 2?
The best workaround I've found for this issue is to not use borders at all. Instead, I use multiple backgrounds and -fx-background-insets to simulate a border:
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: black, red;
-fx-background-insets: 0, 1;
}
That's all it takes for a clean, 1 pixel, hard border
I have a ListView and want the following:
Odd rows with white background color;
ListView: when mouse over an item, highlight with a blue shade;
ListView: when an item is selected, paint it with a gradient;
ListView: when focus is lost from ListView, selected item should be painted with gradient;
ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
That's my code. It's working fine, except for the even rows: on mouse over, it highlight in white. So, the text's white and can't be showed. What's wrong with it?
.list-cell:filled:selected:focused, .list-cell:filled:selected {
-fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
-fx-text-fill: white;
}
.list-cell:odd {
-fx-cell-hover-color: #0093ff;
-fx-background-color: white;
}
.list-cell:filled:hover {
-fx-cell-hover-color: #0093ff;
-fx-text-fill: white;
}
Thanks in advance.
EDIT:
Slightly changing your css:
.list-cell:filled:selected:focused, .list-cell:filled:selected {
-fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
-fx-text-fill: white;
}
.list-cell:even { /* <=== changed to even */
-fx-background-color: white;
}
.list-cell:filled:hover {
-fx-background-color: #0093ff;
-fx-text-fill: white;
}
This css produces the following presentation:
Does this give what you expect?
I changed odd to even. The first cell is even, because its index value is 0 (zero). Also -fx-cell-hover-color is not valid. I changed it to -fx-background-color where needed or removed it.
Original text: (note that this has different interpretation of odd/even)
My take would be this:
(I included your requirements in a numbered list for reference in the css. I also made the gradient more obvious and added a green background for even cells.)
/*
1. Odd rows with white background color;
2. ListView: when mouse over an item, highlight with a blue shade;
3. ListView: when an item is selected, paint it with a gradient;
4. ListView: when focus is lost from ListView, selected item should be painted with gradient;
5. ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
*/
.list-cell:filled:selected:focused, .list-cell:filled:selected {
/* 3:, 4: */
-fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%);
-fx-text-fill: white; /* 5 */
}
.list-cell { -fx-text-fill: black; /* 5 */ }
.list-cell:odd { -fx-background-color: white; /* 1 */ }
.list-cell:even { -fx-background-color: #8f8; /* for information */ }
.list-cell:filled:hover {
-fx-background-color: #00f; /* 2 */
-fx-text-fill: white; /* 5 */
}
This leads to this rendering: