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.
Related
I have a problem with CSS on TreeTableView.
For TableView when I define CSS like this :
.table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-fill: white;
}
The selected rows have text in white even if I click out of the table
For TreeTableView I have defined CSS like this :
.tree-table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-fill: white;
}
The selected rows have text in white but when I click out of the table the text change to black
Does someone know how can I solve this ?
Thank you
Try setting the text fill on the cells themselves, instead of the row cells:
.tree-table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
}
.tree-table-row-cell:selected .tree-table-cell,
.tree-table-cell:selected {
-fx-text-fill: white;
}
You probably also want
.tree-table-row-cell:selected .tree-disclosure-node .arrow {
-fx-background-color: white ;
}
For a slightly different approach:
The default behavior of the modena stylesheet is to set the text fill to a "looked up color" called -fx-text-background-color. This is set to a "ladder", which is a function based on the value of another looked-up color called -fx-background. The background color of the rows and cells is defined in terms of -fx-background.
The way the "ladder" works is if the intensity of -fx-background is less than 45%, the ladder evaluates to -fx-light-text-color (white), between 46% and 59% it evaluates to -fx-dark-text-color (black) and above that to -fx-mid-text-color (grey).
So typically, you can simply change -fx-background (instead of -fx-background-color) and the text will change to something appropriate:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
}
In your case, this won't quite give you what you want. The color you chose as the background isn't dark enough to trigger the light text color; the intensity is about 58%, so it evaluates to black.
If you use a darker background, say #d1531f, then you see the white text with no additional changes.
You can fix this by adjusting the ladder itself so the intensity thresholds are different:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-background-color: ladder(
-fx-background,
-fx-light-text-color 60%,
-fx-dark-text-color 61%,
-fx-dark-text-color 69%,
-fx-mid-text-color 70%
);
}
or perhaps just by bypassing the ladder entirely and setting -fx-text-background-color directly to the light text color:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-background-color: -fx-light-text-color;
}
This is more complex (perhaps) but is more in the style of the default CSS. It works with the cells without explicitly having to change the CSS for those (basically, looked-up colors are inherited), and the disclosure arrow automatically has the same color as the text.
I'm trying to figure out the CSS for highlighting the top of a TableRow. I'm using this for reordering rows so that anyone reordering them can tell where it will be inserted. Currently I've only been able to draw a rectangle around the row, but I just want the top line of that rectangle.
.table-row-cell.drag {
-fx-focus-color: #00a9d3;
-fx-faint-focus-color: #00a9d322;
-fx-highlight-fill: -fx-accent;
-fx-background-color:
-fx-focus-color,
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: -0.2, 1, -1.4, 3;
-fx-background-radius: 3, 2, 4, 0;
}
You could specify different -fx-background-insets for the sides. If one color should only appear on one side, the insets of the next color match the insets for the mark color except for the side that should be colored.
Furthermore I recommend using PseudoClass instead of a style class, since this way you don't need to make sure to not add a class multiple times.
final PseudoClass mark = PseudoClass.getPseudoClass("mark");
...
boolean marked = ...
row.pseudoClassStateChanged(mark, marked);
The following CSS is a bit simplified, but it should demonstrate the approach:
.table-row-cell:mark {
-fx-background-color: -fx-table-cell-border-color, red, -fx-background;
/* show red highlight of size 2 at the top */
-fx-background-insets: 0, 0 0 1 0, 2 0 1 0;
}
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 want to change font color in TextField .I found -fx-background-color , -fx-border-color for changing the color of background and border but nothing for text.
Setting the -fx-text-fill works for me.
See below:
if (passed) {
resultInfo.setText("Passed!");
resultInfo.setStyle("-fx-text-fill: green; -fx-font-size: 16px;");
} else {
resultInfo.setText("Failed!");
resultInfo.setStyle("-fx-text-fill: red; -fx-font-size: 16px;");
}
The CSS styles for text input controls such as TextField for JavaFX 8 are defined in the modena.css stylesheet as below. Create a custom CSS stylesheet and modify the colors as you wish. Use the CSS reference guide if you need help understanding the syntax and available attributes and values.
.text-input {
-fx-text-fill: -fx-text-inner-color;
-fx-highlight-fill: derive(-fx-control-inner-background,-20%);
-fx-highlight-text-fill: -fx-text-inner-color;
-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
-fx-cursor: text;
-fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
.text-input:focused {
-fx-highlight-fill: -fx-accent;
-fx-highlight-text-fill: white;
-fx-background-color:
-fx-focus-color,
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: -0.2, 1, -1.4, 3;
-fx-background-radius: 3, 2, 4, 0;
-fx-prompt-text-fill: transparent;
}
Although using an external stylesheet is a preferred way to do the styling, you can style inline, using something like below:
textField.setStyle("-fx-text-inner-color: red;");
If you are designing your Javafx application using SceneBuilder then use -fx-text-fill(if not available as option then write it in style input box) as style and give the color you want,it will change the text color of your Textfield.
I came here for the same problem and solved it in this way.
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