ZK Official Themes"

From Documentation
m (remove Bootstrap)
Line 11: Line 11:
 
#* Sapphire - from [http://code.google.com/p/zkthemes/downloads/list google code]
 
#* Sapphire - from [http://code.google.com/p/zkthemes/downloads/list google code]
 
#* Silvertail - from [http://code.google.com/p/zkthemes/downloads/list google code]
 
#* Silvertail - from [http://code.google.com/p/zkthemes/downloads/list google code]
#* Atlantic - from [https://github.com/zkoss/atlantic/raw/v0.8.0/dist/atlantic-0.8.0.zip github]
+
#* Atlantic - from [http://github.com/zkoss/atlantic/raw/v0.8.0/dist/atlantic-0.8.0.zip github]
 
# Put theme.jar file under "'''projectName/WEB-INF/lib'''" folder.
 
# Put theme.jar file under "'''projectName/WEB-INF/lib'''" folder.
 
# Register preferred theme by library property in '''zk.xml''' file under "'''projectName/WEB-INF'''" folder
 
# Register preferred theme by library property in '''zk.xml''' file under "'''projectName/WEB-INF'''" folder

Revision as of 06:54, 7 November 2013



Currently, ZK provide the following different themes: Breeze (built-in theme), Sapphire, Sivertail and Atlantic. Where Breeze, Sapphire and Silvertail themes are using the same Trendy Design with different colors, and Atlantic theme is using Flat Design.

Installation

  1. Download the preferred theme.jar file.
  2. Put theme.jar file under "projectName/WEB-INF/lib" folder.
  3. 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>

Trendy Design Theme

In this design, we use gradient background, rounded corner and shadow effect for most components. Breeze is greyish based theme that support desktop and tablet. Sapphire is blueish based theme that support desktop only. Silvertail is silverish based theme that support desktop only.

The look and feel of Breeze, Sapphire and Silvertail theme, click on image to view original size.

Breeze
Sapphire
Silvertail

Flat Design Theme: Atlantic

On contrary to trendy design, gradient background, rounded corner and shadow effect are removed. It is easy to customize and create a new theme based on this design. Atlantic is blueish based theme that support desktop and tablet.

The look and feel of Atlantic theme, click on image to view original size.

Atlantic

Tablet Support

Currently, Breeze and Atlantic themes support tablet device.

Version History

Last Update : 2013/11/07


Version Date Content
     



Last Update : 2013/11/07

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