ZK with External style sheet

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

image

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

image