ZK Messagebox Styling

This examples show how you can use change the Look and Feel of ZK MessageBox Component.

ZK Version 6
Project Name : MessageBoxStyle
Project Structure:

index.zul

<zk>

    <style>
        .z-messagebox-btn 
    {
        font-size: 11px;
        padding: .2em 1em .275em;
    }

    .z-messagebox-btn 
    {
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }

    .z-messagebox-btn 
    {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffac53), to(#fe7d1e));
        background: -moz-linear-gradient(top,  #ffac53,  #fe7d1e);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac53', endColorstr='#fe7d1e');
        padding: 3px 5px 3px 5px;
    }
    
    .z-messagebox-btn:hover 
    {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#fe7d1e), to(#ffac53));
        background: -moz-linear-gradient(top,  #fe7d1e,  #ffac53);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7d1e', endColorstr='#ffac53');
        padding: 4px 5px 2px 5px;
    }


    .z-messagebox-btn.z-button .z-button-cm 
    {
        background-image: none;
        color: white; 
        font-weight : bolder; 
    }

    .z-messagebox-btn.z-button .z-button-tm, .z-button .z-button-bm 
    {
        background-image: none;
    }

    .z-messagebox-btn.z-button .z-button-cl, .z-button .z-button-cr 
    {
        background-image: none;
    }

    .z-messagebox-btn.z-button .z-button-tl 
    {
           background-image: none;
    }

    .z-messagebox-btn.z-button .z-button-bl 
    {
           background-image: none;
    }

    .z-messagebox-btn.z-button .z-button-tr 
    {
           background-image: none;
    }

    .z-messagebox-btn.z-button .z-button-br 
    {
           background-image: none;
    }


    .z-messagebox-window .z-window-highlighted-hm, .z-window-highlighted-br,
        .z-window-highlighted-cr, .z-window-highlighted-cl,
        .z-window-highlighted-hr, .z-window-highlighted-tr,
        .z-window-highlighted-hl 
        { 
            background-image:none; background-color : #0C6BA8; 
        }
        
    .z-messagebox-window .z-window-highlighted-header
    {
           padding-top : 1px; 
        padding-right : -1px; 
        padding-bottom : 1px;
        padding-left : 0; 
        margin-right: -4px; 
        color:white; 
        font-family: "Tahoma", verdana,arial,sans-serif; 
        font-size:    12px; 
        font-weight : bolder;
    }
    
    .z-messagebox-window .z-window-highlighted-icon 
    { 
        width: 20px; height: 16px;
        border-width: 1px; border-style: solid; border-color: #0C6BA8
        #0C6BA8 #0C6BA8 #0C6BA8; box-shadow: inset 0 1px 0 #0C6BA8,
        inset -1px -1px 0 #0C6BA8, inset -1px -2px 0 #0C6BA8; 
    }
        
    .z-messagebox-window .z-window-highlighted-close 
    { 
        background:url('./images/close.jpg')
        transparent no-repeat 0 0; 
    }
        
        
    </style>

    <vlayout spacing="15px">
        Message Dialog
        <hlayout>
            <button label="Warning" width="100px">
                <attribute name="onClick"><![CDATA[
    Messagebox.show("Warning is pressed", "Warning", Messagebox.OK,
            Messagebox.EXCLAMATION);
]]></attribute>
            </button>
            <button label="Question" width="100px">
                <attribute name="onClick"><![CDATA[
    Messagebox.show("Question is pressed. Are you sure?", "Question",
            Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION);
]]></attribute>
            </button>
            <button label="Information" width="100px">
                <attribute name="onClick"><![CDATA[
    Messagebox.show("Information is pressed", "Information", Messagebox.OK,
            Messagebox.INFORMATION);
]]></attribute>
            </button>
            <button label="Error" width="100px">
                <attribute name="onClick"><![CDATA[
    Messagebox.show("Error is pressed", "Error", Messagebox.OK,
            Messagebox.ERROR);
]]></attribute>
            </button>
        </hlayout>
        Interactive Dialog
        <button label="Save " width="100px">
            <attribute name="onClick"><![CDATA[
Messagebox.show("Are you sure to save?", "Confirm Dialog", Messagebox.OK | Messagebox.IGNORE  | Messagebox.CANCEL, Messagebox.QUESTION, new org.zkoss.zk.ui.event.EventListener() {
    public void onEvent(Event evt) throws InterruptedException {
        if (evt.getName().equals("onOK")) {
            alert("Data Saved !");
        } else if (evt.getName().equals("onIgnore")) {
            Messagebox.show("Ignore Save", "Warning", Messagebox.OK,
                    Messagebox.EXCLAMATION);
        } else {
            alert("Save Canceled !");
        }
    }
});
]]></attribute>
        </button>
    </vlayout>
</zk>

 

Output

 

 

 

 

 

 

You can download source here