Add ZK 9.5.0 Notification style to custom theme

answered 2021-02-04 16:55:15 +0800

cor3000
6280 ● 2 ● 7

Atlantic is a separate theme which has different styles from the themepack themes.

Still the styles to achieve this look can be applied on top of the atlantic theme.

Here and example with inline styles, to achieve a the same look:

<zk>
    <style>
        .z-notification .z-notification-content {
            overflow: hidden;
            border-radius: 4px;
            border: 1px solid #eee;
            background-color: white;
            color: rgba(0,0,0,0.9);
            box-shadow: 0 0 16px rgb(0 0 0 / 16%);
        }

        .z-notification .z-notification-content::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
        }
        .z-notification-info  { color: #59A755; }
        .z-notification-info .z-notification-content::after { background-color: #59A755; }

        .z-notification-warning { color: #CC6D33; }
        .z-notification-warning .z-notification-content::after { background-color: #CC6D33; }

        .z-notification-error { color: #AE312E; }
        .z-notification-error .z-notification-content::after { background-color: #AE312E; }
    </style>
</zk>

Test code from java:

Clients.showNotification("INFO");
Clients.showNotification("WARNING", "warning", null, "middle_left", 0);
Clients.showNotification("ERROR", "error", null, "middle_right", 0);

Here the output when used in combination with atlantic.

Since you already have a custom theme project I assume you know where to add the styles in your theme project. And reuse less variables where possible.