If you are new ZK, please follow this post to setup development Environment.
Here is the Example how you can use External style sheet in ZK
ZK Version : 7.0.2
zul file
<zk>
<window id="roleCRUD" title=" " width="460px" height="290px"
border="normal" minimizable="false" sclass="mymodal" mode="modal"
maximizable="false" closable="true">
<style src="/css/mystyle.css" />
<separator />
<div width="96%">
<span width="100%">
<div sclass="screenheader">
<label id="lcaption" sclass="screenheaderlabel"
value="Role Information" />
</div>
</span>
<div id="buttonsDiv" sclass="screenheaderbuts">
<button label="Save"></button>
<button label="Cancel"></button>
</div>
<div sclass="clearboth"></div>
<separator />
<div sclass="sectionSeperator2"></div>
</div>
<separator />
<panel width="95%" >
<panelchildren>
<grid sclass="vgrid">
<columns>
<column hflex="1" ></column>
</columns>
<rows>
<row>
<vlayout>
<hlayout>
<label value="Role Name" />
<label value="*" />
</hlayout>
<textbox hflex="1" />
</vlayout>
</row>
<row>
<vlayout>
<hlayout>
<label value="Role Description" />
</hlayout>
<textbox hflex="1" />
</vlayout>
</row>
</rows>
</grid>
</panelchildren>
</panel>
<separator />
<separator />
</window>
</zk>
Style CSS
@CHARSET "ISO-8859-1";
/* ----------------------------------------------------------------------------------------------- */
/* FONT Settings */
/* ----------------------------------------------------------------------------------------------- */
.z-label,.z-radio-content,.z-checkbox-content,.z-loading {
font-family: Verdana;
}
.z-toolbarbutton-content {
font-family: Verdana;
font-size: 12px;
}
.z-textbox,.z-decimalbox,.z-intbox,.z-longbox,.z-doublebox {
-moz-border-radius: 6px;
border-radius: 6px;
font-family: verdana;
border: 1px solid #909090;
}
.z-combobox-input,.z-bandbox-input,.z-datebox-input,.z-timebox-input,.z-spinner-input,.z-doublespinner-input
{
font-family: verdana;
border: 1px solid #909090;
}
.z-textbox[readonly],.z-decimalbox[readonly],.z-intbox[readonly],.z-longbox[readonly],.z-doublebox[readonly]
{
-moz-border-radius: 6px;
border-radius: 6px;
font-family: verdana;
border: 1px solid #909090;
background-color: #EFEFEF;
}
.z-combobox-input[readonly],.z-bandbox-input[readonly],.z-datebox-input[readonly],.z-timebox-input[readonly],.z-spinner-input[readonly],.z-doublespinner-input[readonly],.z-combobox-button,.z-bandbox-button,.z-datebox-button,.z-timebox-button,.z-spinner-button,.z-doublespinner-button
{
border-color: #909090;
}
.z-listheader-content,.z-listcell-content,.z-listgroup-content,.z-listgroupfoot-content,.z-listfooter-content
{
font-family: Verdana;
}
.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
font-family: Verdana;
}
.grpboxradio .z-groupbox-content {
padding: 1px;
}
.z-window-header,.z-combobox-input,.z-bandbox-input,.z-datebox-input,.z-timebox-input,.z-spinner-input,.z-doublespinner-input
{
font-family: Verdana;
}
.z-messagebox .z-label,.z-panel-header {
font-family: Verdana;
font-size: 14px;
}
.z-listitem-checkbox {
margin-right: 5px;
}
/* ----------------------------------------------------------------------------------------------- */
/* Start: Grid */
/* ----------------------------------------------------------------------------------------------- */
.vgrid.z-grid {
border: none;
overflow: hidden;
zoom: 1;
background: transparent;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}
.vgrid.z-row:hover>.z-row-inner,.vgrid.z-row:hover>.z-cell {
background: none;
}
.vgrid.z-grid-odd>.z-row-inner,.z-grid-odd>.z-cell {
background: none;
}
/* ----------------------------------------------------------------------------------------------- */
/* Panel */
/* ----------------------------------------------------------------------------------------------- */
.z-panel-header,.z-panel-head {
background-image: none;
background: transparent repeat-x 0 0;
background: #006466; /* Old browsers */
background-image: -ms-linear-gradient(top, #006466 0%, #006466 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #006466 0%, #006466 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #006466 0%, #006466 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #006466),
color-stop(100%,, #006466)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #006466 0%, #006466 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #006466 0%, #006466 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#006466', endColorstr='#006466',
GradientType=0); /* IE6-9 */
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Menu
/* ----------------------------------------------------------------------------------------------------------------------- */
.z-menu-content:hover,.z-menuitem-content:hover {
background: #006466;
}
.z-menupopup:hover {
background: #006466;
}
.z-menubar ul {
background: none repeat scroll 0 0 #006466;
}
.z-menu-content,.z-menuitem-content {
color: #FFFFFF;
}
.z-menupopup {
background: none repeat scroll 0 0 #006466;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Border Layout CSS Customization */
/* ----------------------------------------------------------------------------------------------------------------------- */
.myborlay .z-west-collapsed {
background: none repeat scroll 0 0 #DBE6E0;
}
.myborlay .z-south-collapsed {
background: none repeat scroll 0 0 #DBE6E0;
}
.z-west-header,.z-center-header,.z-east-header,.z-north-header,.z-south-header
{
background: none;
background-color: #CB411A;
}
.mycenter.z-center {
border: 2px solid #006466;
}
.mywest.z-west {
border: 2px solid #006466;
}
/* ----------------------------------------------------------------------------------------------- */
/* Start: Window */
/* ----------------------------------------------------------------------------------------------- */
.mymodal.z-window-modal,.z-messagebox-window,.myembedded.z-window-embedded
{
background-image: none;
background: transparent repeat-x 0 0;
background: #006466; /* Old browsers */
background-image: -ms-linear-gradient(top, #006466 0%, #006466 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #006466 0%, #006466 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #006466 0%, #006466 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #006466),
color-stop(100%,, #006466)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #006466 0%, #006466 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #006466 0%, #006466 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#006466', endColorstr='#006466',
GradientType=0); /* IE6-9 */
} /* IE6-9 */
/* ----------------------------------------------------------------------------------------------- */
/* Group Box */
/* ----------------------------------------------------------------------------------------------- */
.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
background-image: none;
background: transparent repeat-x 0 0;
background: #006466; /* Old browsers */
background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
color-stop(100%,, #006466)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00A9A7', endColorstr='#006466',
GradientType=0); /* IE6-9 */
}
.myjack .z-column-content {
color: white;
background: #006466; /* Old browsers */
background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
color-stop(100%,, #006466)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00A9A7', endColorstr='#006466',
GradientType=0); /* IE6-9 */
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Listbox CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.z-listheader-content {
background: #006466; /* Old browsers */
background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
color-stop(100%,, #006466)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00A9A7', endColorstr='#006466',
GradientType=0); /* IE6-9 */
}
/* ----------------------------------------------------------------------------------------------- */
/* Button */
/* ----------------------------------------------------------------------------------------------- */
.z-button,.z-button:active,.z-button:focus {
-moz-box-shadow: 0px 10px 14px -7px #cf866c;
-webkit-box-shadow: 0px 10px 14px -7px #cf866c;
box-shadow: 0px 10px 14px -7px #cf866c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b
), color-stop(1, #bc3315));
background: -moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b',
endColorstr='#bc3315', GradientType=0);
background-color: #d0451b;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 12px;
font-weight: bold;
padding: 6px 5px;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
border: medium none;
}
.z-button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315
), color-stop(1, #d0451b));
background: -moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315',
endColorstr='#d0451b', GradientType=0);
background-color: #bc3315;
}
/* ----------------------------------------------------------------------------------------------- */
/* Miscellaneous */
/* ----------------------------------------------------------------------------------------------- */
.clearboth {
clear: both;
}
.highlightcellText {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.highlightText.z-textbox-readonly {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.neg.z-decimalbox[readonly] {
background: #FF0000;
color: #FFFFFF;
cursor: default;
}
.pos {
background: none repeat scroll 0 0 #FFFFE0;
color: #2A002A;
cursor: default;
}
.sectionpadding {
padding-left: 20px;
}
.sectionpadding10 {
padding-left: 10px;
}
.screenheader {
float: left;
padding-left: 20px;
}
.screenheaderlabel {
font-size: 14px;
font-weight: bolder;
color: #0C6BA8;
}
.screenheaderlabel .z-radio-content {
font-family: Verdana;
font-size: 15px;
font-weight: normal;
color: #0C6BA8;
}
.screentitle {
font-size: 14px;
font-weight: bolder;
color: #0C6BA8;
}
.screensubheaderlabel {
font-size: 12px;
font-weight: bolder;
color: #0C6BA8;
padding-left: 20px;
}
.screenheaderbuts {
float: right;
margin-top: 6px;
}
.sectionSeperator {
margin-bottom: 18px;
padding-bottom: 0.25em;
margin-left: 20px;
border-bottom: 4px solid;
}
.sectionSeperator2 {
margin-bottom: 18px;
padding-bottom: 0.25em;
border-bottom: 2px solid;
}
.screenheader2 {
float: left;
}
Output
