1

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

Arcimboldo
  • 31
  • 1
  • 4

2 Answers2

2

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;
}
Thamidu de Harshitha
  • 313
  • 3
  • 12
0

Two possible solutions to change the css styling for a component

  1. 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

  1. 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;

}
faris
  • 692
  • 4
  • 18