From Documentation

Jump to: navigation, search




  • Author
    Ryan Wu, Engineer, Potix Corp.
  • Date
    Nov 03, 2008
  • Version
    ZK Studio 0.9


Contents

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
  • Download



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum