ZK Official Themes"
m |
|||
Line 25: | Line 25: | ||
| Sapphire, Silvertail, Atlantic, ZK Theme Pack (23 Themes) | | Sapphire, Silvertail, Atlantic, ZK Theme Pack (23 Themes) | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
= Trendy Design Theme: Breeze, Sapphire, Silvertail = | = Trendy Design Theme: Breeze, Sapphire, Silvertail = | ||
Line 81: | Line 63: | ||
[[File:zkthemepacksample.png | none | thumb | 500px | ZK Theme Pack]] | [[File:zkthemepacksample.png | none | thumb | 500px | ZK Theme Pack]] | ||
+ | |||
+ | |||
+ | = Installation = | ||
+ | |||
+ | # Download the preferred theme.jar file. | ||
+ | #* Default theme (Breeze or Iceblue) - built-in theme, no need to download and register. | ||
+ | #* Sapphire, Silvertail, Atlantic - from [http://github.com/zkoss/zkthemes/releases github] | ||
+ | #* ZK Theme Pack - coming soon | ||
+ | # Place theme.jar file under "'''projectName/WEB-INF/lib'''" folder. | ||
+ | # Register preferred theme by library property in '''zk.xml''' file under "'''projectName/WEB-INF'''" folder | ||
+ | <div style="margin-left: 2em"> | ||
+ | <source lang="xml"> | ||
+ | <!-- zk.xml --> | ||
+ | <library-property> | ||
+ | <name>org.zkoss.theme.preferred</name> | ||
+ | <value>sapphire</value> <!-- or silvertail, atlantic --> | ||
+ | </library-property> | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | = Manipulating Themes = | ||
+ | #*[https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling/Understanding_the_Theming_Subsystem/Switching_Themes Provide personalized experience] | ||
+ | #*[https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling/Customizing_Standard_Themes Customize a standard theme] | ||
=Version History= | =Version History= |
Revision as of 07:42, 27 October 2017
Overview
This is an overview of the default themes and applicable add-on themes for each ZK version.
ZK 6.5 | ZK 7.0 | ZK 8.0 | ZK 8.5 | |
---|---|---|---|---|
Default Theme | Breeze | Breeze | Breeze | Iceblue |
Applicable Themes | Sapphire, Silvertail | Sapphire, Silvertail, Atlantic | Sapphire, Silvertail, Atlantic | Sapphire, Silvertail, Atlantic, ZK Theme Pack (23 Themes) |
Trendy Design Theme: Breeze, Sapphire, Silvertail
Trendy design emphasizes on gradient background, rounded corners and shadow effects. Breeze is a greyish based theme that supports desktop and tablet, sapphire is a blueish based theme that supports desktop only and silvertail is a silverish based theme that also support desktop only.
See below to take a quick view at the look and feel of Breeze, Sapphire and Silvertail, click image to view original size.
Flat Design Theme: Atlantic
On the contrary, flat design replaces skeuomorphism (gradient background, rounded corner and shadow effect) with simplicity and visual clarity to communicate. It is easy to create and customize a new theme based on this design. Atlantic is a blueish based theme that supports both desktop and tablets.
See below to take a quick view at the look and feel of Atlantic, click image to view original size.
Not to Import Google Font
Please refer to ZK Configuration Reference/zk.xml/The Library Properties/org.zkoss.theme.atlantic.useGoogleFont.disabled
ZK Theme Pack: 23 themes
ZK Theme Pack contains 23 modern themes, including lite themes, dark themes and mix-match themes. These themes are designed for ZK 8.5 and later versions and are compatible with ZK 8.5's default Iceblue theme.
Lite themes: Poppy, Marigold, Olive, Aurora, Lavender
Dark themes: Montana, Ruby, Amber, Emerald, Aquamarine, Violet
Mix-match: Cheese and Wine, Winter Spring, Blueberry and Raspberry, Macaron, Deep Sea, Garden Salad, Zen, Mysterious Green, Cardinal, Space Black, Office and Material
Installation
- Download the preferred theme.jar file.
- Default theme (Breeze or Iceblue) - built-in theme, no need to download and register.
- Sapphire, Silvertail, Atlantic - from github
- ZK Theme Pack - coming soon
- Place theme.jar file under "projectName/WEB-INF/lib" folder.
- Register preferred theme by library property in zk.xml file under "projectName/WEB-INF" folder
<!-- zk.xml -->
<library-property>
<name>org.zkoss.theme.preferred</name>
<value>sapphire</value> <!-- or silvertail, atlantic -->
</library-property>
Manipulating Themes
Version History
Version | Date | Content |
---|---|---|