Here we introduce how to customize the standard themes, such as iceblue, breeze and silver gray.

Customize standard themes using theme template

Please see ZK Developer’s Reference/Theming and Styling/Creating Custom Themes/Theme Template.

Change Font Size and Family

You can use CSS to define the fonts (there are no special config attributes available/required anymore)

If you want to define the default font family for all ZK components only:

[class*="z-"]:not([class*="z-icon-"]) {
    font-family: Arial;
}

If you want to define the default font family for the whole page body (including html native element):

body *:not([class*="z-icon-"]) {
    font-family: Arial;
}

Change Font Size and Family - ZK 6.5 and below

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.

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.

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.

Twitter Facebook LinkedIn