0

Add ZK 9.5.0 Notification style to custom theme

asked 2021-02-03 18:30:45 +0800

rmalik gravatar image rmalik
31 2

updated 2021-02-04 16:56:26 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

Hi,

At the moment we have created our own custom theme. We have used the atlantic theme (github link) as the base for our theme.

In the ZK-Small talks at this link we have noticed the new Notification style, which we are fond of.

Is there any way we can integrate this message box style to our custom theme? I have noticed that atlantic theme version 9.5.0.2 does not include this styling.

Kind regards,

Remie

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

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

cor3000 gravatar image cor3000
5673 2 7
ZK Team

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.

image description

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.

link publish delete flag offensive edit
0

answered 2021-02-05 16:17:49 +0800

rmalik gravatar image rmalik
31 2

updated 2021-02-05 16:21:21 +0800

Hi cor3000,

I see. That explains a lot. I have added the current styles to my custom project. It is located in popup.less. After generating the jar and added to my webproject is still saw the old styling. As a test i changed a line to:

 .z-notification-info  { color: #59A755; }
 .z-notification-info .z-notification-content::after { background-color: #000000; }

As you can see the background of the info message notification should be black. Even then after regenerating the jar and added to my project, i still could not see the change (black blackground).

image description

Am i on the right track or am i missing something? If i add the styling manually in my .zul it works. But i gladly want it by default in my custom theme.

link publish delete flag offensive edit

Comments

if your styles don't update, the something must be missing in your build deploy process

cor3000 ( 2021-02-05 19:09:50 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2021-02-03 18:30:45 +0800

Seen: 12 times

Last updated: Feb 05

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More