Theming and Styling

From Documentation
Revision as of 08:01, 21 March 2013 by Neillee2 (talk | contribs)


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.


Last Update : 2013/03/21

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.