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

  1. Pick a base colourPick a basic color
    You can see how the colour would really look like on ZK components in the “Quick Preview” tab.Preview result
  2.  

  3. Adjust colour balance
    Adjust color 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.Preview result
  4.  

  5. Click Apply ThemeAdjust color balance
    You can then see ZK components in “Final Result” tab being applied the new colour and theme of your choice.
    Preview result

 
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:
Download

  1. Provide a theme name.
  2. Provide a display name.
  3. 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/

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

27 Responses to “ZK 6 Online Theme Generator (ThemeRoller)”

  1. Stefano Bianchi says:

    Aaaaaaaaaaaaaaaaaaaaaabsolutely amazing!

  2. TRATOR says:

    very nice guys!

  3. Júnior Couto says:

    Wow! The ZK demonstrates its power again. Congratulations to the Potix developers for another big difference.

  4. Giovanni Ganassin says:

    What to say… outstanding!

  5. costas yiannoulis says:

    Great tool! I suppose that in the beta version you will provide also the ability to change styling options for individual components 🙂

  6. tizios says:

    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!

  7. Ron Grimes says:

    Vaadin, schmaadin. ZK rocks.

  8. eric rosas says:

    Great tool! , but change styling options , for example letter min or max, number, etc

  9. andreas says:

    Very very very cool… I want the production version 🙂

  10. Jimmy says:

    Thanks for your comments, please feel free to leave your feedback here, we will evaluate the features accordingly.

  11. guiye says:

    hi, very nice feature! if we could customize each component color will be the greatest app in zk world! =)

  12. BG says:

    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?

  13. Caio says:

    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?

  14. Jimmy says:

    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?

  15. After downloading the jar file, if i want to change color for particular component, how can i do that ?

  16. anlutech says:

    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)

  17. Isaac says:

    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.

  18. jean says:

    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?

  19. Farhanrasel says:

    Really really nice.

  20. Farhanrasel says:

    Really and really nice.

  21. 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

  22. Alberick says:

    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.

  23. Rick R says:

    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?

  24. Isabel says:

    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

  25. Jumper Chen says:

    @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/

Leave a Reply