ZK Panel CSS Customization

 

<?page title="Example1" contentType="text/html;charset=UTF-8"?>
<zk>
    <style>

        .panelChilds div { float:left; margin:5px 1%; width:22%; }
        .panelChilds input { padding: 2px 0; width: 99%; border: 1px
        solid #A8A8A8; }

        .mynav .z-panel-hm, .z-panel-hl, .z-panel-hr , .z-panel-tl,
        .z-panel-tr, .z-panel-tl-gray, .z-panel-tr-gray, .z-panel-bl,
        .z-panel-br { background-image: none; }

    </style>
    <window title="Panel Without any Border" border="normal">
        <panel title="Customer Details" id="customerDetailsid"
            sclass="mynav">
            <panelchildren>
                <div sclass="panelChilds">
                    <div>
                        <hbox>
                            <label value="Last Name" />
                        </hbox>
                        <textbox id="lastName" />
                    </div>
                    <div>
                        <label value="First Name" />
                        <textbox id="firstName" />
                    </div>
                    <div>
                        <label value="middleName" />
                        <textbox id="middleName" />
                    </div>
                </div>
            </panelchildren>
        </panel>

        <panel title="Contact" sclass="mynav">
            <panelchildren>
                <div sclass="panelChilds">
                    <div>
                        <label value="e-mail" />
                        <textbox id="emailAddr" />
                    </div>
                    <div>
                        <label value="Office Phone" />
                        <textbox id="Phone" />
                    </div>

                    <div>
                        <label value="Office Ext" />
                        <textbox />
                    </div>
                </div>
            </panelchildren>
        </panel>
    </window>
</zk>