Introduction
When applying a new look and feel for ZK components, developers need to go through various steps from designing new style component images, cropping those images following ZK theme rule to preparing several CSS files in order to create and apply a new theme. ZK Online Themer, also known as the ThemeRoller is an online ZK theme generator that helps you to do all that and generate different themes and colours for your ZK application in just a few clicks!
How to use
- Pick a base colour
You can see how the colour would really look like on ZK components in the “Quick Preview” tab.
- Adjust colour balance
ZK Themer is designed to base on the breeze theme to generate new sets of background images and CSS files, however, there are a lot of grey images that cannot be changed with basic colour because the saturation value of these grey images is zero so you’ll have to change the colour of these images by adjusting the colour balance like you would do in Photoshop.
- Click Apply Theme
You can then see ZK components in “Final Result” tab being applied the new colour and theme of your choice.
To Download
Once you have played around and found yourself a theme you like, you can download the theme as a jar library like ZK Themes to use and apply it to your application.
Before you download, you need to set the following values:
- Provide a theme name.
- Provide a display name.
- Download it.
Access ThemeRoller
ZK 6.5 ThemeRoller is available at: http://www.zkoss.org/zkthemeroller65
ZK 7.0 ThemeRoller is available at: http://www.zkoss.org/zkthemeroller/
ZK 6.0 ThemeRoller is available at: http://experimental.zkoss.org/zkthemer/
Aaaaaaaaaaaaaaaaaaaaaabsolutely amazing!
very nice guys!
Wow! The ZK demonstrates its power again. Congratulations to the Potix developers for another big difference.
What to say… outstanding!
Great tool! I suppose that in the beta version you will provide also the ability to change styling options for individual components 🙂
A generator of themes, it is a wonderful application, will improve the value of zk. Other frameworks like vaadin, have themes very captivating, but use less immediate. By providing themes, or giving the possibility to generate them easily, zk will have no rivals!
Vaadin, schmaadin. ZK rocks.
Great tool! , but change styling options , for example letter min or max, number, etc
Very very very cool… I want the production version 🙂
[…] more information, visit the blog or try now at: […]
Thanks for your comments, please feel free to leave your feedback here, we will evaluate the features accordingly.
hi, very nice feature! if we could customize each component color will be the greatest app in zk world! =)
Hey, i included myOrange theme jar generated through this in the lib folder, but the theme is not getting applied. It is continuing with the same breezer default theme of zk6.5.. Can anybody figure this out?
Plase, i have create one Theme. Name> “femaleTheme”
How i will use in my zk project?
…zk.xml
org.zkoss.theme.preferred
femaleTheme
It don’t work…. how are?
Hi BG,
ZK Themer is currently in its alpha and for trial only. Supporting ZK 6.5 is on the list but we need to consider overall priorities. I will let you know if there is an update.
Hi Caio,
What zk version are you using?
After downloading the jar file, if i want to change color for particular component, how can i do that ?
Hello
If we use this with a version 6.5 shows errors that not found components:
>>java.io.FileNotFoundException: Failed to load the resource: /gvcgaesco_6_5/js/zkmax/layout/css/scrollview.css.dsp
>> at org.zkoss.web.util.resource.DspExtendlet.service(DspExtendlet.java:82)
>> at org.zkoss.web.util.resource.ClassWebResource.web0(ClassWebResource.java:583)
>> at org.zkoss.web.util.resource.ClassWebResource.web(ClassWebResource.java:569)
>> at org.zkoss.web.util.resource.ClassWebResource.service(ClassWebResource.java:260)
>> at org.zkoss.web.util.resource.ClassWebResource$CWC.include(ClassWebResource.java:806)
>> at org.zkoss.zk.ui.http.WcsExtendlet.service(WcsExtendlet.java:131)
Why is everyone saying this is amazing? I’m a front-end web developer. I’ve been working with ZKoss for the past week and frankly styling it is a nightmare. All these “themes” seem to do – when I can figure out how to get them working – is change the font and background colors. Wow. That’s sooo amazing. Seriously – ZKoss – stop using tabular layouts because they are extremely irritating to style. And don’t generate stylesheets. I’m having to override everything.
Isaac,
Were you able to change the style following the style guide: http://books.zkoss.org/wiki/ZK_Style_Guide
Do you want to talk more about the exact problem you have?
Really really nice.
Really and really nice.
I see something truly interesting about your web site so I saved to favorites . The Copyright Debate and RSS http://dealwannee.com/node/9463#comment-198835
It nice, but not easy, the style guide are limeted, but it’s an excelent tool. I’m not a programmer in JAVA so I need to investigate many technisism. So this tool is really amazing, for programmers, and for everyone.
Thanks for the theme generator, but what happened to the ‘loading spinner?’ When using one of these themes I no longer seem to have the nice spinner gif?
Hi!
I’m using zk 7.0 but when I apply my theme it doesn’t work.. I already included my theme jar generated through this in the lib folder, and changed web inf zk.xml to
org.zkoss.theme.preferred
AzulTheme
and still not work
@Isabel,
this is a tool for ZK 6 version, you should use the new tool for ZK 7 version instead – http://www.zkoss.org/zkthemeroller/
[…] more information, visit the blog or try now at: […]