I am styling a checkbox inside a menu button, and i am trying to change the color of the box's background but it appears the size of it (red) is larger than the margin (yellow), how can I change the size or what would be the attribute to change? I tried changing the size attribute in CSS but it is not working.
.menu-item .check-box > .box {
-fx-background-color: red;
-fx-border-color: yellow;
}
Example Link
Related
How do I set hyperlink color to black, which is by default blue?
source=new Hyperlink("source"); source.setFont(Font.font("Arial", 20));
source.setLayoutX(920); source.setLayoutY(900);
source.setTooltip(new Tooltip("Github"));
layout.getChildren().add(source); // here layout is Pane layout
I want to set the color of source hyperlink to black.
You can change it in CSS:
.hyperlink {
-fx-text-fill: black;
}
Is there any way to change the color of a selected TreeView item, instead of the default red and blue color that shows when a TreeItem is selected
This is not a standard java TreeView, I noticed that you're using JFoenix's tree view JFXTreeView. You can change the color of this selection bar by applying:
.tree-cell .selection-bar {
-fx-background-color: green;
}
To change that background color:
.tree-cell:selected {
-fx-background-color: green;
}
I added a MenuButton and assigned an icon for its graphic. Whenever I hover over the graphic, the color changes from black to blue. The problem is, I don't need to precisely hover over the graphic in order to open the menu. If I were to click on any of the places marked with the red dots the options appear below.
I've looked around and managed to remove as many things as I could find using the following CSS:
#menubutton {
-fx-background-color: transparent;
-fx-background-insets: 0 0 0 0;
-fx-border-color: transparent;
-fx-padding: 0;
}
#menubutton > .arrow-button {
-fx-background-color: transparent;
-fx-padding: 0;
}
#menubutton > .arrow-button > .arrow {
-fx-background-color: transparent;
-fx-padding: 0;
}
But if clicking on those places stills opens the menu options, then it seems like there's still some space between the icon and the border of the button. In this example you can see the space more clearly.
Is there a way to either remove that space or give an icon the functionality of a MenuButton without the button itself?
P.S. The other icons work fine because they're by themselves and not as a graphic in a button.
You need to also turn off the padding to the label within the menu button.
#menubutton > .arrow-button,
#menubutton > .label{
-fx-background-color: transparent;
-fx-padding: 0;
}
I have tried the following with no success:
.tree-view {
-fx-skin: "com.sun.javafx.scene.control.skin.TreeViewSkin";
-fx-background-color: green, -fx-control-inner-background;
-fx-background-insets: 0, 1;
}
What I am trying to achieve is to set a blue background for an entire TreeView except the selected one. Setting the background on the selected tree item works fine, but changing for the entire tree view does not have any effect.
You can color the individual TreeCells by using the .tree-cell selector:
.tree-view {
-fx-background-color:lightsteelblue;
}
.tree-cell {
-fx-background-color:lightsteelblue; // Default color
}
.tree-view:focused .tree-cell:filled:selected {
-fx-background-color:indigo; // Focused color
}
.tree-cell:filled:selected{
-fx-background-color:lightcyan; // Unfocused color
}
Produces something like this:
How can you style a ChoiceBox in JavaFX with CSS? The only things I have found out is how to change the background and the text color.
// Background Color
.cb {
-fx-background-color: #HEX;
}
// Text Color
.cb .label {
-fx-text-fill
}
What I am still missing is the highlighting color when hovering the items and the background color of the dropdown list. Also the little arrow. Unfortunately I have found no documentation or anything that helps.
EDIT:
#James_D gave a great link to find out stylings: Modena.css
That way I figured out how to color the white background black.
.cb .context-menu {
-fx-background-color: black;
}
For the highlighting color:
.cb .menu-item:focused {
-fx-background-color: yellow ; /* for example */
}
The background color of the dropdown list:
.cb .context-menu {
-fx-background-color: antiquewhite ;
}
For the arrow:
.cb {
-fx-mark-color: green ;
}