Customizing Standard Themes"
m (remove empty version history (via JWB)) |
|||
(23 intermediate revisions by 7 users not shown) | |||
Line 2: | Line 2: | ||
__TOC__ | __TOC__ | ||
− | Here we | + | |
+ | Here we introduce how to customize the standard themes, such as iceblue, breeze and silver gray. | ||
+ | |||
+ | = Customize standard themes using theme template= | ||
+ | {{versionSince|8.0.2}} | ||
+ | |||
+ | Please see [[ZK Developer's Reference/Theming and Styling/Creating Custom Themes/Theme Template]]. | ||
= Change Font Size and Family = | = Change Font Size and Family = | ||
− | The default theme of ZK components | + | {{versionSince|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''': | ||
+ | |||
+ | <source lang="css"> | ||
+ | [class*="z-"]:not([class*="z-icon-"]) { | ||
+ | font-family: Arial; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | If you want to define the default font family for '''the whole page body''' (including html native element): | ||
+ | |||
+ | <source lang="css"> | ||
+ | body *:not([class*="z-icon-"]) { | ||
+ | font-family: Arial; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | = 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 <i>per-user</i> theme (like zkdemo does), you have to [[ZK_Developer's_Reference/Theming_and_Styling/Theme_Providers | implement a theme provider]]. | Notice that the library properties control the theme for the whole application. If you want to provide <i>per-user</i> theme (like zkdemo does), you have to [[ZK_Developer's_Reference/Theming_and_Styling/Theme_Providers | implement a theme provider]]. | ||
== Font Size == | == Font Size == | ||
+ | |||
+ | {{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. | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Default</center> | ! <center>Default</center> | ||
Line 26: | 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 < | + | | The smaller font size used in the component that requires small fonts, such as <code>toolbar</code>. |
|- | |- | ||
Line 39: | Line 69: | ||
|} | |} | ||
− | To change the default value, you can specify the library properties in < | + | 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 55: | Line 85: | ||
</library-property> | </library-property> | ||
</source> | </source> | ||
− | + | ||
== Font Family == | == Font Family == | ||
+ | |||
+ | {{deprecatedSince| 7.0.0}} | ||
+ | |||
The following library properties control the font family. | The following library properties control the font family. | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Description</center> | ! <center>Description</center> | ||
Line 65: | Line 98: | ||
|- | |- | ||
| org.zkoss.zul.theme.fontFamilyT | | org.zkoss.zul.theme.fontFamilyT | ||
− | | Default: < | + | | 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 71: | Line 104: | ||
|- | |- | ||
| org.zkoss.zul.theme.fontFamilyC | | org.zkoss.zul.theme.fontFamilyC | ||
− | | Default: < | + | | Default: <code>Verdana, Tahoma, Arial, serif</code> |
− | The font family used for | + | The font family used for contents. |
|} | |} | ||
Line 79: | 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 < | + | 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"> | ||
.z-a-disd { | .z-a-disd { | ||
− | color: #C5CACB !important; cursor: default!important; | + | color: #C5CACB !important; |
+ | cursor: default!important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
.z-a-disd:visited, .z-a-disd:hover { | .z-a-disd:visited, .z-a-disd:hover { | ||
− | text-decoration: none !important; cursor: default !important;; | + | text-decoration: none !important; |
+ | cursor: default !important;; | ||
border-color: #D0DEF0 !important; | border-color: #D0DEF0 !important; | ||
} | } | ||
</source> | </source> | ||
− | Then, specify it in < | + | Then, specify it in <code>WEB-INF/zk.xml</code> as follows. |
<source lang="xml" > | <source lang="xml" > | ||
Line 102: | Line 137: | ||
For more information, please refer to the [[ZK Style Guide]]. | For more information, please refer to the [[ZK Style Guide]]. | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} |
Latest revision as of 10:26, 5 February 2024
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.
The default font size. It is used in the most components. | ||
The smaller font size used in the component that requires small fonts, such as toolbar .
| ||
The extremely small font size; rarely used. | ||
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.
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.