Customize ControlsFX Notification Popup using CSS

328 Views Asked by At

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

0

There are 0 best solutions below