|
|
| (12 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | {{ZKDevelopersReferencePageHeader}} | | {{ZKDevelopersReferencePageHeader}} |
| | | | |
| − | The look and feel of a component is controlled by its molds and corresponding CSS styles.
| + | This chapter introduces how you change a component's appearance through different ways including mold, CSS class, or even a theme. |
| − | *Molds
| |
| − | *: A component could have multiple different appearances, such as accordion vs regular [[ZK Component Reference/Containers/Tabbox|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.
| + | To customize an individual component's appearance, please read [[ZK Style Customization Guide]]. |
| | | | |
| − | *Understanding the Theming Subsystem
| + | To apply an overall, consistent design on all components, please see [[ZK Developer's Reference/Theming and Styling/Creating Custom Themes]]. |
| − | **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.
| + | {{ZKDevelopersReferenceHeadingToc}} |
| − | **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.
| |
| | | | |
| − | {{ZKDevelopersReferenceHeadingToc}}
| |
| | | | |
| − | 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 [http://getfirebug.com/ Firebug] for Firefox, and [http://en.wikipedia.org/wiki/Internet_Explorer_Developer_Toolbar Developer Tools] for Internet Explorer, to investigate how CSS styles are used.
| |
| | {{ZKDevelopersReferencePageFooter}} | | {{ZKDevelopersReferencePageFooter}} |