Introduction

Previously, we have introduced an online themer for ZK 6.5 to customize own personal themes. However, as the release of ZK 7 focuses on theme engine improvements combining the power of CSS 3, LESS and Bootstrap, the theme generator we have introduced is no longer applicable.

We have therefore created another online theme-roller especially for ZK 7. ZK Online Theme-Roller is built based on LESS, which means that customizing individual components’ look and feel is now made possible!

For more information on ZK 7, please click here or check out the demo!

ThemeRoller7-01

How to use

  1. Click each category to customize components
    ThemeRoller7-02
    As illustrated above, there are 7 categories.

    • Overall – customize basic colors for Text, Border, Background and Icons, most components can be customized in this category.
    • Container – customize extra colors for Groupbox, Window, Panel and Tabbox. Components that can’t be done from overall category.
    • Data – customize extra colors for Table (Grid, Listbox) related components that can’t be done from overall category.
    • Essential – customize extra colors for Button, Menu and Navbar components that can’t be done from overall category.
    • Input – customize extra colors for Input Element and Combobox components that can’t be done from overall category.
    • Layout – customize extra colors for Splitter components that can’t be done from overall category.
    • Misc – customize extra colors for Other components that can’t be done from overall category.
  2. Choose a colour set to customize your components
    ThemeRoller7-03
  3. Click Apply Changes
    ThemeRoller7-04
    Components now applied with the new color and theme of your choice.
    ThemeRoller7-05

Download the theme

Once you have played around and mix matched a theme you like, you can download the theme as a jar library to use like ZK Themes 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.

ThemeRoller7-06

Apply custom theme to your ZK projects

To apply themes generated using ZK Themeroller

  1. Put the jar file under WEB-INF/lib
  2. Set org.zkoss.theme.preferred library property in zk.xml as shown below
  3. 
    
        org.zkoss.theme.preferred
        lightyellow 
    
    
    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.

3 Responses to “Online ThemeRoller for ZK 7.0”

  1. davout says:

    I’m wondering if if would help if you could add a ‘gallery’ option to the theme roller where people could upload theme definitions to share with others.

    You could even have options for selling themes created by commercial web designers

Leave a Reply