I'm trying to add a an external .css file to a Java FX scene graph as follows:
File f = new File("../theming/css/test.css");
scene.getStylesheets().clear();
scene.getStylesheets().add("file:///" + f.getAbsolutePath().replace("\\", "/"));
test.css
.custom-background {
-fx-background-color: #1d1d1d;
-fx-background-color: red;
-fx-padding: 15;
-fx-spacing: 10;
}
.label {
-fx-font-size: 11pt;
-fx-font-family: "Segoe UI Semibold";
-fx-text-fill: white;
-fx-opacity: 0.6;
}
The style classes get added well, except where I try to add a custom class to an element:
Hbox hbox = new HBox();
hbox.setSpacing(10);
hbox.setMinSize(400, 300);
hbox.getStyleClass().add("custom-background");
That doesn't get picked up.
What could I be doing wrong?
Thank you in advance.
Don't try to convert the file name to a URL yourself. Instead use the build in methods of the File class:
scene.getStylesheets().setAll(f.toURI().toURL().toExternalForm());
This assumes the file is located at the specified path relative to the current working directory when the application is run. In most cases using a relative file path is a bad idea, since running from a different directory will break the program. It would be preferable to include the css file as resource.
Related
I want to know if there is a way to set the hover style of a JavaFX ManuItem without add a stylesheet.
for Node I normally use: this.setOnMouseEntered(e -> this.setStyle(initialStateCss + hoverStateCss));and this.setOnMouseExited(e -> this.setStyle(initialStateCss));
But for MenuItem this events are not available. Someone have an idea of how to do it?
Thanks in advance!
I suggest you to use CSS stylesheets then use the .menu-item:focused selector event. In your CSS file, the markup would look like this:
.menu .menu-item:focused {
-fx-background-color: #FFF6;
-fx-background-radius: 5.0;
-fx-font-weight: bold;
}
I would recommend you to use as little Java style as possible and use CSS stylesheets instead. It would enhance your code as it will be more maintainable.
For more details, this SO request gives useful information about MenuItem's CSS style.
I've attempted adding a custom font to my program using CSS and i can't get it to work, is anyone able to help?
This is what i've got at the moment:
#font-face
{
font-family: walterturncoat;
src: url("../resources/fonts/walterturncoat.ttf");
}
.label
{
-fx-font-family: "Walter Turncoat";
-fx-text-fill: #ffffff;
-fx-font-size: 20pt;
-fx-effect: dropshadow(gaussian, #000000, 10, 0, 2, 2);
}
The url works as i used a similar path for an image (just /images/ instead of /fonts/) and i was able to get the font to work outside of CSS in the bulk of the program but i intend to be using it a lot so having it in CSS would be ideal.
Media queries in CSS file has no effect on the GUI made in javaFX.
I have made a canvas using javaFX. I have used FXML to setup the different GUI elements. Then I have used a CSS file to style everything. The problem now is, that I want to make it responsive. When I try to use media queries in the CSS file, nothing happens.
.userMenu {
-fx-max-height: 30;
-fx-max-width: 130;
-fx-background-color: rgba(255, 255, 255, 0.5);
-fx-padding: 10px;
-fx-background-radius: 12px;
}
#media only screen and (min-width: 300px) {
.userMenu {
-fx-max-height: 150;
-fx-max-width: 300;
-fx-background-color: rgba(255, 255, 255, 0.5);
-fx-padding: 10px;
-fx-background-radius: 12px;
}
}
I expect the userMenu box to rescale when crossing 300px width.
Just found this when searching myself and the simple answer is: You don't.
From the official docs:
While the JavaFX CSS parser will parse valid CSS syntax, it is not a fully compliant CSS parser. One should not expect the parser to handle syntax not specified in this document.
#-keyword statements are ignored.
I guess one needs to write Java code for that ¯\_(ツ)_/¯
Edit:
After looking at the JavaFX 8 docs there are two supported #-rules: #import and #font-face. But that's all.
I want to style the font of the CalendarTimeTextField Popup control using a CSS File.
The following entry doesn't work for me:
.CalendarTimeTextFieldSkin_popup {
-fx-text-fill: white;
-fx-font-style: italic;
}
Setting the font-type works, changing text color doesn't.
Thanks for supporting me
GGK
The text is rendered with a Text node (https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#text) so use -fx-fill and/or -fx-stroke.
So I have the following code snipet which I want applied to 99% of my labels in my JavaFX application. However, sometimes I don't want it applied. Unfortunately whenever I try to call
myFont.setFont(Font.loadFont(etc etc);
It is unable to override the label class in the CSS file. How can this be done? Thank you!
.label
{
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Semibold";
}
There are different ways to do it. Few of the approaches are described here :
Define a different style-class instead of using the default .label and use it on your 99% of labels.
Code :
mylabel.getStyleClass().add("my-label")
CSS :
.my-label {
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Semibold";
}
Remove the default label style class and set a new style class to 1% of the labels. This will remove the already present .label style class from the node. This seems to be an easier approach but if I were you, I would not go with this approach since we <3 the default styles and we want them to be applied to the respective nodes by default.
Code :
mylabel.getStyleClass().setAll("my-label");
.label is one of the built in styles that is applied to all Nodes of type Label. You can remove any style class like this:
Label lbl = ...
lbl.getStyleClass().remove("label");
However I would suggest another approach that does not involve removing a style class especially one of the built ins.
As there seems to be only a selected few labels, that don't have that style you can override it on those Labels:
.label-override {
-fx-font-size: 10pt;
-fx-font-family: "Segoe UI Semibold";
}
Label otherLbl = ...
otherLabel.getStyleClass().add("label-override);