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

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

ZK 7 Group Box CSS

ZK Version : ZK 7


groupboxexample.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
	<style src="/css/style.css" />
	<style src="/css/greentheme.css" />
	<window title="Group Box CSS Example" border="normal" width="50%">
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<groupbox mold="3d" closable="false"
			sclass="grpboxSectionBar">
			<caption label="General information" />
			<label value="You are using: ${desktop.webApp.version}" />
		</groupbox>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<separator></separator>
		<groupbox mold="3d" closable="false">
			<caption label="Another group box without sclass" />
			<label value="You are using: ${desktop.webApp.version}" />
		</groupbox>
	</window>
</zk>

CSS – Style

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
	background: none;
	border: 0 none;
	font-weight: bold;
	height: auto;
	min-height: 32px;
	padding: 0px 0px;
	font-size: 12px;
	font-weight: bold;
	color: white;
	min-height: 25px;
}

.grpboxSectionBar.z-groupbox-3d > .z-groupbox-header .z-caption-content {
    line-height: 16px;
    padding: 4px 5px;
}

CSS – greentheme.css

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
	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 */
}

CSS – graytheme.css

@CHARSET "ISO-8859-1";

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
	background-image: none;
	background: transparent repeat-x 0 0;
	background: #6F8992; /* Old browsers */
	background-image: -ms-linear-gradient(top, #6F8992 0%, #6F8992 100%);
	/* IE10+ */
	background-image: -moz-linear-gradient(top, #6F8992 0%, #6F8992 100%);
	/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #6F8992 0%, #6F8992 100%);
	/* Opera 11.10+ */
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #6F8992),
		color-stop(100%,, #6F8992)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #6F8992 0%, #6F8992 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: linear-gradient(to bottom, #6F8992 0%, #6F8992 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(
		                     startColorstr='#6F8992', endColorstr='#6F8992',
		GradientType=0); /* IE6-9 */
}

CSS – bluetheme.css

@CHARSET "ISO-8859-1";

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
	/* fallback */
	background-color: #1a82f7;
	background: url(images/linear_bg_2.png);
	background-repeat: repeat-x;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7),
		to(#2F2727));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #2F2727, #1a82f7);
	/* IE 10 */
	background: -ms-linear-gradient(top, #2F2727, #1a82f7);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

Output

ZK 7 Window CSS–Example 1

ZK Version : ZK 7



index.zul

<?page title="Auto Generated index.zul"?>
<zk>
	<style src="/css/myzk7style.css" />
	<window title="Hello World!!"   border="normal" width="200px" closable="true">
		<label value="You are using: ${desktop.webApp.version}" />
	</window>
</zk>

myzk7style.css

@CHARSET "ISO-8859-1";

.z-window-header {
	padding-top: 1px;
	padding-right: -1px;
	padding-bottom: 1px;
	padding-left: 0;
	margin-right: -4px;
	color: white;
	font-size: 12px;
	font-weight: bolder;
}

.z-window-icon {
	width: 20px;
	height: 16px;
	border-width: 1px;
	border-style: solid;
	border: none;
}

.z-window-close {
	background: url('../images/action/messageboxClose.png') transparent
		no-repeat 0 0;
}

.z-icon-times:before {
	content: none;
}

.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 */

Output