Customize Look and Feel of ZK Components Using CSS3

Author
Vincent Jian, Engineer, Potix Corporation

Date
December 04, 2011

Version
ZK5+

Introduction: ZK & CSS3

This article will guide users through customizing the look and feel of a ZK component using CSS 3 and DSP[1] and some EL expression used in DSP[1]. Two case examples – the button component & the window component will be demonstrated to show the process and implementation.

---

[1] A JSP-like template technology, for more detail please refer to here

Case Examples

Button Component

1. Re-design from original styles

Default button component provides trendy and os mold. Here we use os mold to modify since it is much easier than trendy mold.

2. Create “button.css.dsp” file in web application

In line 1, we define prefix “c” in order to use EL expression. Because not all browsers support CSS3, we use “<c:if>” tag in line 2 to determine whether or not we override the origin CSS class or not.

<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
<c:if test="${c:browser('gecko2') || c:browser('ie9') || c:browser('opera') || c:browser('safari')}">
.z-button-os {
	border: 1px solid #C7C7C7;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #EFEFEF;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGZmMDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5EEEFF), color-stop(100%,#C4FF05)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* IE10+ */
	background: linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* W3C */
	filter: none\0/; /* IE9 */
	cursor: pointer;
}
</c:if>

To view the full source code of button.css.dsp please click here.

3. Create button-css3sample.zul file to test[2]

In line 1, we use “<?link ?>” directive to include “button.css.dsp” file.

<?link rel="stylesheet" type="text/css" href="css/button-2.css.dsp"?>
<zk>
	<button label="os mold" mold="os" width="200px" height="50px" />
</zk>

---

[2] test with different browsers (FF, Chrome, IE 9 etc.) that supports CSS3 and check the ZUL file created above

4. Visit http://localhost:8080/projectName/button-css3sample.zul to show result and keep tweaking the style until you are satisfied with it.

Window Component

1. Re-design from original styles

Default window component consists of four parts (top, head, content and bottom, for more details, please refer to Window Style). The top and bottom part are only used for rounded corners. Therefore, we can set width and height of the top and bottom part to zero, and still keep the DOM structure.

2. Create “window.css.dsp” file

a) Include DSP taglib and define prefix “c” in order to use EL expression.