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.
I tried your sample project and it is not working for me.
The reason might be that in your zknavdemo project you use snapshot version in pom:
which impacts libraries:
I do not believe we have access to your shapshots, I only have 7.0.0-Preview
Nice, I wanted an easy way to do this.
It is sad to still see the need for Ant support and examples. I pity anyone attempting to use Ant to build and maintain non-trivial ZK projects, the experienced fragility and needless complexity of Ant projects drove me to migrate all my Ant projects to Maven, ASAP after I was up-to-speed with Maven.
Just change the version to 7.0.0-Preview in your pom.xml.
It can build by maven with “mvn install”, the Ant parts is an alternative if someone prefer to use Ant instead of maven.
I built this with a few customizations, thanks.
One question: previously, the themes used a lot of images (e.g. panel-corner.gif, wnd-hm.png, wnd-hr.png, etc.) Looking at the ZK 7 zul.jar, I see that the images are still there, but the css does not refer to them.
On our site, we had customized those images. Now, it seems we will need to do the gradient’s etc. via the LESS variables. Is that true?
Also, it would be helpful if a ver 7, draft Style Guide was made available
If I want z-window-header background to be something different
and wanted its color to be something other than @textColorGrayDark
what is the recommend way to customize it?
Do I change the window.less file?
1. We use CSS 3 in ZK7 which means a lot of images are not needed anymore. Therefore, you can do the gradients via LESS variables.
2. If you just want to change colors only, you don’t have to change window.less file.
We are still working on style guide for ZK7 and will publish the articles along with ZK 7 releases.
I followed the above instruction and failed at maven install stage in eclipse. And class BlackThemeWebAppInit.java in IDE shows “The type org.zkoss.web.theme.StandardTheme$ThemeOrigin cannot be resolved. It is indirectly referenced from required .class files”
at line “Themes.register(….)”. What’s the problem of the Themes class?
Maven build trace below:
[INFO] >>> exec-maven-plugin:1.2.1:java (compile-less-from-zkex) @ black >>>
[INFO] <<< exec-maven-plugin:1.2.1:java (compile-less-from-zkex) @ black <<<
[INFO] — exec-maven-plugin:1.2.1:java (compile-less-from-zkex) @ black —
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
Caused by: java.lang.NullPointerException
… 6 more
[INFO] BUILD FAILURE
How’s things, I have seen that sometimes this website displays a 403 server error. I figured you would be keen to know. All the best
Thanks for every other informative blog. Where else could I get that kind of info wtiertn in such an ideal approach? I have a challenge that I am simply now working on, and I have been on the look out for such information.