ZK Developer's Reference/Theming and Styling

The look and feel of a component is controlled by its molds and corresponding CSS styles.

• Molds

  A component could have multiple different appearances, such as accordion vs regular tabbox. Each appearance is called a mold. You could choose the one that fulfills your need.

• CSS

  To fine-tune the look and feel of a particular component, you could specify CSS styles and classes without changing the DOM structure at the client.

The collection of the components' styles and associated images is called a theme. Theme controls the overall look and feel of a page composed of ZK components. For example, all the components using the standard sapphire theme have the same blue-ish glow appeal. There are several ways web developers could perform theme customization, ranging from slight, partial override to deep, entire overhaul.

• Understanding the Theming Subsystem
  • Information about a Theme

  Apart from having a name, a theme could be associated with many attributes. Standard themes have additional attributes like a more descriptive name for displaying purposes, a priority value to help the system choose the theme to use, and a origin of the theme's resources (i.e. CSS and image files). Web developers could also add more information about a theme, if so desired.

  • Registering your Theme

  Before using a theme, it must be registered so that the system knows about its existence and where to retrieve its resources (from a jar file or from a folder). Web developers could also modify the theme registration process by writing a ThemeRegistry, if their application requires it.

  • Switching Themes

  The user could switch to any registered themes by setting a cookie or a library property. Web developers could also add other ways for getting and setting the current theme by writing a custom ThemeResolver.

  • Providing Theme Resources

  After switching to another theme, ThemeProvider is responsible for getting the correct stylesheets to the client. This is done by manipulating the list of widget stylesheets comprising the theme. Web developers could create a custom ThemeProvider to change the caching for the widget stylesheets, inject additional widget stylesheets, reject unwanted widget stylesheets, and/or replace some widget stylesheets with another set.

  • Resolving Theme URLs

  Themes comprises of stylesheets and images. The URLs for those resources must be resolved once the theme changes. There are utility methods created for this purpose.

• Customizing Standard Themes

  Standard themes (breeze, sapphire, silvertail, classic blue, ... provided by ZK) allow some generic customization, such as changing the font size. In additions, you could customize CSS and also DOM structures.

• Creating Custom Themes
  • Archive-based Themes

  Standard themes are just some jar files that once imported into an web application's WEB-INF/lib, would be ready to use. Web developers could also create custom themes and package them inside java archive files.

  • Folder-based Themes

  Starting from ZK 6.5.2, however, themes could be packaged inside a folder. A new theme can be created by first cloning the folder containing an existing theme and then making the necessary changes to the stylesheets and images.

The CSS styling really depends on the implementation of the component (and the mold). It is suggested to refer to ZK Style Guide. In addition, if you have any doubt, you could use the HTML or CSS inspector shipped with the browser, such as Firebug for Firefox, and Developer Tools for Internet Explorer, to investigate how CSS styles are used.