From Documentation

Jump to: navigation, search

  • Author
    Ryan Wu, Engineer, Potix Corp.
  • Date
    Nov 03, 2008
  • Version
    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.