ZK Official Themes"

From Documentation
Line 47: Line 47:
  
 
== Not to Import Google Font ==
 
== Not to Import Google Font ==
By default Atlantic theme imports Google font, but some countries (e.g. China) are blocked from accessing that font or there is no internet available for a ZK-based application. Then this blocking will cause the theme displaying incorrectly. In this case, you need to disable importing Google font by the library property in zk.xml
+
Please refer to [[ZK Configuration Reference/zk.xml/The Library Properties/org.zkoss.theme.atlantic.useGoogleFont.disabled]]
 
 
<source lang='xml'>
 
<library-property>
 
    <name>org.zkoss.theme.atlantic.useGoogleFont.disabled</name>
 
    <value>true</value>
 
</library-property>
 
</source>
 
 
 
 
<!--
 
<!--
 
http://tracker.zkoss.org/browse/ZK-2931
 
http://tracker.zkoss.org/browse/ZK-2931

Revision as of 08:09, 20 July 2017



Currently, ZK provides the following different themes: Breeze (built-in theme), Sapphire, Silvertail and Atlantic. Breeze, Sapphire and Silvertail themes uses the same Trendy Design with just different colors while ZK 7's Atlantic theme adopts the new trend in user interface design --Flat Design .

Installation

  1. Download the preferred theme.jar file.
    • Breeze - built-in theme, no need to download and register.
    • Sapphire - from github
    • Silvertail - from github
    • Atlantic - from github
  2. Place 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

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.

Breeze
Sapphire
Silvertail

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.

Atlantic

Not to Import Google Font

Please refer to ZK Configuration Reference/zk.xml/The Library Properties/org.zkoss.theme.atlantic.useGoogleFont.disabled

Tablet Support

Currently, Breeze and Atlantic themes both supports tablet devices.

Version History

Last Update : 2017/07/20


Version Date Content
     



Last Update : 2017/07/20

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