I'm trying to style ma Alert in JavaFX. My buttons in general are alright. This is what I have in my Java Class:
alert.getDialogPane().getStylesheets().add("/gui/style.css");
ButtonType importButtonType = new ButtonType("Importeer", ButtonData.OK_DONE);
ButtonType cancelButtonType = new ButtonType("Annuleer", ButtonData.CANCEL_CLOSE);
alert.getDialogPane().getButtonTypes().setAll(importButtonType, cancelButtonType);
And this is what I have in my CSS :
.dialog-pane .button {
-fx-font-family: 'Open Sans', sans-serif;
-fx-font-size: 14;
-fx-text-fill: #55595c;
-fx-background-color: #d0d0d0;
}
But I want to style my ButtonType with the ButtonData.OK_DONE in a different style. Any Ideas how?
I had the same problem and I found the solution by myself.
If someone is still interested :
Button okBtn = (Button) alert.getDialogPane().lookupButton(alert.getButtonTypes().get(index_of_the_OK_button));
okBtn.getStyleClass().add(your_custom_class);
with your custom class in your css file, it should work :)
To change the default button used in dialog/alerts, you can add the following to your css file.
.root { -fx-default-button: red; }
Another option would be to add the following:
.button:default { -fx-base: red; }
Related
I'm new to JavaFX, and am confused by styles. I'm using OpenJFX 13.0.1. I have the following simple scene:
val oscs = HBox()
val osc1 = VBox()
val title = Text("Osc 1")
title.styleClass.add("text")
osc1.children.add(title)
oscs.children.add(osc1)
val root = BorderPane()
root.children.add(oscs)
val scene = Scene(root, 500.0, 400.0)
I have two issues:
-fx-text-fill isn't working to color the text, whereas -fx-fill is. I.e.
.text {
-fx-fill: #44FFFF;
}
works, whereas:
.text {
-fx-text-fill: #44FFFF;
}
does not. According to the docs, it seems like this is wrong.
Inheritance isn't working as I'd expect it to. Shouldn't the child nodes inherit from root?
The following doesn't work to color the label, regardless of whether it's -fx-fill or -fx-text-fill.
.root {
-fx-font-size: 24px;
-fx-font-family: sans-serif;
-fx-fill: #44FFFF;
-fx-background-color: #000000;
-fx-border-color: #44FF00;
-fx-border-width: 2px;
}
What am I doing wrong?
You probably got Label and Text confused.
Text is a subclass of Shape and does not provide a -fx-text-fill property. Furthermore Shape's -fx-fill property is not inherited. See CSS Reference Guide.
Other than going with Label you could use a descendant selector to assign the fill:
.root .text {
-fx-fill: #44FFFF;
}
Edit:
Label's -fx-text-fill is not inherited either. You should be able to fix both cases by specifying inherit as value for the -fx-text-fill or -fx-fill properties. The following should work for Text:
.root {
-fx-fill: #44FFFF;
-fx-background-color: #000000;
}
.text {
-fx-fill: inherit;
}
I have a JavaFX ListView with an custom styleclass (selectlist). This should be styled different to all other ListViews in the application.
How can I style it's cells?
I have tried thisone in css file, but doesn't work:
.list-cell:even > .selectlist {
-fx-background-color: white;
}
.list-cell:odd > .selectlist{
-fx-background-color: white;
}
Would be nice if you could give me a hint...
Thanks in advance
I wanna create a TabPane with some Tabs. If a tab is selected, it shows an image (in the header, not the content), but others will not show the image.
I use the setGraphic method to add an Image, here is my code:
TabPane tabpane = new TabPane();
Tab tab = new Tab();
tab.getStyleClass().add("ctab");
Label value = new Label();
value.getStyleClass().add("va");
tab.setGraphic(value);
tabpane.getTabs().add(tab);
Then I write the css to set its style:
.va {
-fx-pref-width: 120;
-fx-pref-height: 42;
-fx-font-size: 10pt;
-fx-text-fill: black;
}
.ctab:selected>.va {
-fx-pref-width: 120;
-fx-pref-height: 42;
-fx-background-image: url("background.jpg");
-fx-font-size: 10pt;
-fx-text-fill: black;
}
The tab is selected, but the image is not shown.
I'm so confused about it. Because when the image is in a button, the css works.
Button button= new Button("a");
button.getStyleClass().add("abtn");
Label value = new Label("b");
value.getStyleClass().add("value");
Label nest = new Label("s");
nest.getStyleClass().add("nest");
value.setGraphic(nest);
button.setGraphic(value);
root.getChildren().add(button);
and the css is:
.abtn {
-fx-pref-width: 120;
-fx-pref-height: 42;
-fx-font-size: 11pt;
-fx-text-fill: black;
}
.value {
-fx-pref-width: 120;
-fx-pref-height: 42;
-fx-background-color: #ffffff;
-fx-font-size: 10pt;
-fx-text-fill: black;
}
.abtn:hover > .value > .nest {
-fx-pref-width: 120;
-fx-pref-height: 42;
-fx-font-size: 20pt;
-fx-text-fill: black;
-fx-background-color: transparent;
}
When the mouse hover the button, the String "s" size is really changes.
What's the difference between two example? How can I make the tab's image change(use css)?
Your Label is not owned by the Tab directly. Try it out:
.ctab:selected > .tab-container > .tab-label > .va
As you can see, setGraphic is not always intended to set a child node.
JavaFX CSS Reference Guide helps you to figure out the structure of controls, but it doesn't have complete list of nodes (for example, TabPane's tab-container is not in the list).
To analyze the scene graph structure, CSS Analyzer in Scene Builder and ScenicView are useful.
Or simply the selector below also works.
.ctab:selected .va
a.css:
.dialog-pane .button {
-fx-background-color: -fx-base; -fx-text-fill: white;
}
Code:
Alert confirmationDialog = new Alert(AlertType.CONFIRMATION);
confirmationDialog.getDialogPane().getStylesheets().add("a.css");
When I open the confirmation dialog, the Cancel button is styled correctly, but the OK button is not. However, if I change -fx-background-color to an actual color, like:
.dialog-pane .button {
-fx-background-color: red; -fx-text-fill: white;
}
Both buttons will be styled correctly. I've been googling for a while and I'm stumped. Any ideas why this is happening?
The default stylesheet handles the default button by changing the definition of -fx-base:
.button:default {
-fx-base: -fx-default-button;
}
So setting the background to -fx-base won't remove the default blue color.
It's not clear quite what you want to achieve, but you are probably needing something like
.dialog-pane .button {
-fx-background-color: -fx-base;
-fx-text-fill: white;
}
.dialog-pane .button:default {
-fx-background-color: -fx-default-button;
}
and then wherever you are changing -fx-base you should also change -fx-default-button.
I see my confusion. I was working on an existing stylesheet that was trying to use -fx-base like a variable even though it's the name of an existing attribute.
I'm learing JavaFx and I'm trying to change the css style of my window (Mastermind game) at runtime.
Currently it works with some objects like buttons, background, menu bar, labels and shapes.
But another object I'd like to change is the menu items (background and labels).
I've tried to use the next css code to acces it :
.context-menu {
-fx-background-color: linear-gradient(rgba(200,200,200,1),rgba(50,50,50,1) 80%);
}
It works on initalisation but not when changed at runtime.
For example, it works fine for the menu bar itself :
.menu-bar {
-fx-background-color: black;
-fx-selection-bar: #505050;
}
.menu-bar .label {
-fx-font-size: 12pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-opacity: 0.9;
}
In the FXMLcontroller I call the following code to change the skin :
#FXML private AnchorPane generalPane;
private final String themeNormal = getClass().getResource("/mastermindStyles/MasterMind_Normal.css").toExternalForm();
#FXML
void handleSkinNormal(ActionEvent event){
generalPane.getStylesheets().clear();
generalPane.getStylesheets().add(themeNormal);
}
How can I do it?
I've found it :
To use predefinite styles (like Modena and Caspian) :
Application.setUserAgentStylesheet(STYLESHEET_MODENA);
To use your own css stylesheet :
Application.setUserAgentStylesheet(null);
StyleManager.getInstance().addUserAgentStylesheet(
getClass().getResource("NewSkin.css").toExternalForm());