How to change the size of o notification ?

asked 2014-06-12 12:13:52 +0800

aloulen gravatar image aloulen
75 5

updated 2014-06-12 16:17:15 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9

Hello Please how to change the size (width, height) of a notification ?


delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2014-06-12 18:13:46 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
.z-notification .z-notification-content {
background: none repeat scroll 0 center transparent;
font-size: 14px;
font-weight: normal;
margin: 0 !important;
overflow: hidden;
background-color: #f78d1d;
color: white;
width: 300px;
min-height: 53px;


.z-notification .z-notification-content { background-color: #f78d1d; }

link publish delete flag offensive edit


Thank you it works, but how i can change the style of every type of notification (error, info, ...) ?

aloulen ( 2014-06-12 20:10:58 +0800 )edit

answered 2014-06-13 02:49:47 +0800

cor3000 gravatar image cor3000
5044 2 7
ZK Team


the answer is simple: do it with CSS (I am not a CSS experts but some basics never hurt). Chrome has great tools to easily identify the style rule that defines the appearance or an element. I recorded a small video how to do that yourself.

You can see that I first inspect the element, then check which classes it has applied and then on the right side I can already change them to preview if my changes have any effect. Then I add those style rules to my page add my specific overrides and voila: the size changes for all those notifications of the same type.



link publish delete flag offensive edit


Thank you very much, one more question, how can I get the Id of each notification in the zul page ?

aloulen ( 2014-06-13 11:10:12 +0800 )edit

Which Id? the HTML Id or the Id of the ZK widget the message is for. And what do you need the Id for? And where do you need the Ids, on the client side, or at the server side?

cor3000 ( 2014-06-13 12:17:33 +0800 )edit

The html id of the notification it slef, i have many notifications in the page, and i will specify the css of each notification, for example : notification 1 of type info have a different style than another notification of the same type, info, "are you understanding what i will to do ?"

aloulen ( 2014-06-13 12:55:56 +0800 )edit

your explanation still leaves a lot room for speculations. however maybe it helps: if you look at the DOM of your page you'll see that the notifications have generated IDs regenerated every time a notification is shown. so you cannot go by the ID. also the notifications are no direct child of the..

cor3000 ( 2014-06-16 02:27:30 +0800 )edit

... the widget they are rendered for. you could define an alternating style using e.g. '.z-notification:nth-child(2n+0) {border: 1px solid red}' or you'd need to use java script to get the widget the notification belong to and determine the style dynamically.

cor3000 ( 2014-06-16 02:30:44 +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

1 follower



Asked: 2014-06-12 12:13:52 +0800

Seen: 59 times

Last updated: Jun 13 '14

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