First of all, is it even possible to modify the ChoiceBox checkmark shape? Completely altering the CheckBox mark was easy enough using the CSS class (.check-box:selected .mark). However, all that I've found online for the ChoiceBox's ContextMenu's mark is that you can modify its color using -fx-mark-color within the .context-menu CSS class. I've tried several classnames to change the shape to a custom SVG to no avail.
.context-menu .menu-item:selected .mark {
-fx-shape: "M1,1 h4 v4 h-4 v-4 Z";
}
In the following picture I've completely reskinned my JavaFX application to match Mac's native Cocoa GUI, but the menu checkmark is the only flaw that appears to be impossible to fix.
Search the modena.css stylesheet for -fx-shape. For Java 8, You will find:
.check-menu-item:checked > .left-container > .check
This is the CSS selector for checkmarks inside menu items (it also covers checks for selected items in a ChoiceBox). Define the same CSS selection path in a custom CSS stylesheet. Inside that selector, place a -fx-shape rule that defines a custom svg path for the shape you wish to use for checks.
Related
Could someone explain why I can't load image from field -fx-background-image inside SceneBuilder?
Images for reference:
SceneBuilder
application
I've found out that I can do that from a .css file, for example:
#base {
-fx-background-image: url("background.jpg");
-fx-background-size: 100% 100%;
-fx-background-position: center center;
}
But that doesn't update from inside SceneBuilder, while I would like it too.
You need to attach the style sheet to the fxml element for it to be applied to the FXML viewed in the SceneBuilder design view.
There is a stylesheet field in the SceneBuilder property sheet view (it is actually in the image from your question). Select the root element and click the + symbol to select the CSS style sheet to apply. The style sheet will be applied to the root and all child elements.
Or you can use Preview | Scene Style Sheets | Add Style Sheet... to apply style sheets when you use the preview view.
You don't need to (and probably should not) set the style attribute in Scene Builder if you have a CSS file. The styles will be applied from the CSS files according to their selectors. Instead sets ids and style classes in scene builder and attach the stylesheet.
Your id is base, so if the id of the node is set to base, the selector will find it. I prefer working with style classes rather than ids but ids will work too.
You are referencing the image directly by name without relative path usage. So, as long as the image is in the same location as the fxml file and the style sheet is correctly applied as outlined above, the image defined in CSS should display in SceneBuilder.
I think that SceneBuilder automatically monitors the file system for changes, so if you change the FXML or CSS file externally, it will automatically reload them (notifying you of some, but not all, errors that may occur on reload).
If things still aren't working, see the Eden guide on where to put resources in JavaFX apps and try following their recommended approach (you might already be doing that, so locating the image might not be your issue).
I am using the controlsfx library, particularly it's Notifications component, however it's default CSS styling doesn't fit my applications style at all, so I'm trying to change it.
I tried using the solution provided in this post
Is there a way to change the built-in controlfx notification popup color?
So:
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(css);
Notifications.create().owner(primaryStage).(...).show();
The CSS file is being successfully loaded, there are also no errors with adding it to the styleSheets, the style of the notification remains, however, the same. I have tried loading both a whole file identical, except my changes, to the one used in the library and short css file only with what I wanted to change
My css file changes, for reference:
.notification-pane .notification-bar > .pane {
-fx-background-color: linear-gradient(to top, #3e5151, #decba4);
-fx-padding: 0 7 0 7;
}
(for now I'm just trying to change the background to a gradient of my choice)
I have also, without success tried to implement advice from questions related to other controlsfx elements, that is to add the url to styleSheeT AFTER invoking show.
(I have also tried, just to check things out, brute changing the css inside the library jar, but somehow that also failed to work, as in the css remained the same, without any errors, even though I have modified the jar and added it again).
Since the explanation provided was very scarce, I am at a loss, as to what is wrong here.
Also in my solution I have to avoid invoking .owner() and assigning the notification to a particular stage, since then it shows up inside that stage, not on the screen outside it. Maybe that can be fixed by adding the stylesheet to some other element, not primaryStage? But for now I can't achieve any css change even when confining the notification to a stage
Kinda late to answer this. But if someone having this issue, you can fix it using those two methods.
Method 01
The issue might happen because you are using multiple stylesheets for your scene. Add your notificationpopup.css css to the begining of the arraylist. I dont have hard proofs how that fix the issue. But I think that happens because of the ordering of the stylesheets. (The overriding stylesheet should be placed after the original stylesheet inside the stylesheets arraylist. There cannot be other stylesheet(s) in between them.)
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(0, css);
Method 02
Put !important to css class attributes. For ex:
.notification-bar > .pane {
-fx-background-color: red !important;
-fx-padding: 10 10 10 10 !important;
}
Two possible solutions to change the css styling for a component
In your controller class, invoke the getStyle() method as such
node.getStyle("-fx-background-color: linear-gradient(to top, #3e5151, #decba4);-fx-padding: 0 7 0 7;");
with the same code you would have in your css file on that node to style it directly and override the css values.
or
Give the node a unique CSS ID in your code or fxml file by saying
node.setId("myID");
and then in your css file writing whatever you need for that tag like
#myID {
-fx-background-color: red;
}
I am building a costume button by extending from a Label.
I know that you can use CSS within .java files with:
setStyle("-fx-background-color: #101010");
which is pretty cool and I am using this quite often.
But there is my problem: It seems like this doesn't work for hover effects.
In an external CSS file you can have:
#LabelButton:hover {
-fx-background-color: #aaaaaa;
}
I would like to have this feature with "XXX:hover" inside my Java File because the hex color code must be variable and this isn't possible when using external CSS files. So what I kinda want to have it this:
setStyle("hover:-fx-background-color: #101010");
But I can't find the right syntax for it let alone there is a syntax.
If there is no such feature, how should I do it then?
Thanks!
There is no way to use selectors of any kind in inline CSS. The inline style is always applied to the node regardless of it's state (with the exception of you assigning the corresponding node property).
You could bind the style property to the hover property of the node.
myButton.styleProperty().bind(Bindings.when(myButton.hoverProperty())
.then("-fx-background-color: #101010")
.otherwise("-fx-background-color: #aaaaaa"));
This could become very ugly if you e.g. want to style focused buttons and pressed buttons differently. For this reason I recommend combining CSS and inline CSS to achieve the desired style:
You can define your own variables color variables in CSS:
stylesheet
.label-button { /* using style class for selector (ids are for single nodes) */
/* assign default values */
-fx-normal-background: yellow;
-fx-hovered-background: red;
-fx-background-color: -fx-normal-background;
}
.label-button:hover {
-fx-background-color: -fx-hovered-background;
}
java code
myButton.setStyle("-fx-normal-background: #101010; -fx-hovered-background: #aaaaaa;");
I googled for this, but couldn't find anything. I know that I can style a Buttons text, background colour etc, but I would like to change the text itself.
This is what I've tried (of course the actual end result is more complex, but this will do):
Button#playButton {
-fx-background-color: #ddd;
-fx-text: "Play";
}
the background colour is correctly applied, but the text does not change.
Edit: The way to go seems to be a custom property, if someone has knowledge within that field I would love a concise explanation and implementation, that could save me hours of trial and error with the few sources I found!
No you cannot set the text of your button using css. But hey! In the other hand, you can still display an icon in your button using css!
You only need to add this to your css :
-fx-graphic : url("relative path to your icon");
In case your icon is repeated in the button, then add this as well :
-fx-background-repeat : no-repeat;
For some reason, I can't seem to change the font or font size in my GWT TextAreas. The default font for text areas doesn't even match with the rest of the default fonts, it looks like notepad font for some reason. I've tried adding and setting style names, but the font will not change, only the color and other parts of the TextArea will change. I think I may have broken something earlier when I added, then removed SmartGWT. Does anyone have any ideas what could be causing this?
You have to check your theme inherit line in your Module.gwt.xml file to verify you have one gwt theme included (normally when using smartgwt we put in comment this one ) and no smartclient theme inherited.
Have a look on your TextAreas with firebug to see which css class is applied and check in your css file to see if you have any entry for this class.
I had the same problem and so used the Chrome inspector to find out why my styles were not being applied. It seems that they were being ignored because of settings in clean.css. So then I did:
.gwt-TextArea {
font-family : monospace !important;
font-size : 10pt !important;
}
And that worked.