-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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.
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).
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.
Asked: 2021-02-03 18:30:45 +0800
Seen: 14 times
Last updated: Feb 05 '21
bug with intboxes on mobile devices
zk keikai-how to add custom button/label to formulabar?
zk-keikai- update multiple cells parallel at same time asynchronously
zk-keikai-How to auto fit column width based on text
zk-keikai-ClipboardPateEvent-called twice
Reference a spring bean from VariableResolver