Use Theme Tool to Customize your Own Theme"

From Documentation
m (Created page with '{{Template:Smalltalk_Author| |author=Ryan Wu, Engineer, Potix Corp. |date=Nov 03, 2008 |version=ZK Studio 0.9 }} =Introduction= This article simply show how to use zhTheme too…')
 
 
(2 intermediate revisions by one other user not shown)
Line 13: Line 13:
 
=2 Mins Tutorial=
 
=2 Mins Tutorial=
  
<gflash width="790" height="630">http://docs.zkoss.org/images/3/37/Demo.swf</gflash>
+
<gflash width="790" height="630">Demo.swf</gflash>
  
 
=Steps=
 
=Steps=
Line 55: Line 55:
  
 
* Related Link
 
* Related Link
:* [[Style Guide]] (new version will be release soon!!)
+
:* [[ZK_Style_Guide]] (new version will be release soon!!)
 
:* [http://zkoss.org/zkdemo/userguide/ ZK Demo]
 
:* [http://zkoss.org/zkdemo/userguide/ ZK Demo]
 
:* [http://zk1.svn.sourceforge.net/viewvc/zk1/branches/3.5/zul/src/archive/web/zul/css/ Browse Newest ZK 3.5 CSS]
 
:* [http://zk1.svn.sourceforge.net/viewvc/zk1/branches/3.5/zul/src/archive/web/zul/css/ Browse Newest ZK 3.5 CSS]

Latest revision as of 04:07, 3 December 2010

DocumentationSmall Talks2008NovemberUse Theme Tool to Customize your Own Theme
Use Theme Tool to Customize your Own Theme

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



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