ZK 7 is an upcoming big release focusing on HTML5 and CSS3, and has been designed keeping in mind the
cyber security threats in 2020. Themes are now based on LESS, which means that code is now much cleaner and more concise. The greatest value of this change to users is that it is now also very easy to create a new theme. This blog will guide you step by step on how to create your own theme for ZK 7.
ZK 7’s demo is available here
Here we assume you already have a ZK web project created by maven. In this demo we will use the same project in navigation component blog.
Step 1: create zk theme maven project from zk-maven-archetype in Eclipse
Refer to this document for using zk-maven-archetype. Follow Eclipse wizard to create a new zk theme maven project from zk-maven-archetype.
Select zk-archetype-theme then click Next
Type Artificial Id, theme-name and theme-listener-class values then click Finish
Step 2: Customize theme and Check customization
Customize black theme Check the customization
Build by Ant instead of Maven
Previously we have showed you how to use Maven to build theme, here is the step if you would like to build by Ant.
1. Follow the online document to install Apache Ant. 2. Download the following necessary jars from zk repository (right click -> save as) and put in folder. project/lib
zul.jar (extract zk-bin-7.0.0-Preview.zip file from
sourceforge) 3. Write ant script file like the following sample under project folder, and change input folder and output folder as needed. build.xml 4. Execute ant command in command line tool.