I wan't to change the color of any button in my application from red to blue fluent when the mouse is over it.
This is my css code so far:
.button{
-fx-background-color: rgb(225,0,0);
}
.button:hover{
-fx-background-color: rgb(0,0,255);
transition: -fx-background-color 2s;
}
Now I'm looking for something like this:
.button:hover{
transition: -fx-background-color 2s;
}
Related
I'm making some function in my application with JavaFX and Scene Builder
I can pick a color when clicking on JFoenix Color Picker and then this color applies to my label background
I made JFOenix Color Picker look like an icon. I had changed the standart appearence of Color Picker to my image
Problem #1:
Color Picker is totally filled with white color when I lanch a program first time and then it become looks like my icon when I move the mouse over it.
Problem #2:When I click my icon with Color Picker ripple effect works, but I don't need any ripple effect or animation when I click on Color Picker
Problem #3: JFoenix Color Picker also applies chosen color to it's own background and it's appearence become to icon image again when I move mouse over it again
Problem #4:
When Color Picker is placed in Stack Pane The Color Picker dialog window appears only when I click on left side of the icon, it looks like right side of Color Picker icon is disabled, but I need Color Picker dialog window to be appeared when I click to any part of Color Picker icon
I was searching into CSS files of JFoniex Color Picker, but there is no any documentation how to customize properly Color Picker in CSS.
Please, help me as much as you can
*I had an idea to use toggle button(I know how to customize it to my own needs) and place Color Picker backward this toggle button and make opacity 0. But I don't know how to make Color Picker dialog window open When I click on toggle button. Any ideas?
I use method that is called when I click Color Picker to fill label's background with color.
Controller class:
#FXML private Label category1;
#FXML private JFXColorPicker colorPickerCategory;
#FXML
void changeCategoryColor(ActionEvent event) {
Color selectedColor = colorPickerCategory.getValue();
category1.setBackground(new Background(new BackgroundFill(Paint.valueOf(selectedColor.toString()), CornerRadii.EMPTY, Insets.EMPTY)));
}
CSS:
.jfx-color-picker .color-box {
-fx-background-image: url("resources/palette.png");
-fx-background-color: transparent;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-size: contain;
}
.jfx-color-picker:armed,
.jfx-color-picker:hover,
.jfx-color-picker:focused,
.jfx-color-picker {
-fx-background-color: transparent, transparent, transparent, transparent;
-fx-background-insets: 0px;
}
.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
-fx-stroke: null;
-fx-fill : null;
}
.color-picker {
-fx-background-color: transparent;
-fx-color-label-visible: false;
}
.color-picker .color-picker-label .picker-color {
-fx-alignment: center;
}
.color-picker .color-picker-label .text {
-fx-fill: transparent;
}
.jfx-color-picker:default{
-fx-background-color: transparent;
}
Video
Scene Builder Screen
The skin-class of the JFXColorPicker contains a pane and a label which have the style classes color-label and color-box, respectively. The label is contained in the pane.
The following css displays the icon without background (=selected color) and without text (=hex value of selected color)
.jfx-color-picker {
-fx-focus-traversable: false;
-fx-color-label-visible: false;
}
.jfx-color-picker .color-label {
-fx-background-image: url("resources/palette.png");
-fx-background-color: transparent;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-size: contain;
}
.jfx-color-picker .color-box {
visibility: hidden;
}
The first part disables the text. The middle part is responsible for the display of the icon. The last part disables the background.
With that css the observed problems don't occur:
No white color, no hidden icon
Ripple-effect can be disabled optionally (programmatically)
Chosen color optionally not displayed in the background
No problems in StackPanes
My testcase consists of a BorderPane containing a StackPane in the center. The StackPane contains the JFXColorPicker and 3 buttons. The right part of the BorderPane contains a pane whose color is controlled by the color picker.
The following figures show the FXML in Scenebuilder (Fig. 1), the application immediately after the start (Fig. 2), the application after the color picker is clicked (Fig. 3) and the application after a color change (Fig. 4):
Fig. 1:
Fig. 2:
Fig. 3:
Fig. 4:
The following css displays the icon with background (=selected color) and with ripple but without text (=hex value of selected color)
.jfx-color-picker {
-fx-focus-traversable: false;
-fx-color-label-visible: false;
}
.jfx-color-picker .color-label {
-fx-background-image: url("resources/palette.png");
-fx-background-color: transparent;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-size: contain;
}
The following figure shows the application after a color change.
Fig. 5:
In order to display the icon with background (=selected color), but without ripple and without text (=hex value of selected color),
the following method has to be added to the controller:
public void disableRipple() {
JFXRippler rippler = (JFXRippler) jfxColorPicker.lookup("JFXRippler");
rippler.setDisable(true);
}
where jfxColorPicker denotes the color picker in the FXML.
The method has to be called in the main-method after the execution of the show-method:
FXMLLoader loader = new FXMLLoader(getClass().getResource("<path to FXML>"));
...
primaryStage.show();
...
Controller controller = loader.getController();
controller.disableRipple();
The skin-class of the JFXColorPicker is located at JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java.
Here the interaction of the controls can be studied.
EDIT: #Topaco wrote solution above, but I solved my problems in other way: I made toggle button and it's style to look like an icon. I placed JFOenix Color Picker above that toggle button and made Color PIcker's opacity to 0. It looks like I click on toggle button with icon, but I actually click on Color Picker because it is placed ABOVE toggle button.
JFoenix Color Picker is not wrapped into any Pane. It is placed just in Grid Pane as Stack Pane of toggle buttons. Color Picker is broght forward. Toggle Button is placed backward
When vboxs are focased can we use css to change them?
#vbox{
-fx-border-radius:8;
-fx-border-width:2;
-fx-border-color: #333333;
}
//this works
#myvbox:hover {
-fx-border-color: #455A64;
}
//this does not
#myvbox:focused{
-fx-border-color: #000000;
}
Hover works fine. But trying to set color of focused vbox it does not work.
I have been struggling to remove a blue highlight from a ContextMenu implementation when it is hovered over.
private void attachContextMenu() {
CustomMenuItem item = FilterPanel.getInMenuItem(this);
ContextMenu contextMenu = new ContextMenu();
contextMenu.getItems().add(item);
tableColumn.setContextMenu(contextMenu);
}
With the containing VBox I was able to paint it white and get rid of a majority of the blue flash.
filterVBox.setStyle("-fx-background-color: white;");
But i cannot figure out how to get the CustomerMenuItem to lose the blue border when focused with the mouse.I tried the following but it does not work
CustomMenuItem item = FilterPanel.getInMenuItem(this);
item.setStyle("-fx-text-fill: white;");
Here is the PR if you want the full picture, but does anybody have an idea how I can manipulate that to go away?
I was able to get it to go away by styling every MenuItem for the entire TableView with this CSS. But I'd like to apply it specifically to just that CustomMenuItem.
.menu-item:focused {
-fx-background-color: transparent;
}
Since the blue highlight happens when the ContextMenu gets the focus, you are dealing here with a Pseudoclass. In CSS, a pseudo-class is used to define a specific state of a node. Typical states are hover, selected, focused...
The way to deal with this is by adding a CSS file, where you can easily apply your style settings to any of the possible states.
First, apply a style class to your ContextMenu (so other controls using context menus don't get affected by these settings). For instance, column-filter:
private void attachContextMenu() {
CustomMenuItem item = FilterPanel.getInMenuItem(this);
ContextMenu contextMenu = new ContextMenu();
contextMenu.getStyleClass().add("column-filter");
contextMenu.getItems().add(item);
tableColumn.setContextMenu(contextMenu);
}
Then add the required styling rules to a css file:
style.css
.column-filter .context-menu {
-fx-background-color: white;
}
.column-filter .context-menu:focused {
-fx-background-color: white;
}
.column-filter .custom-menu-item {
-fx-background-color: white;
-fx-padding: 0;
}
.column-filter .custom-menu-item:focused {
-fx-background-color: white;
}
Finally you need to apply this stylesheet to the scene:
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
And you'll get rid of the highlight.
Hello Fellow StackOverflow Users, this is my first post/question and hopefully i'm not violating any rules/ect.
Unfortunately I am unable to post a picture, but I will put this here for a reference.
http://i.imgur.com/M0uckkg.jpg (Before Button Click)
OT: On the picture above, I am attempting to make the button's background completely transparent besides the text.
http://i.imgur.com/bFOEOVC.jpg (After Button Click)
Everything works out until I click the button then shadows appear on the side.
Here is what I have tried...
CSS
.toggle-button {
-fx-text-fill: black;
-fx-base: transparent;
-fx-background: transparent;
-fx-focus-color: transparent;
-fx-border-color: transparent;
-fx-effect: null;
}
.toggle-button:selected {
-fx-text-fill: black;
-fx-base: transparent;
-fx-background: transparent;
-fx-focus-color: transparent;
-fx-border-color: transparent;
-fx-effect: null;
}
The java code is just a plain simple application with a ToggleButton.
Special Thanks in Advance!
- Bart
I wouldn't recommend modifing the main color palette (-fx-base and others) for just one control. This makes sense if you're trying to style all of them.
Looking at how is defined in modena.css:
.toggle-button {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border,
-fx-inner-border, -fx-body-color;
-fx-text-fill: -fx-text-base-color;
}
.toggle-button:selected {
-fx-background-color: -fx-shadow-highlight-color,
linear-gradient(to bottom, derive(-fx-outer-border, -20%), ...),
linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}
.toggle-button:selected:focused {
-fx-background-color: -fx-focus-color,
linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...),
-fx-faint-focus-color, linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}
you will need to change all of them: -fx-shadow-highlight-color, -fx-outer-border,...
Instead, I'll just override the style of the toggle button with your requirements:
.toggle-button,
.toggle-button:focused,
.toggle-button:selected,
.toggle-button:selected:focused {
-fx-background-color: transparent;
-fx-text-fill: black;
}
NOTE I've edited my answer since, as #eckig suggests, it's redundant to apply the same color to the different comma separated values.
If you want to remove the button-like optics completely, I would suggest you to remove all existing styles and add your own style class as the only style class:
ToggleButton toggleButton = new ToggleButton("Login");
toggleButton.getStyleClass().setAll("my-custom-button");
Now you can apply only the styles you need:
.my-custom-button {}
Special Thanks to both of you, Jose & Eckig. I managed to edit my code with both your suggestions and it fixed the issue right away!
Here is a reference for anyone in the future.
Button Code
ToggleButton button= new ToggleButton("Login");
button.getStyleClass().add("custom");
CSS
.custom,
custom:selected {
-fx-background-color: transparent;
-fx-text-fill: black;
}
I am trying to hide box-border for tableView. When I hide that border then border for left side of columnHeader is missing.
Here is my css file:
.table-row-cell:empty {
-fx-background-color: lightyellow;
}
.table-row-cell:empty .table-cell {
-fx-border-width: 0px;
}
.table-view{
-fx-focus-color: transparent;
-fx-box-border: transparent
}
Here is image showing what I mean: