ZK 7 is an upcoming big release focusing on HTML5 and CSS3. 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
In the previous step, we created a black theme project and we can see how _zkvariables.less file located under web/black/zul folder. This file contains all the LESS variables for ZK’s default theme. Now, to customize a black theme, simply modify the color code value for these LESS variables.
For example, to change navigation component colours, search “navbar” in _zkvariables.less file and find all the LESS variables that are used for the component. We then simply modify them to adapt the black theme style like the following:
Check the customization
1. Open pom.xml in black theme project, and uncomment PE/EE related comments if you are building theme for PE/EE edition.
2. Run maven install for black project, it will compile LESS files and create the theme jar file.
3. In your existing ZK project, add black theme dependency in pom.xml.
And add preferred theme in zk.xml
4. Start up ZK project to check the customization.
5. If you change LESS variables’ values again, run mvn test again to compile LESS based on latest modification. Then re-start ZK project to check the customization.
6. After you have done the customization, execute mvn install to build the jar file.
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 project/lib folder.
- zul.jar (extract zk-bin-7.0.0-Preview.zip file from sourceforge)
- 3. Write ant script build.xml file like the following sample under project folder, and change input folder and output folder as needed.
- 4. Execute ant command in command line tool.