Small Talks/2011/December/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.
   To view the full source code of button.css.dsp please click here.

   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>

1. 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