Use Theme Tool to Customize your Own Theme

From Documentation
Revision as of 04:07, 3 December 2010 by Char (talk | contribs) (→‎Appendix)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
DocumentationSmall Talks2008NovemberUse Theme Tool to Customize your Own Theme
Use Theme Tool to Customize your Own Theme

Ryan Wu, Engineer, Potix Corp.
Nov 03, 2008
ZK Studio 0.9


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


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.


  • Related Link
  • Download

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.