Customizing Standard Themes

From Documentation


Customizing Standard Themes


Here we discuss how to customize the standard themes, such as breeze, classic blue and silver gray.

Change Font Size and Family

The default theme of ZK components uses the library properties to control the font size and family. You can change them easily by specifying different values.

Notice that the library properties control the theme for the whole application. If you want to provide per-user theme (like zkdemo does), you have to implement a theme provider.

Font Size

The default theme uses the following library properties to control the font sizes.

Name
Default
Description
org.zkoss.zul.theme.fontSizeM
12px
The default font size. It is used in the most components.
org.zkoss.zul.theme.fontSizeS
11px
The smaller font size used in the component that requires small fonts, such as toolbar.
org.zkoss.zul.theme.fontSizeXS
10px
The extremely small font size; rarely used.
org.zkoss.zul.theme.fontSizeMS
11px
The font size used in the menu items.

To change the default value, you can specify the library properties in WEB-INF/zk.xml as follows.

<library-property>
	<name>org.zkoss.zul.theme.fontSizeM</name>
	<value>12px</value>
</library-property>
<library-property>
	<name>org.zkoss.zul.theme.fontSizeS</name>
	<value>10px</value>
</library-property>
<library-property>
	<name>org.zkoss.zul.theme.fontSizeXS</name>
	<value>9px</value>
</library-property>

Font Family

The following library properties control the font family.

Name
Description
org.zkoss.zul.theme.fontFamilyT Default: Verdana, Tahoma, Arial, Helvetica, sans-serif

The font family used for titles and captions.

org.zkoss.zul.theme.fontFamilyC Default: Verdana, Tahoma, Arial, serif

The font family used for contents.

Add Additional CSS

If you want to customize certain components, you can provide a CSS file to override the default setting. For example, if you want to customize the look and feel of the a component, you can provide a CSS file with the following content.

.z-a-disd {
	color: #C5CACB !important; cursor: default!important;
	text-decoration: none !important;
}
.z-a-disd:visited, .z-a-disd:hover {
	text-decoration: none !important; cursor: default !important;;
	border-color: #D0DEF0 !important;
}

Then, specify it in WEB-INF/zk.xml as follows.

 <desktop-config>
     <theme-uri>/css/my.css</theme-uri>
 </desktop-config>

For more information, please refer to the ZK Style Guide.

Version History

Last Update : 2013/07/05


Version Date Content
     



Last Update : 2013/07/05

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