Customize Look and Feel of ZK Components Using CSS3
From Documentation
Author
Vincent Jian, Engineer, Potix Corporation
Vincent Jian, Engineer, Potix Corporation
Date
December 04, 2011
December 04, 2011
Version
ZK5+
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
- 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.
- 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.
- To view the full source code of button.css.dsp please click here.
- Create button-css3sample.zul file to test[2]
- In line 1, we use “<?link ?>” directive to include “button.css.dsp” file.
- Visit http://localhost:8080/projectName/button-css3sample.zul to show result and keep tweaking the style until you are satisfied with it.
<%@ 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>
<?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
Window Component
- 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.
- Create “window.css.dsp” file
- a) Include DSP taglib and define prefix “c” in order to use EL expression.
- b)
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>