Customizing Standard Themes"

From Documentation
m
m (remove empty version history (via JWB))
 
(12 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
__TOC__
 
__TOC__
−
Here we discuss how to customize the standard themes, such as iceblue, breeze and silver gray.
 
  
−
= Customize standard themes using  template - ZK 8.0.2 and later=
+
Here we introduce how to customize the standard themes, such as iceblue, breeze and silver gray.
  
−
Since ZK 8.0.2, all style-related files are collected in one template theme project, making it much easier to create a custom theme.
+
= Customize standard themes using theme template=
−
The main idea here is to have a ZK template theme as the base theme, which then allows ZK developers to extend the base theme and make as many modifications as desired. And since we now have this idea of theme extension, ZK developers can now create a base theme for their project, which is based on ZK template theme, and then extend their own base theme to build more custom themes.
+
{{versionSince|8.0.2}}
  
−
For detailed steps please read [https://www.zkoss.org/wiki/Small_Talks/2016/May/New_Approach_for_Building_Custom_ZK_Theme New Approach for Building Custom Theme]
+
Please see [[ZK Developer's Reference/Theming and Styling/Creating Custom Themes/Theme Template]].
  
−
= Change Font Size and Family - ZK 7.0.0 =
+
= Change Font Size and Family =
  
−
In ZK 7, you can use CSS to define the fonts (there are no special config attributes available/required anymore)
+
{{versionSince|7.0.0}}
  
−
If you want to define the default font family '''for ZK components only''':
+
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''':
  
 
<source lang="css">
 
<source lang="css">
Line 38: Line 39:
 
== Font Size ==
 
== Font Size ==
  
−
Deprecated since 7.0.0
+
{{deprecatedSince|7.0.0}}
  
 
The default theme uses the following library properties to control the font sizes.
 
The default theme uses the following library properties to control the font sizes.
  
−
{| border="1px"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Default</center>
 
! <center>Default</center>
Line 55: Line 56:
 
| <center>org.zkoss.zul.theme.fontSizeS</center>
 
| <center>org.zkoss.zul.theme.fontSizeS</center>
 
| <center>11px</center>
 
| <center>11px</center>
−
| The smaller font size used in the component that requires small fonts, such as <tt>toolbar</tt>.
+
| The smaller font size used in the component that requires small fonts, such as <code>toolbar</code>.
  
 
|-
 
|-
Line 68: Line 69:
  
 
|}
 
|}
−
To change the default value, you can specify the library properties in <tt>WEB-INF/zk.xml</tt> as follows.
+
To change the default value, you can specify the library properties in <code>WEB-INF/zk.xml</code> as follows.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 87: Line 88:
 
== Font Family ==
 
== Font Family ==
  
−
Deprecated since 7.0.0
+
{{deprecatedSince| 7.0.0}}
  
 
The following library properties control the font family.
 
The following library properties control the font family.
  
−
{| border="1px"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Description</center>
 
! <center>Description</center>
Line 97: Line 98:
 
|-
 
|-
 
|  org.zkoss.zul.theme.fontFamilyT
 
|  org.zkoss.zul.theme.fontFamilyT
−
| Default: <tt>Verdana, Tahoma, Arial, Helvetica, sans-serif</tt>
+
| Default: <code>Verdana, Tahoma, Arial, Helvetica, sans-serif</code>
  
 
The font family used for titles and captions.
 
The font family used for titles and captions.
Line 103: Line 104:
 
|-
 
|-
 
|  org.zkoss.zul.theme.fontFamilyC
 
|  org.zkoss.zul.theme.fontFamilyC
−
| Default: <tt>Verdana, Tahoma, Arial, serif</tt>
+
| Default: <code>Verdana, Tahoma, Arial, serif</code>
  
 
The font family used for contents.
 
The font family used for contents.
Line 111: Line 112:
 
= Add Additional CSS =
 
= 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 <tt>a</tt> component, you can provide a CSS file with the following content.
+
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 <code>a</code> component, you can provide a CSS file with the following content.
  
 
<source lang="css">
 
<source lang="css">
Line 126: Line 127:
 
</source>
 
</source>
  
−
Then, specify it in <tt>WEB-INF/zk.xml</tt> as follows.
+
Then, specify it in <code>WEB-INF/zk.xml</code> as follows.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 136: Line 137:
 
For more information, please refer to the [[ZK Style Guide]].
 
For more information, please refer to the [[ZK Style Guide]].
  
−
=Version History=
+
 
−
{{LastUpdated}}
 
−
{| border='1px' | width="100%"
 
−
! Version !! Date !! Content
 
−
|-
 
−
| &nbsp;
 
−
| &nbsp;
 
−
| &nbsp;
 
−
|}
 
  
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Latest revision as of 10:26, 5 February 2024


DocumentationZK Developer's ReferenceTheming and StylingCustomizing Standard Themes
Customizing Standard Themes


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

Customize standard themes using theme template

Since 8.0.2

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

Change Font Size and Family

Since 7.0.0

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.

Font Size

Deprecated Since 7.0.0

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

Deprecated Since 7.0.0

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.




Last Update : 2024/02/05

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Reference/Theming_and_Styling/Customizing_Standard_Themes&oldid=56828"