Theming and Styling"

From Documentation
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
  
Depending on the requirement, there are different ways to customize the look and feel of components.
+
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 appearance, such as accordion vs regular [[ZK Component Reference/Containers/Tabbox|tabbox]]. Each appearance is called a mold. You could choose one fulfilling your need.
+
To customize an individual component's appearance, please read [[ZK Style Customization Guide]].  
*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.
+
To apply an overall, consistent design on all components, please see [[ZK Developer's Reference/Theming and Styling/Creating Custom Themes]].
*Theme Customization
 
*: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.
 
*Theme Provider
 
*:If you allow users to have different themes they prefer to use, you could implement a theme provider to allow them to switch among the themes you provide.
 
  
 
{{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 additions, 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.
+
{{LastUpdated}}
 +
 
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Revision as of 07:44, 29 September 2020


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 : 2020/09/29




Last Update : 2020/09/29

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