|
|
| (7 intermediate revisions by 2 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.
| |
| − | **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 (Iceblue, 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.
| |
| | | | |
| | {{ZKDevelopersReferenceHeadingToc}} | | {{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.
| |
| | | | |
| − | '''Last Update :''' ''{{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}''
| |
| | | | |
| | {{ZKDevelopersReferencePageFooter}} | | {{ZKDevelopersReferencePageFooter}} |