Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customize ControlsFX Notifications

I want to use ControlsFX Notifications class, as JavaFX seems to doesn't offer anything like it (or does it?).

Notification by ControlsFX

For me to use it I want to be able to customize the color of the notification and some other styles. Does anybody have an idea of how I can do that?

Edit:

Through setting Notifications.owner(...) the notification is styled the same way as my main application, but it is then shown within the main application as well and not at the bottom right corner of my screen.

like image 305
st.huber Avatar asked Mar 14 '23 06:03

st.huber


1 Answers

Notifications.create().title(...).text(..).action(...).position(Pos.BOTTOM_RIGHT).show();

Through using this line in Java and adding following lines at the bottom of my stylesheet I was able to customize the notification.

.notification-bar>.pane {
    -fx-background-color: red, yellow, blue;
    -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: #000;
    -fx-font-weight: bold;
}

.notification-bar>.pane .label {
    -fx-font-size: 1em; /*12px;*/
    -fx-text-fill: #000;
    -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: linear-gradient(#a3a3a3, #8b8b8b 34%, #777777 36%, #777777 63%, #8b8b8b 65%, #adadad);
}

.notification-bar>.pane .close-button:pressed {
     -fx-background-color: linear-gradient(#a3a3a3, #8b8b8b 34%, #777777 36%, #777777 63%, #8b8b8b 65%, #adadad):

}

.notification-bar>.pane .close-button>.graphic {
     -fx-background-color: #fff;
     -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: #fff;
}

.notification-bar>.pane .close-button:pressed>.graphic {
     -fx-background-color: #fff;
}

.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";
}
like image 188
st.huber Avatar answered Mar 23 '23 14:03

st.huber