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;
}
Related
I have a style.css file which contains styles such as:
.tab{
-fx-background-color:rgb(15,63,103);
... etc ...
}
.selectedTab{
-fx-background-color:rgb(52,105,155);
... etc ...
}
I am trying to change a Button's css at runtime when certain conditions are met.
I know you can set a style by typing the css inline with the:
mBtn.setStyle("-fx-background-color:rgb(15,63,103);");
Although to me that seems less clean than referencing styles in the .css file.
So I set my buttons CSS initially using:
newBtn.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
newBtn.getStyleClass().add("tab");
But then later, when I try and change it using:
mBtn.getStyleClass().removeAll();
mBtn.getStyleClass().add("selectedTab");
it doesn't change. Do I need to refresh/redraw the Node after changing it's style?
Also, generally, what is the preferred way to set styles in JavaFX. Is it with setStyle("..."); method or is it by linking it to a stylesheet, or is it a third way I haven't considered.
Thank you for your time :)
Edit: Solved by user fabian with first comment. The problem was removeAll() is a method that removes all the elements specified as arguments. What I intended to do is actually use the clear() function.
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;");
What is the proper way to remove the grey background that covers the entire screen, the recompile button, and the default libGDX load and/or load splash in a HTML build of my game?
Note: This answer applies only to the gdx-setup tool as of late 2022. The gdx-liftoff tool is similar but has a slightly less boneheaded configuration out of the box. Additionally, I would like to get some of libGDX's HTML backend reworked one day, as there is no point in the padding and it's applied unevenly, plus less obvious things like the way it creates a table for layout.
Grey background
The background colour can be customised by changing background: #222222 in html/webapp/styles.css to some other colour. Or apply it directly to the body in index.html and delete styles.css (plus the link to it) as it doesn't contain anything important once the superdev button has been removed.
Grey border
The border around the game can be removed by editing HtmlLauncher like so:
#Override
public GwtApplicationConfiguration getConfig () {
GwtApplicationConfiguration config = new GwtApplicationConfiguration(true);
config.padHorizontal = 0;
config.padVertical = 0;
return config;
}
Separating GwtApplicationConfiguration into a config variable brings it in line with the other launchers (desktop, Android, iOS) and setting the padding to 0 is self-explanatory. While we're here, passing true into the app config's constructor tells it to render at native resolution on high-DPI/"retina" displays instead of upscaling.
Recompile button
Or the superdev button, as I call it. Just remove the <a class="superdev"... line from html/webapp/index.html. If you need access to it during development, it's recommended you add its link to your bookmark bar. Visibility of the bookmark bar can be toggled using Ctrl+Shift+B in Chrome and Firefox.
Load/splash screen
You're probably best referring to https://libgdx.com/wiki/html5-backend-and-gwt-specifics#changing-the-load-screen-progress-bar for this (which may not have existed when the question was asked). In short, getPreloaderCallback() and adjustMeterPanel() can be overridden in HtmlLauncher. I typically just overwrite logo.png after building instead of using the recommended method for changing the logo.
Other changes
Things you might want to change before a final release:
styles.css isn't very important beyond changing the background colour, as noted earlier.
In index.html, a comma should be added to between device-width and initial-scale for it to be valid HTML.
In index.html, applying align="center" to a div is deprecated behaviour. Probably best remove that alignment. If you need it, apply via CSS instead.
In index.html, handleMouseDown() and handleMouseUp() are completely pointless, as far as I can see. I don't use them for my own projects and have had no complaints.
html/build/dist/assets/assets.txt references some files that may not be necessary. The default font (arial or lsans, depending on libGDX version) is only needed if you use it and the vertex/fragment shaders are only needed if you do 3D stuff, I believe. Removing these can remove load times ever so slightly, especially on HTTP/1.1 connections. But I don't have an automated way to remove those lines (except on Linux - head -n -8).
Setting an asset filter as seen at https://libgdx.com/wiki/html5-backend-and-gwt-specifics#speeding-up-preload-process is an easy way to reduce your load times. I return false for music files to reduce load times greatly - it ends up streaming music instead of preloading it (if using Music, not AssetManager).
I want to set background image of root-pane. For this purpose, I add this inline style to root-pane.
-fx-background-image: url("image.png");
Image is in same directory as FXML file. I checked path at least 10 times.
Can somebody say, what's wrong?
Don't use inline style for fxml. There is a discussion here :https://community.oracle.com/thread/2595120?start=0&tstart=0
Please pay attention James_D's answer.
By the way, if you use external css file, your code will work. Please try 'styleclass' property in root tag.
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.