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 setting the current theme by writing a custom ThemeResolver.

  • Proving Theme Services

  Switching

  • Resolving Theme URLs

• Customizing Default Theme

  The default themes (breeze, classic blue.. provided by ZK) allows some generic customization, such as font size. In additions, you could customize CSS and also DOM structures.

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.