Theming and Styling"

From Documentation
m
m ((via JWB))
 
(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}}

Latest revision as of 07:37, 8 July 2022


Theming and Styling


This chapter introduces how you change a component's appearance through different ways including mold, CSS class, or even a theme.

To customize an individual component's appearance, please read ZK Style Customization Guide.

To apply an overall, consistent design on all components, please see ZK Developer's Reference/Theming and Styling/Creating Custom Themes.






Last Update : 2022/07/08

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