Use Theme Tool to Customize your Own Theme
Ryan Wu, Engineer, Potix Corp.
Nov 03, 2008
ZK Studio 0.9
Introduction
This article simply show how to use zhTheme tool to create your own ZK theme for ZK 3.5 series. By using zkTheme tool, art designer can easily create his/her own themes. And this tool can also help them archive their themes into jar files to be shared easily.
2 Mins Tutorial
Steps
The ZK Theme tool include a batch file, it helps users to create and archive theme projects easily. The following are summaries of these features.
Create Theme Project
Download ZKTheme tool first, and extract it. Open a windows console and execute the following command in the unzipped folder.
> zkTheme create myzktheme
It will create a folder named myzktheme which contains CSS file : web/mytheme/img.css.dsp, and image folder : web/mytheme/img.
Modify Images
Now you can modify the theme to whichever style you prefer.Here is a simple example of modify img.css.dsp:
.z-apply-loading-icon, .z-loading-icon {
background-image : url(${c:encodeURL(c:cat3('~./',project,'/zk/progress2_old.gif'))});
}
Note:You can add any CSS into img.css.dsp, then the img.css.dsp will cover all the ZK CSS class.
Try New Theme
After editing your theme, you will need to archive them into a jar file.
> zkTheme jar myzktheme
You will see that myzktheme.jar has been created. Simply put it into you libary folder (ex: In Tomcat, it's in webapps/yourproject/WEB-INF/lib) and restart your web container. The new theme will be applied automatically.
Appendix
- Related Link
- Style Guide (new version will be release soon!!)
- ZK Demo
- Browse Newest ZK 3.5 CSS
- Download
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |