I am using the ControlsFX Notifications
class to create a notification popup. Everything about it is great, except for the fact that I can't style it with CSS. From the research that I did, it says you must add a Notifications.owner()
, and the notification popup will then adopt the same stylesheet as whatever owner you put in. So far I've tried Notification.owner(root)
, Notification.owner(stage)
, and Notification.owner(scene)
. All of them had been set with my stylesheet, but none of them worked. Any ideas?
Here is my CSS:
/*Notification styling------------------------------------------------------------------------------------------------*/
.notification-bar > .pane {
-fx-background-color: red;
-fx-padding: 5 5 5 5;
-fx-background-insets: 0, 1, 2;
}
.notification-bar > .pane .title {
-fx-font-size: 1.333em; /*16px;*/
-fx-text-fill: purple;
-fx-font-weight: bold;
}
.notification-bar > .pane .label {
-fx-font-size: 1em; /*12px;*/
-fx-text-fill: blue;
-fx-alignment: top-left;
}
/******************************************************************************
*
* Close button
*
*****************************************************************************/
.notification-bar > .pane .close-button {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0 0 0 0;
-fx-alignment: center;
}
.notification-bar > .pane .close-button:hover {
-fx-background-color: brown;
}
.notification-bar > .pane .close-button:pressed {
-fx-background-color: orange;
}
.notification-bar > .pane .close-button > .graphic {
-fx-background-color: yellow;
-fx-scale-shape: false;
-fx-padding: 4.5 4.5 4.5 4.5; /* Graphic is 9x9 px */
}
.notification-bar > .pane .close-button:hover > .graphic {
-fx-background-color: green;
}
.notification-bar > .pane .close-button:pressed > .graphic {
-fx-background-color: gold;
}
.notification-bar > .pane .close-button > .graphic {
-fx-shape: "M395.992,296.758l1.794-1.794l7.292,7.292l-1.795,1.794 L395.992,296.758z M403.256,294.992l1.794,1.794l-7.292,7.292l-1.794-1.795 L403.256,294.992z";
}
Here is how I'm creating my notification:
Notifications
.create()
.owner(PageManager.root)
.title("Submission Complete")
.text("You successfully added a new user")
.hideAfter(Duration.seconds(3))
.position(Pos.BOTTOM_RIGHT)
.graphic(imageView)
.show();
PageManager.root
is the root that my entire application uses. I set the stylesheet on it and it works on everything else in my application except the notification.
*Side note: I don't think the issue is with the CSS. I'm using copied CSS from a verified stackoverflow answer that apparently fixed my exact issue. For some reason, I can't get that solution to work. Here is the OG post Customize ControlsFX Notifications