Download - ZK 6.5.4 Style Guide.pdf
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
1/213
PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information.
PDF generated at: Mon, 11 Nov 2013 07:18:55 CST
ZK Style GuideFor ZK 6.5.4
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
2/213
Contents
Articles
ZK Style Guide 1
Introduction 1
ZK Class Concept 1
Sclass 3
Zclass 4
Overwriting 5
ZK Class Naming Rule 6
By DOM Structure 6
Layout Elements 6
Other Elements 7
Tool Icons 7
By DOM Position 8
Regions 8
Parts (3 x 3 grid) 8
Parts: (10 block, 13 block is used for Panel only) 9
Compass 9
By Event Effect 9
Basic Concepts 10
Priority Order 10
Action Image Index 11
Example 11
XUL Component Specification 12
A 12
Default 12
Auxhead 13
Default 13
Bandbox 15
Default 15
Bandpopup 17
Default 17
Borderlayout 18
Default 19
Default (North) 21
Default (South) 23
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
3/213
Default (West) 25
Default (East) 27
Default (Center) 29
Box 31
Default (Vbox) 31
Button 32
Default (os) 33
trendy 34
Calendar 36
Default 36
Caption 38
Default 38
Default (legend) 40
Cell 41
Default (Row) 41
Checkbox 43
Default 43
Colorbox 44
Default 44
Column 47
Default 47
Columnlayout 49
Default 49
Combobox 50
Default 51
Combobutton 52
Default 53
Comboitem 54
Default 54 Datebox 56
Default 56
Decimalbox 58
Default 58
Detail 59
Default 59
Doublebox 61
Default 61
Doublespinner 62
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
4/213
Default 62
Fisheyebar 64
Default 64
Footer 65
Default 66
Frozen 67
Default 67
Grid 68
Default 69
paging 71
Group 72
Default 73
Groupbox 74
Default 75
3d 76
Groupfoot 79
Default 79
Hbox 80
Default 81
Hlayout 82
Default 82
Intbox 83
Default 83
Label 84
Default 85
Listbox 86
Default 86
paging 87
select 89 Listfooter 90
Default 90
Listgroup 91
Default 91
Listgroupfoot 92
Default 93
Listheader 94
Default 94
Listitem 96
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
5/213
Default 96
Longbox 98
Default 98
Menubar 99
Default (Horizontal) 99
Default (Vertical) 100
Menu in Menubar 101
Menuitem in Menubar 103
Menupopup 105
Default 105
Menu in Menupopup 107
Menuitem in Menupopup 108
Menuseparator 109
Default 110
Paging 111
Default 111
os 113
Panel 114
Default 114
Popup 117
Default 118
Portallayout 120
Default 120
Progressmeter 122
Default 122
Radio 123
Default 123
Row 124
Default 125 Separator 126
Default (Horizontal) 127
Default (Vertical) 128
Slider 129
Default (Horizontal) 129
Default (Vertical) 131
sphere (Horizontal) 133
sphere (Vertical) 134
scale 136
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
6/213
Spinner 137
Default 138
Splitter 139
Default (Vertical) 139
Default (Horizontal) 141
Default (OS-Vertical) 143
Default (OS-Horizontal) 145
Tabbox 146
Default (Horizontal) 147
Default (Vertical) 152
accordion 159
accordion-lite 162
Tablelayout 164
Default 165
Textbox 166
Default 166
Timebox 167
Default 167
Toolbar 168
Default 169
Panel 171
Toolbarbutton 173
Default 173
Tree 174
Default 175
paging 176
Treechildren 178
Default 178
Treecol 179 Default 180
Treefooter 181
Default 181
Treerow 183
Default 183
Vlayout 185
Default 186
Window 187
Default (embedded) 187
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
7/213
Default (popup) 191
Default (overlapped, highlighted, and modal) 193
Loading 196
ReferencesArticle Sources and Contributors 199
Image Sources, Licenses and Contributors 203
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
8/213
ZK Style Guide 1
ZK Style Guide
Documentation:Books/ZK_Style_Guide
If you have any feedback regarding this book, please leave it here.
http://books.zkoss.org/wiki/ZK_Component_Development_Essentials
Introduction
Welcome to ZK, the easiest way to build modern Java web application.
ZK Style Guide describes the styling concepts and design of ZK components. For installation, please refer to ZK
Installation Guide. For concepts, please refer to ZK Essentials. For a full description of component properties and
methods go to ZK Developer's Reference.
ZK Themes[1]
is an open source project that has a collection of various themes, including breeze, silvertail and
sapphire. You could derive your theme from any of them. It is also a good source to know how a custom theme
works.
For more detail about customize theme and how to apply customize CSS, please refer to Theming and Styling.
References
[1] http://code.google.com/p/zkthemes/
ZK Class Concept
zclass
ZK Class (aka., zclass) is a naming pattern. The name assigned to zclass
(HtmlBaseComponent.setZclass(java.lang.String)[1]
) will be used to name all CSS classes associated with the DOM
structure of a component. In addition, each kind of components is assigned with a unique zclass, and shipped with all
the required CSS rules. For example, the default names of button and textbox are z-button and z-textbox,
respectively.
The DOM structure of a component is sometimes complex. Some of the child DOM elements have to be styled with
a proper CSS class (and corresponding CSS rules). These classes are all named by using ZK Class as the prefix. For
example, the DOM element at left-top corner of a button is associated with a CSS class named z-button-tl.
ZK Class is also used to name the CSS class representing different user activities, such as click, focus, mouse-over,
mouse-out, and so on. For example, when a user moves his mouse over a component, an additional CSS class will be
added automatically to the root DOM element of the component. The additional class is named by appending
-over to ZK Class of the component.
For example, since ZK Class of a button is z-button (default), the additional CSS class will be
z-button-over, when a user moves the mouse over it. More precisely, the CSS class associated with the root
DOM element of the button will become z-button z-button-over. Similarly, if the button gains the focus,
the CSS class will become z-button z-button-focus. Thus, it is easier to customize the look of a
component for particular scenario, such as changing the look when a button gains the focus.
Since ZK Class is used to name all required CSS classes, all the default CSS rules won't be applied if zclass is
assigned with a different name. Thus, ZK Class is generally used to distinguish different molds of components, and
http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)http://code.google.com/p/zkthemes/http://new.zkoss.org/index.php?title=ZK_Developer%27s_Reference/Theming_and_Stylinghttp://code.google.com/p/zkthemes/http://new.zkoss.org/index.php?title=ZK_Developer%27s_Referencehttp://new.zkoss.org/index.php?title=ZK_Essentialshttp://new.zkoss.org/index.php?title=ZK_Installation_Guidehttp://new.zkoss.org/index.php?title=ZK_Installation_Guidehttp://books.zkoss.org/wiki/ZK_Component_Development_Essentials -
8/10/2019 ZK 6.5.4 Style Guide.pdf
9/213
ZK Class Concept 2
to provide totally different look for the same component in the same mold.
sclass
Styling Class (aka., sclass) is another way to add CSS styling to a component. By default, nothing is assigned to
sclass (i.e., empty). Once it is assigned with a non-empty value (HtmlBasedComponent.setSclass(java.lang.String)[2]
), it will be added to the root element as additional CSS class.
For example, the following statement will assign the CSS class of the root DOM element with zk-button
foo-pretty:
Sclass won't change the naming of the default CSS classes, so all the default CSS rules will be applied (aka.,
inherited). It is useful to fine-tune a particular component.
Customization
In summary, there are three different ways to change the style of ZK components:
1. Change sclass (HtmlBasedComponent.setSclass(java.lang.String)[2]
)
Since zclass is not changed, the original look (i.e., CSS rules) will be applied too. It is useful to fine-tune a
particular component
2. Change zclass (HtmlBaseComponent.setZclass(java.lang.String)[1]
)
Since zclass is changed, all child DOM elements will be associated with a different class. Thus, it won't inherit
any of the original look, but it is useful if you'd like to design a complete different look
3. Overwrite CSS rules (for the predefined CSS name)
You don't need to change sclass or zclass, if you'd like to change the look for every instance of the component.
Rather, you just override the corresponding CSS rules (for the predefined CSS name, such as
z-button-tl).
The relationship of sclass and zclass is shown below. The sclass, the red box below, will be added to the CSS classof the root DOM element of the component, while the zclass, the green box below, will be used as a prefix for the
naming the CSS class of the child DOM elements.
http://new.zkoss.org/index.php?title=File:Concepts4.jpghttp://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String) -
8/10/2019 ZK 6.5.4 Style Guide.pdf
10/213
ZK Class Concept 3
References
[1] http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)
[2] http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)
SclassAs described in the previous section, Styling Class (aka., sclass) is a way to add CSS styling to a particular
component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value
(HtmlBasedComponent.setSclass(java.lang.String)[2]
), it will be added to the root element as additional CSS class.
For example,
.mydb {
border: 1px solid blue;
}
As shown above, the first textbox is assigned with a sclass called mydb, while the second textbox is not. If you
examine the above example with a DOM inspector (such as Firebug[1]
), you will find ZK assigns two CSS classes to
the first textbox: z-textbox and mydb. That is, the textbox will inherit all CSS styles from the default rules (for
z-textbox), while the custom CSS class (mydb in this example) is used to provide additional customization.
References
[1] http://getfirebug.com/
http://getfirebug.com/http://getfirebug.com/http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String) -
8/10/2019 ZK 6.5.4 Style Guide.pdf
11/213
Zclass 4
Zclass
As described in the previous section, ZK Class (aka., zclass) is a naming pattern. The name assigned to zclass
(HtmlBaseComponent.setZclass(java.lang.String)[1]
) will be used to name the CSS classes associated with the DOM
structure of a component, including the root and the children. In addition, each kind of components is assigned with
a unique zclass and shipped with all the required CSS rules.
Since zclass is used to name the CSS classes associated DOM elements, all the default CSS rules won't be applied if
zclass is assigned with a different value. Thus, it is used to custom a component with a totally different look. If you'd
like to inherit the default CSS rules and override only a part of it, you could override an original CSS rule or assign
sclass as described in the other sections.
Here is an example: at the first column, we assign textboxes with a different zclass, while, at the second column, we
use the default zclass (z-textbox). The following is the result:
The following is the source code:
.mydb-disd {
color: blue !important; cursor: default !important; opacity: .6;
-moz-opacity: .6; filter: alpha(opacity=60);
font-weight: bold;
}
.mydb-disd * {
color: blue !important; cursor: default !important;
font-weight: bold;
}
.mydb {
background: white;
border: 1px solid #7F9DB9;
}
.mydb-focus, .mydb-focus input {
border: 1px solid red;
}
.mydb-text-invalid {
background: yellow;
border: 1px solid red;
}
.mydb-readonly, .mydb-text-disd { background: green;
http://new.zkoss.org/index.php?title=File:Concepts2.pnghttp://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String) -
8/10/2019 ZK 6.5.4 Style Guide.pdf
12/213
Zclass 5
}
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
13/213
ZK Class Naming Rule 6
ZK Class Naming Rule
This section investigates ZK's class naming rule.
By DOM StructureThe naming pattern of the DOM structure is used to describe the components which are composed of more than one
part. The following recommended naming patterns are to clarify the DOM structure of ZK components, not a
limitation.
Layout Elements
-outer:the exterior of the specified component like splitter in vbox and hbox
-body:
the body content, like grid, tree, listbox, and so on.
-header:
the header content, like grid, tree, listbox, and so on.
-inner:
the interior of the specified component, like slider and tab.
-cnt:
like window's contentSclass or groupbox's contentSclass
-footer:
describes the footer content, like grid, tree, listbox, and so on.Negative option
-noheader:
no header element.
-noborder:
no border element.
-nofooter:
no footer element.
http://new.zkoss.org/index.php?title=File:Zk-css-dom.PNG -
8/10/2019 ZK 6.5.4 Style Guide.pdf
14/213
Other Elements 7
Other Elements
-faker:
faker element to mark a reference point at browser side, like grid, listbox, and tree.
-text:
text area.
-inp:
input element.
-sep:
separator element.
-img:
image area.
-pp:
pop*-up element, like datebox, combobox, and so on.
-btn:
a button or an icon.
Tool Icons
Usage Switch Resize Split
Postfix -close:
describes an icon which is closed, like tree,
group, an so on.
-colps:
describes a collapsible icon, like panel.
-colpsd:
describes a collapsible icon which is
collapsed, like panel.
-exp:
describes an expandable icon, like panel.
-expd:
describes an expandable icon which is
expanded, like panel.
-max:
describes a maximizable icon.
-maxd:
describes a maximizable icon which is
maximized.
-min:
describes a minimizable icon.
-mind:
describes a minimizable icon which is
minimized.
-splt:
describes a splittable
icon.
-ns:
describes a non-splittable
icon.
Note: all the bold characters have been renamed since ZK 3.6.0
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
15/213
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
16/213
Parts: (10 block, 13 block is used for Panel only) 9
Parts: (10 block, 13 block is used for Panel only)
This part is usually used in some components which have round corners.
-tl: Top Left -tr: Top Right
-hl: Header Left -hm: Header Middle -hr: Header Right
-cl: Center Left -cm: Center Middle -cr: Center Right
-fl: Footer Left -fm: Footer Middle -fr: Footer Right
-bl: Bottom Left -br: Bottom
Right
Note: the (10 block, 13 block is used for Panel only) section was introduced since ZK 3.6.0
Compass
-north
-west -center -east
-south
By Event Effect
These postfix string are appended to component's class name by ZK client engine.example:
a component=> .z-mycmp
mouse over => .z-mycmp-over
disabled and mouse over => .z-mycmp-over-disd
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
17/213
Basic Concepts 10
Basic Concepts
These postfix string are appended to component's class name by ZK client engine.
example:
a component=> .z-mycmp
mouse over => .z-mycmp-over
disabled and mouse over => .z-mycmp-over-disd
Priority Order
The appending order MUST follow the priority as follow
Priority 1 Priority 2 Priority 3
-clk:clicked event.
-focus:
focused event.
-over:
mouse over event.
-drag:
dragged event.
-drop:
dropped event.
-seld:selected event.
-ck:
checked event.
-unck:
unchecked event.
-disd:disabled event.
-visi:
visited event.
-hide:
hidden event.
-invalid
invalid event.
-readonly
readonly
event.
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
18/213
Action Image Index 11
Action Image Index
The CSS background of the action event of the DOM element is to use an arranged image composed of the following
descriptions.
Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Close Same as
above
Same as above Same as
above
Same as above Same as
above
Other status Same as
above
Same as above Same as
above
Same as above Same as
above
Example
This icon is a Timebox image.
This icon is a Tree toggle image.
http://new.zkoss.org/index.php?title=File:Action-indexing2.pnghttp://new.zkoss.org/index.php?title=File:Action-indexing.png -
8/10/2019 ZK 6.5.4 Style Guide.pdf
19/213
XUL Component Specification 12
XUL Component Specification
The section outlines each component and their relative molds.
AComponent Reference:A
A is a Anchor tag.
Version History
Version Date Content
Default
This is the Default mold for A.
Source
A[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-a -disd
Supported: V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
http://new.zkoss.org/index.php?title=File:A1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/a.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/A -
8/10/2019 ZK 6.5.4 Style Guide.pdf
20/213
Default 13
CSS Specification
Class Name Description Default Values
.z-a Font size font-family: ${fontFamilyC}; font-size: ${fontSizeM};
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/a.css.dsp?view=markup
Auxhead
Component Reference:Auxhead
Auxhead and Auxheader.
Version History
Version Date Content
Default
This is the Default mold for Auxhead
Source
Auxhead with Grid[1]
Auxhead with Listbox[2]
Auxhead with Tree[3]
Structure
http://new.zkoss.org/index.php?title=File:Auxhead-two.pnghttp://new.zkoss.org/index.php?title=File:Auxhead-one.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/tree.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/listbox.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Supplementary/Auxheadhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/a.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
21/213
Default 14
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: z-auxhead,
z-auxheader
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
div.z-grid-header
tr.z-auxhead
Background
image
background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1;
background-repeat: repeat-x;
div.z-grid-header
th.z-auxheader
Font size overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6;
white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;
.z-auxheader-cnt Font size of the
content
font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT}; border: 0; margin: 0;
padding: 0; overflow: hidden;
Example
div.z-grid-headertr.aux1.z-auxhead{
background-color:#F0FDFF;
background-position:08px;
}
div.z-grid-headertr.aux2.z-auxhead{
background-position:0-10px;
}
...
http://new.zkoss.org/index.php?title=File:Auxhead-demo.png -
8/10/2019 ZK 6.5.4 Style Guide.pdf
22/213
Default 15
...
References[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup
[2] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/listbox.css.dsp?view=markup
[3] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/tree.css.dsp?view=markup
Bandbox
Component Reference:Bandbox
Bandbox is composed of two parts, an input box and a button.
Version History
Version Date Content
Default
This is the Default mold for Bandbox.
Source
Bandbox[1]
Structure
http://new.zkoss.org/index.php?title=File:Bandboxtwo.pnghttp://new.zkoss.org/index.php?title=File:Bandboxone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Bandboxhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/tree.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/listbox.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
23/213
Default 16
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-bandbox -over -btn-clk -focus -btn-over -disd
Supported: V V V V V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-bandbox Font size border: 0; padding: 0; margin: 0; white-space: nowrap; font-family:
${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; repeat-x;
.z-bandbox-inp Background of inputelement
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border:1px solid #7F9DB9;
.z-bandbox-text-invalid Background of
invalidated
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0;
border: 1px solid #DD7870;
.z-bandbox-readonly,
.z-bandbox-text-disd
Background of
disabled and read
only
background: #ECEAE4;
.z-bandbox .z-bandbox-btn Background of the
button image
background: transparent url(${c:encodeURL('~./zul/img/button/bandbtn.gif')}) no-repeat 0
0;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo. css.dsp?view=markup
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
24/213
Bandpopup 17
Bandpopup
Component Reference:Bandpopup
Bandpopup is a container of Bandbox .
Version History
Version Date Content
Default
This is the Default mold for Bandpopup.
Source
Bandpopup[1]
Structure
http://new.zkoss.org/index.php?title=File:Bandpopupone.pnghttp://new.zkoss.org/index.php?title=File:Bandboxfirstt.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Bandpopup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
25/213
Default 18
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-band-popup
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-bandbox-pp Font size margin: 0; white-space: nowrap; font-family: ${fontFamilyC}; font-weight: normal; repeat-x;display: block; position:
absolute; z-index: 88000; background: white; border: 1px solid #7F9DB9; padding: 2px; font-size: ${fontSizeS};
Borderlayout
Component Reference:Borderlayout
Borderlayout is composed of five children: North, South, East, West, and Center
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Borderlayout -
8/10/2019 ZK 6.5.4 Style Guide.pdf
26/213
Default 19
Default
This is the Default mold for Borderlayout.
SourceBorderlayout
[1]
Structure
http://new.zkoss.org/index.php?title=File:Borderlayout2.jpghttp://new.zkoss.org/index.php?title=File:Borderlayout1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
27/213
Default 20
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-borderlayout
Supported: V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-borderlayout-icon
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-borderlayout Background
and color
width:100%; height:100%; overflow:hidden; background-color:#CDE6F5; border:0 none; position: relative;
.z-borderlayout-icon Background of
tool icons
overflow: hidden; width: 16px; height: 16px; float: right; margin-left: 2px; cursor: pointer; background:
transparent no-repeat 0 0; background-image :
url(${c:encodeURL('~./zul/img/layout/borderlayout-btn.png')});
Example
http://new.zkoss.org/index.php?title=File:Borderlayout-demo.png -
8/10/2019 ZK 6.5.4 Style Guide.pdf
28/213
Default 21
.z-borderlayout{
background-color:#D0F0FF;
}
.z-west-header,.z-center-header,.z-east-header,.z-north-header,
.z-south-header{
background-color:#E4F8FF;
background-position:013px;
}
.z-east-colpsd,.z-west-colpsd,.z-south-colpsd,.z-north-colpsd{
background-color:#E4F8FF;
}
.z-borderlayout-icon,.z-north-splt,.z-south-splt,.z-east-splt,
.z-west-splt{
opacity:.6;
filter:alpha(opacity=60);}
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.
dsp?view=markup
Default (North)
This is the Default (North) mold for Borderlayout.
Source
North[1]
Structure
http://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
29/213
Default (North) 22
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-north, .z-north-splt
Supported: V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-north-colps,
.z-north-colpsd,
.z-north-exp,
-over
Supported: V V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:North2.jpg -
8/10/2019 ZK 6.5.4 Style Guide.pdf
30/213
Default (North) 23
Class Name Description Default Values
.z-north Border and
background
border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-north-header Background of
header
color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px
4px 5px; border-bottom: 1px solid #9ecad8;
background:transparent repeat-x 0 0; background-image:
url(${c:encodeURL('~./zul/img/layout/borderlayout-hm.png')});
white-space: nowrap; overflow: hidden; line-height: 15px; zoom: 1;
.z-north-noborder No border border:0;
.z-north-splt Background of
splitter
position: absolute; height: 6px; width: 6px; z-index: 15;
background: #C4DCFB top; background-image:url("${c:encodeURL('~./zul/img/splt/splt-v.png')}");
cursor: s-resize; cursor: row-resize; line-height: 1px; font-size: 1px;
Default (South)This is the Default (South) mold for Borderlayout.
Source
South[1]
Structure
http://new.zkoss.org/index.php?title=File:South1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
31/213
Default (South) 24
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-south, .z-south-splt
Supported: V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-south-colps,
.z-south-colpsd,
.z-south-exp,
-over
Supported: V V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:South2.jpg -
8/10/2019 ZK 6.5.4 Style Guide.pdf
32/213
Default (South) 25
Class Name Description Default Values
.z-south Border and
background
border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-south-header Background of
header
color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px
4px 5px; border-bottom: 1px solid #9ecad8;
background:transparent repeat-x 0 0; background-image:
url(${c:encodeURL('~./zul/img/layout/borderlayout-hm.png')});
white-space: nowrap; overflow: hidden; line-height: 15px; zoom: 1;
.z-south-noborder No border border:0;
.z-south-splt Background of
splitter
position: absolute; height: 6px; width: 6px; z-index: 12;
background: #C4DCFB top; background-image:url("${c:encodeURL('~./zul/img/splt/splt-v.png')}");
cursor: s-resize; cursor: row-resize; line-height: 1px; font-size: 1px;
Default (West)This is the Default (West) mold for Borderlayout.
Source
West[1]
Structure
http://new.zkoss.org/index.php?title=File:West1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
33/213
Default (West) 26
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-west,
.z-west-splt
Supported: V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-west-colps,
.z-west-colpsd,
.z-west-exp,
-over
Supported: V V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:West2.jpg -
8/10/2019 ZK 6.5.4 Style Guide.pdf
34/213
Default (West) 27
Class Name Description Default Values
.z-west Border and
background
border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-west-header Background of
header
color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px 4px
5px; border-bottom: 1px solid #9ecad8;
background:transparent repeat-x 0 0; background-image:
url(${c:encodeURL('~./zul/img/layout/borderlayout-hm.png')});
white-space: nowrap; overflow: hidden; line-height: 15px; zoom: 1;
.z-west-noborder No border border:0;
.z-west-splt Background of
splitter
position: absolute; height: 6px; width: 6px; z-index: 11;
background: #C4DCFB top; background-image:url("${c:encodeURL('~./zul/img/splt/splt-v.png')}");
cursor: s-resize; cursor: row-resize; line-height: 1px; font-size: 1px;
Default (East)This is the Default (East) mold for Borderlayout.
Source
East[1]
Structure
http://new.zkoss.org/index.php?title=File:East1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
35/213
Default (East) 28
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-east, .z-east-splt
Supported: V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-east-colps,
.z-east-colpsd,
.z-east-exp,
-over
Supported: V V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:East2.jpg -
8/10/2019 ZK 6.5.4 Style Guide.pdf
36/213
Default (East) 29
Class Name Description Default Values
.z-east Border and
background
border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-east-header Background of
header
color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px 4px
5px; border-bottom: 1px solid #9ecad8;
background:transparent repeat-x 0 0; background-image:
url(${c:encodeURL('~./zul/img/layout/borderlayout-hm.png')});
white-space: nowrap; overflow: hidden; line-height: 15px; zoom: 1;
.z-east-noborder No border border:0;
.z-east-splt Background of
splitter
position: absolute; height: 6px; width: 6px; z-index: 9;
background: #C4DCFB left; background-image:url("${c:encodeURL('~./zul/img/splt/splt-h.png')}");
cursor: e-resize; cursor: col-resize; line-height: 1px; font-size: 1px;
Default (Center)This is the Default (Center) mold for Borderlayout.
Source
Center[1]
Structure
http://new.zkoss.org/index.php?title=File:Center1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
37/213
Default (Center) 30
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-center
Supported: V
CSS Specification
Class Name Description Default Values
.z-center Border and
background
border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-center-header Background ofheader
color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px4px 5px; border-bottom: 1px solid #9ecad8;
background:transparent repeat-x 0 0; background-image:
url(${c:encodeURL('~./zul/img/layout/borderlayout-hm.png')});
white-space: nowrap; overflow: hidden; line-height: 15px; zoom: 1;
.z-center-noborder No border border:0;
http://new.zkoss.org/index.php?title=File:Center2.jpg -
8/10/2019 ZK 6.5.4 Style Guide.pdf
38/213
Box 31
Box
Component Reference:Box
Box is composed of HTML Table which can also be called as Vbox. It is used to separate each child to show them in
a vertical layout..
Version History
Version Date Content
Default (Vbox)
This is the Default (Vbox) mold for Box.
Source
Vbox[1]
Structure
http://new.zkoss.org/index.php?title=File:Box2.pnghttp://new.zkoss.org/index.php?title=File:Box1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Box -
8/10/2019 ZK 6.5.4 Style Guide.pdf
39/213
Default (Vbox) 32
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-vbox
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
tr.z-vbox-sep Height of separator height: 0.3em; padding: 0; margin: 0;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box. css.dsp?view=markup
Button
Component Reference:Button
Button is made by 3*3 grid style, the background and text can be customized by users.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/Buttonhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
40/213
Default (os) 33
Default (os)
This is the os mold for Button.
SourceButton
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-button-os
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-button-os Font size and color font-family: ${fontFamilyC} ; font-size: ${fontSizeM}; font-weight: normal;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markup
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=File:Button-os.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
41/213
trendy 34
trendy
This is the Default mold for Button.
SourceButton
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-button -over -clk -focus -disd
Supported: V V V V V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:Button1.pnghttp://new.zkoss.org/index.php?title=File:Button2.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
42/213
trendy 35
Class Name Description Default Values
.z-button Font size and color font-family: ${fontFamilyT} ;
font-size: ${fontSizeM};
color: black;
.z-button .z-button-tl,
.z-button .z-button-tr,
.z-button .z-button-bl,
.z-button .z-button-br
Corner graph background-image:url(${c:encodeURL('~./zul/img/button/z-btncorner.gif')});
.z-button .z-button-tm, .z-button .z-button-bm Top and bottom edge background-image:url(${c:encodeURL('~./zul/img/button/z-btn-x.gif')});
.z-button .z-button-cl,
.z-button .z-button-cr
Right and left edge background-image:url(${c:encodeURL('~./zul/img/button/z-btn-y.gif')});
.z-button .z-button-cm Center image background-image:url(${c:encodeURL('~./zul/img/button/z-btn-ctr.gif')});
Example
.z-button.z-button-tl,.z-button.z-button-tr,
.z-button.z-button-bl,.z-button.z-button-br,
.z-button.z-button-tm,.z-button.z-button-bm,
.z-button.z-button-cl,.z-button.z-button-cr{
background-image:none; background-color:#008bb6;
}
.z-button.z-button-cm{
background-image:none; background-color:#c1c2c3;
}
.z-button.z-button-tl,.z-button.z-button-tr,
.z-button.z-button-bl,.z-button.z-button-br,
.z-button.z-button-tm,.z-button.z-button-bm,
.z-button.z-button-cl,.z-button.z-button-cr,.z-button.z-button-cm
{
background-image:none;
}
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
43/213
Calendar 36
Calendar
Component Reference:Calendar
The calendar is stuck by Javascript.
Version History
Version Date Content
Default
This is the Default mold for Calendar.
Source
Calendar[1]
Structure
http://new.zkoss.org/index.php?title=File:Calendar3.PNGhttp://new.zkoss.org/index.php?title=File:Calendar2.PNGhttp://new.zkoss.org/index.php?title=File:Calendar1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/db/css/calendar.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Calendar -
8/10/2019 ZK 6.5.4 Style Guide.pdf
44/213
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
45/213
Caption 38
Caption
Component Reference:Caption
The caption is used for as a title appended to a Groupbox or Window.
Version History
Version Date Content
Default
This is the Default mold for Caption.
Source
Caption[1]
Structure
Events
http://new.zkoss.org/index.php?title=File:Caption3.pnghttp://new.zkoss.org/index.php?title=File:Caption2.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/caption.css?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Caption -
8/10/2019 ZK 6.5.4 Style Guide.pdf
46/213
Default 39
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-caption
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-caption input, .z- caption td Font size font-size: ${fontSizeS};
.z-caption .z-caption-l Font size of the
left
font-size: ${fontSizeM};
.z-caption .z-caption-r Font size of the
right
font-size: ${fontSizeM};
.z-caption button, .z-caption .z-button
.z-button-btn
Font size of button font-size: ${fontSizeXS}; font-weight: normal; padding-top: 0;
padding-bottom: 0; margin-top: 0; margin-bottom: 0;
.z-caption a, .z-caption a:visited Font size of A tag font-size: ${fontSizeS}; font-weight: normal; color: black; background: none;
text-decoration: none;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/caption.css?view=markup
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/caption.css?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
47/213
Default (legend) 40
Default (legend)
This is the Default (legend) mold for Caption.
SourceCaption
[1]
Structure
Events
None.
CSS Specification
Class Name Description Default Values
.z-fieldset legend Font size font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox. css.dsp?view=markup
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=File:Captionone.pnghttp://new.zkoss.org/index.php?title=File:Groupboxone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
48/213
Cell 41
Cell
Component Reference:Cell
Cell is composed of HTML td tag to be enclosed by Box(Hbox, Vbox) or Row.
Version History
Version Date Content
Default (Row)
This is the Default mold for Cell.
Source
Cell[1]
Structure
http://new.zkoss.org/index.php?title=File:Cell1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Rowhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Boxhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Supplementary/Cell -
8/10/2019 ZK 6.5.4 Style Guide.pdf
49/213
Default (Row) 42
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-cell
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-cell Padding padding: 2px; overflow: hidden;
tr.z-row .z-cell Background color and
border
background: white; border-top: none; border-left: 1px solid white; border-right: 1px solid #CCC;
border-bottom: 1px solid #DDD;
tr.z-grid-odd
.z-cell
Background color of the
odd row
background: #F0FAFF;
http://new.zkoss.org/index.php?title=File:Cell2.PNG -
8/10/2019 ZK 6.5.4 Style Guide.pdf
50/213
Checkbox 43
Checkbox
Component Reference:Checkbox
Checkbox is composed of HTML Input element.
Version History
Version Date Content
Default
This is the Default mold for Checkbox.
Source
Checkbox[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-checkbox
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
http://new.zkoss.org/index.php?title=File:Checkbox2.pnghttp://new.zkoss.org/index.php?title=File:Checkbox1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/zul/css/norm.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Checkbox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
51/213
Default 44
CSS Specification
Class Name Description Default Values
.z-checkbox-cnt Font size font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/zul/css/norm.css.dsp?view=markup
Colorbox
Component Reference:Colorbox
Colorbox is composed of two parts: an icon and a popup colorpicker.
Version History
Version Date Content
Default
This is the Default mold for Colorbox.
Structure
http://new.zkoss.org/index.php?title=File:Colorbox1.PNGhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Colorboxhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/zul/css/norm.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
52/213
Default 45
http://new.zkoss.org/index.php?title=File:Colorbox3.PNGhttp://new.zkoss.org/index.php?title=File:Colorbox2.PNG -
8/10/2019 ZK 6.5.4 Style Guide.pdf
53/213
Default 46
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-colorbox
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-colorbox Background -moz-border-radius: 3px; -webkit-border-radius: 3px; margin:0 2px; overflow: hidden; display: inline-block;
vertical-align: middle; border: 1px solid #86A4BE; padding: 3px; background-color:#FFFFFF; position: relative;
.z-colorpalette-btn Background left: 200px; width: 20px; height: 20px; cursor: pointer; background:
url(${c:encodeURL('~./zkex/img/colorbox/colorpicker-btn.gif')});
http://new.zkoss.org/index.php?title=File:Colorbox4.PNG -
8/10/2019 ZK 6.5.4 Style Guide.pdf
54/213
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
55/213
Default 48
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-columns
Supported: V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-column -over
Supported: V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
tr.z-columns Background image background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color:
#C7E5F1;background-repeat: repeat-x;
div.z-grid-header th.z-column Border and font size overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE
#DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight:
normal;
div.z-grid-header .z-column-sort
div.z-column-cnt
Background of the
content of the sort
cursor: pointer; padding-right: 9px; background:transparent
url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center;
background-repeat: no-repeat;
div.z-grid-header
.z-column-sort-asc
div.z-column-cnt
Background of the
content of the
ascendant sort
cursor: pointer; padding-right: 9px; background:transparent
url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center;
background-repeat: no-repeat;
div.z-grid-header
.z-column-sort-dsc
div.z-column-cnt
Background of the
content of the
descendant sort
cursor: pointer; padding-right: 9px; background:transparent
url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center;
background-repeat: no-repeat;
div.z-grid-header
.z-column-sort-asc,
div.z-grid-header
.z-column-sort-dsc
Background of the
sort
background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/column-over.gif')})
repeat-x 0 0;
div.z-column-cnt Font size of the
content
font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyC};
div.z-column-cnt Overflow overflow: hidden
.z-column-btn Background of
button
background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/hd-btn.gif')}) no-repeat left
center; display: none; position: absolute; width: 14px; right: 0; top: 0; z-index: 2; cursor:
pointer;
.z-column-over Hovered event background: #B9EBFF url(${c:encodeURL('~. /zul/img/grid/column-over.gif')}) repeat-x
0 0;
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
56/213
Columnlayout 49
Columnlayout
Component Reference:Columnlayout
Columnlayout and Columnchildren.
Version History
Version Date Content
Default
This is the Default mold for Columnlayout.
Structure
Events
http://new.zkoss.org/index.php?title=File:Columnlayout2.jpghttp://new.zkoss.org/index.php?title=File:Columnlayout1.jpghttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Columnlayout -
8/10/2019 ZK 6.5.4 Style Guide.pdf
57/213
Default 50
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-columnlayout,
z-columnchildren
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-columnlayout Overflow visibility: hidden; overflow: hidden; zoom: 1;
.z-columnlayout-inner Overflow overflow: hidden;
.z-columnchildren Padding and margin float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1;
.z-columnchildren-body Overflow overflow: hidden; zoom: 1;
.z-columnchildren-cnt Overflow overflow: hidden;
Combobox
Component Reference:Combobox
Combobox is composed of two parts: an input box and a button.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Combobox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
58/213
Default 51
Default
This is the Default mold for Combobox.
SourceCombobox
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-combobox -over -btn-clk -focus -btn-over -disd
Supported: V V V V V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:Combobox2.pnghttp://new.zkoss.org/index.php?title=File:Combobox1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
59/213
Default 52
Class Name Description Default Values
.z-combobox Font size border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};
font-size: ${fontSizeM}; font-weight: normal;
.z-combobox-inp Background of input
element
font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background:
#FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px solid
#86A4BE;
.z-combobox-text-invalid Background of
invalidated
background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0;
border: 1px solid #DD7870;
.z-combobox-readonly,
.z-combobox-text-disd
Background of
disabled and read
only
background: #ECEAE4;
.z-combobox
.z-combobox-img
Background of the
button image
background: transparent url(${c:encodeURL('~./zul/img/button/combobtn.gif')}) no-repeat
0 0;
vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px
solid #7F9DB9;
.z-combobox-pp Font size andbackground of
combobox's popup
display: block; position: absolute; z-index: 88000;
background: white; border: 1px solid #7F9DB9; padding: 2px;
font-size: ${fontSizeS}; overflow: auto;
font-family: ${fontFamilyC};
font-weight: normal;
Combobutton
Component Reference:Combobutton
Combobutton is made by 3*3 grid style, the background and text can be customized by users.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/Combobutton -
8/10/2019 ZK 6.5.4 Style Guide.pdf
60/213
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
61/213
Comboitem 54
Comboitem
Component Reference:Comboitem
Comboitem belongs to Combobox as a row item, which distributes into four parts: image, label, content, and
description.
Version History
Version Date Content
Default
This is the Default mold for Comboitem.
Source
Combobox[1]
Structure
http://new.zkoss.org/index.php?title=File:Comboitemtwo.pnghttp://new.zkoss.org/index.php?title=File:Comboitemone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Comboitem -
8/10/2019 ZK 6.5.4 Style Guide.pdf
62/213
Default 55
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-comboitem -over -seld -over-seld -disd
Supported: V ! ! ! !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-comboitem.z-combobox-pp .z-comboitem,
.z-combobox-pp .z-comboitem a,
.z-combobox-pp .z-comboitem a:visited
Font size font-size: ${fontSizeM}; font-weight:
normal; color: black;
text-decoration: none;
.z-combobox-pp .z-comboitem-text,
.z-combobox-pp .z-comboitem-img
Font size white-space: nowrap; font-size:
${fontSizeS}; cursor: pointer;
.z-combobox-pp .z-comboitem-inner,
.z-combobox-pp .z-comboitem-cnt
Color and font size of Comboitem's description and
content
color: #888; font-size: ${fontSizeXS};
padding-left: 6px;
[since 6.0.1]
.z-comboitem .z-combobox--spacer
Blank space between the Image and Label text for
customize easier. Customize example:
.z-comboitem-spacer {
margin-right: 30px;
}
no default settings
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
63/213
Datebox 56
Datebox
Component Reference:Datebox
Datebox is composed of two parts: an input box and a button.
Version History
Version Date Content
Default
This is the Default mold for Datebox.
Source
Datebox[1]
Structure
http://new.zkoss.org/index.php?title=File:Datebox2.jpghttp://new.zkoss.org/index.php?title=File:Datebox1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Datebox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
64/213
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
65/213
Decimalbox 58
Decimalbox
Component Reference:Decimalbox
Decimalbox is composed of a HTML Input element.
Version History
Version Date Content
Default
This is the Default mold for Decimalbox.
Source
Decimalbox[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-decimalbox -focus -disd
Supported: V ! !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:Decimalbox1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Decimalbox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
66/213
Default 59
Class Name Description Default Values
.z- decimalbox Font size and
background
background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px
solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-decimalbox-text-invalid Invalid event background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0;
border: 1px solid #DD7870;
.z-decimalbox-readonly,
.z-decimalbox-text-disd
Disabled and
read-only
background: #ECEAE4;
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markup
Detail
Component Reference:Detail
Detail is used for Grid.
Version History
Version Date Content
Default
This is the Default mold for Detail.
Structure
http://new.zkoss.org/index.php?title=File:Detail1.jpghttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Detailhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
67/213
Default 60
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-detail
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
tr.z-row
.z-detail-outer
Background background: #C6E8FC repeat-y left; border-top: none; border-left: 1px solid white; border-right: 1px solid
#C0C0C0; border-bottom: 1px solid #D0D0D0; vertical-align: top; background-image:url(${c:encodeURL('~./zul/img/grid/detail-bg.png')});
.z-detail-img Background of
image icon
cursor:pointer; width: 100%; height: 18px; background: transparent no-repeat 4px 3px; background-image:
url(${c:encodeURL('~./zul/img/grid/row-expand.png')});
http://new.zkoss.org/index.php?title=File:Detail2.jpg -
8/10/2019 ZK 6.5.4 Style Guide.pdf
68/213
Doublebox 61
Doublebox
Component Reference:Doublebox
Doublebox is composed of a HTML Input element.
Version History
Version Date Content
Default
This is the Default] mold for Doublebox.
Source
Doublebox[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-doublebox -focus -disd
Supported: V ! !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:Doublebox1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Doublebox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
69/213
Default 62
Class Name Description Default Values
.z-doublebox Font size and
background
background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px
solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-doublebox-text-invalid Invalid event background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0;
border: 1px solid #DD7870;
.z-doublebox-readonly,
.z-doublebox-text-disd
Disabled and
read-only
background: #ECEAE4;
Doublespinner
Component Reference:Doublespinner
Doublespinner is composed of two parts, an input box and a button.
Version History
Version Date Content
Default
This is the Default mold for Doublespinner.
Source
Spinner[1]
Structure
http://new.zkoss.org/index.php?title=File:Doublespinner2.pnghttp://new.zkoss.org/index.php?title=File:Doublespinner1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Doublespinner -
8/10/2019 ZK 6.5.4 Style Guide.pdf
70/213
Default 63
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-doublespinner -over -btn-clk -focus -btn-over -disd
Supported: V V V V V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-doublespinner-inp Background of
input element
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0;
border: 1px solid #7F9DB9; font-family: ${fontFamilyC}; font-size: ${fontSizeM};
font-weight: normal;
.z-doublespinner-text-invalid Background of
invalidated
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')})
repeat-x 0 0; border: 1px solid #DD7870;
.z-doublespinner-readonly,
.z-doublespinner-text-disd
Background of
disabled and read
only
background: #ECEAE4;
.z-doublespinner.z-doublespinner-btn Background of
the button image
background: transparent url(${c:encodeURL('~./zul/img/button/timebtn.gif')})
no-repeat 0 0;
vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0;
border-bottom: 1px solid #86A4BE;
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
71/213
Fisheyebar 64
Fisheyebar
Component Reference:Fisheyebar
Fisheyebar and Fisheye.
Version History
Version Date Content
Default
This is the Default mold for Fisheyebar.
Structure
http://new.zkoss.org/index.php?title=File:Fisheyebar2.jpghttp://new.zkoss.org/index.php?title=File:Fisheyebar1.jpghttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/Fisheye/Fisheyebar -
8/10/2019 ZK 6.5.4 Style Guide.pdf
72/213
Default 65
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-fisheyebar,
.z-fisheye
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-fisheyebar Visibility visibility: hidden;
.z-fisheyebar-inner Position offisheyebar
position: relative;
.z-fisheye Position of
fisheye
position: absolute; z-index: 2;
.z-fisheye-img Image size border: 0px; position: absolute; width: 100%; height: 100%;
.z-fisheye-text Font size font-size: ${fontSizeM}; font-weight: normal; font-family: Arial, Helvetica, sans-serif; background-color:
#eee; border: 2px solid #666; padding: 2px; text-align: center; position: absolute; display: none;
FooterComponent Reference:Footer
Foot and Footer are used for Grid.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Footer -
8/10/2019 ZK 6.5.4 Style Guide.pdf
73/213
Default 66
Default
This is the Default mold for Footer.
SourceFooter
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-foot,
.z-footer
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
http://new.zkoss.org/index.php?title=File:Footer1.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
74/213
Default 67
CSS Specification
Class Name Description Default Values
div.z-footer-cnt Font size border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
div.z-footer-cnt Overflow overflow: hidden;
Frozen
Component Reference:Frozen
Frozen is a fake scrollbar to scroll Grid and Listbox.
Version History
Version Date Content
Default
This is the Default mold for Frozen.
Source
Frozen [1]
Structure
http://new.zkoss.org/index.php?title=File:FrozenGrid2.PNGhttp://new.zkoss.org/index.php?title=File:FrozenGrid1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/mesh/css/frozen.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Listboxhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Gridhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Supplementary/Frozen -
8/10/2019 ZK 6.5.4 Style Guide.pdf
75/213
Default 68
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-frozen
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-frozen Background Image background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')});
References
[1] http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/mesh/css/frozen.css.dsp?view=markup
Grid
Component Reference:Grid
Grid combines with a set of its children, including Rows , Row , Columns , Column , Foot , Footer , Group ,
Groupfoot , Detail , and Paging.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Gridhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/mesh/css/frozen.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
76/213
Default 69
Default
This is the Default mold for Grid.
SourceGrid
[1]
Structure
Events
http://new.zkoss.org/index.php?title=File:Grid2.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
77/213
Default 70
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-grid
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
div.z-grid Background color background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1;
div.z-grid-header,
div.z-grid-header tr,
div.z-grid-footer
Border border: 0; overflow: hidden; width: 100%;
div.z-grid-header tr.z-columns,
div.z-grid-header tr.z-auxhead
Background image
of the header
background-color: #C3E7FB; background-repeat: repeat-x; background-image:
url(${c:encodeURL('~./zul/img/grid/column-bg.png')});
div.z-grid-body Background color of
the body
background: white; border: 0; overflow: auto; width: 100%;
div.z-grid-footer Background color of
the footer
background: #DAE7F6; border-top: 1px solid #9EB6CE;
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
78/213
paging 71
paging
This is the paging mold for Grid.
SourceGrid
[1]
Structure
http://new.zkoss.org/index.php?title=File:Grid-pg2.jpghttp://new.zkoss.org/index.php?title=File:Grid-pg1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
79/213
paging 72
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-grid
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
div.z-grid-pgi-b Border of bottom paging border-top: 1px solid #AAB; overflow: hidden;
div.z-grid-pgi-t Border of top paging border-bottom: 1px solid #AAB; overflow: hidden;
Group
Component Reference:Group
Group is used for Grid.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Group -
8/10/2019 ZK 6.5.4 Style Guide.pdf
80/213
Default 73
Default
This is the Default mold for Group.
SourceGroup
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-group
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
http://new.zkoss.org/index.php?title=File:Group1.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
81/213
Default 74
Class Name Description Default Values
tr.z-group Background
image
background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;
div.z-group-cnt Font size border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight:
normal;
.z-group-inner
.z-group-cnt span,
.z-group-inner
.z-group-cnt
Color and font
size
color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width:
auto;font-weight:bold;
td.z-group-inner Padding and
border
padding: 2px; overflow: hidden; border-top: 2px solid #81BAF5; border-bottom: 1px solid #bcd2ef; color:
#3764a0; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;
.z-group-img Image icon width: 18px; min-height: 18px; height: 100%; background-image:
url(${c:encodeURL('~./zul/img/toggle.gif')}); background-repeat: no-repeat; vertical-align: top; cursor:
pointer; border: 0;
Groupbox
Component Reference:Groupbox
Groupbox has two mold: Default and 3d. Groupbox combines Caption as its title.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Groupbox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
82/213
Default 75
Default
This is the Default mold for Groupbox.
SourceGroupbox
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-fieldset
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-fieldset-cnt Overflow of content overflow: hidden;
[since 6.0.0]
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-groupbox
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
http://new.zkoss.org/index.php?title=File:Groupbox-final.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
83/213
Default 76
CSS Specification
Class Name Description Default Values
.z-groupbox-cnt Overflow of content overflow: hidden;
3d
This is the 3d mold for Decimalbox.
Source
Groupbox[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-groupbox
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
http://new.zkoss.org/index.php?title=File:Groupbox-3d2.jpghttp://new.zkoss.org/index.php?title=File:Groupbox-3d1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
84/213
3d 77
CSS Specification
Class Name Description Default Values
.z-groupbox-header Overflow of
header
overflow: hidden;zoom: 1;
.z-groupbox-hl
.z-groupbox-header
Font size color: #373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal; padding: 0
0 4px 0; border: 0 none; background: transparent;
.z-groupbox-tl Background of
top left
background:transparent no-repeat scroll 0 top;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')});
font-size:0;height:5px; line-height:0; margin-right:5px; zoom:1;
.z-groupbox-tr Background of
top right
background:transparent no-repeat scroll right -5px;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')});
font-size:0; height:5px; line-height:0; margin-right:-5px; position:relative; zoom:1;
.z-groupbox-hl Background of
header left
background:transparent repeat-y scroll 0 0;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hl.png')});
border-bottom:1px solid #B2CCD9; padding-left:6px; zoom: 1;
.z-groupbox-hr Background of
header right
background:transparent repeat-y scroll right 0;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hr.png')});
padding-right:6px; zoom: 1;
.z-groupbox-hm Background of
header middle
background:transparent repeat-x scroll 0 0;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hm.png')});
overflow:hidden; zoom: 1;
.z-groupbox-cnt Border of
content
border: 1px solid #B2CCD9; padding: 5px;
.z-groupbox-bm Background of
bottom middle
background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px; font-size:
0; line-height: 0; zoom: 1;
.z-groupbox-bl Background of
bottom left
background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left: 6px;
zoom: 1;
.z-groupbox-br Background of
bottom right
background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat right bottom; padding-right:
6px; zoom: 1;
[since 6.0.0]
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-groupbox-3d
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
85/213
3d 78
CSS Specification
Class Name Description Default Values
.z-groupbox-3d-header Overflow of
header
overflow: hidden;zoom: 1;
.z-groupbox-3d-hl
.z-groupbox-3d-header
Font size color: #373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal;
padding: 0 0 4px 0; border: 0 none; background: transparent;
.z-groupbox-3d-tl Background of
top left
background:transparent no-repeat scroll 0 top;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')});
font-size:0;height:5px; line-height:0; margin-right:5px; zoom:1;
.z-groupbox-3d-tr Background of
top right
background:transparent no-repeat scroll right -5px;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')});
font-size:0; height:5px; line-height:0; margin-right:-5px; position:relative; zoom:1;
.z-groupbox-3d-hl Background of
header left
background:transparent repeat-y scroll 0 0;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hl.png')});
border-bottom:1px solid #B2CCD9; padding-left:6px; zoom: 1;
.z-groupbox-3d-hr Background of
header right
background:transparent repeat-y scroll right 0;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hr.png')});
padding-right:6px; zoom: 1;
.z-groupbox-3d-hm Background of
header middle
background:transparent repeat-x scroll 0 0;
background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hm.png')});
overflow:hidden; zoom: 1;
.z-groupbox-3d-cnt Border of
content
border: 1px solid #B2CCD9; padding: 5px;
.z-groupbox-3d-bm Background of
bottom middle
background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px;
font-size: 0; line-height: 0; zoom: 1;
.z-groupbox-3d-bl Background of
bottom left
background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left:
6px; zoom: 1;
.z-groupbox-3d-br Background of
bottom right
background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat r ight bottom;
padding-right: 6px; zoom: 1;
-
8/10/2019 ZK 6.5.4 Style Guide.pdf
86/213
Groupfoot 79
Groupfoot
Component Reference:Groupfoot
Groupfoot is used for Grid.
Version History
Version Date Content
Default
This is the Default mold for Groupfoot.
Source
Groupfoot[1]
Structure
http://new.zkoss.org/index.php?title=File:Groupfoot1.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Groupfoot -
8/10/2019 ZK 6.5.4 Style Guide.pdf
87/213
Default 80
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-groupfoot
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
.z-groupfoot Background
image
background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')})
repeat-x 0 0;
div.z-groupfoot-cnt Border border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size:${fontSizeM}; font-weight: normal;
td.z-groupfoot-inner Padding padding: 2px; overflow: hidden;
.z-groupfoot-inner .z-groupfoot-cnt span,
.z-groupfoot-inner .z-groupfoot-cnt
Font size and
color
color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;
Hbox
Component Reference:Hbox
Hbox is composed of a HTML Table. It is a kind of box which shows each child in a horizontal layout.
Version History
Version Date Content
http://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Hbox -
8/10/2019 ZK 6.5.4 Style Guide.pdf
88/213
Default 81
Default
This is the Default mold for Hbox.
SourceHbox
[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-hbox
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
CSS Specification
Class Name Description Default Values
td.z-hbox-sep Width of separator width: 0.3em; padding: 0; margin: 0;
http://new.zkoss.org/index.php?title=File:Hboxtwo.pnghttp://new.zkoss.org/index.php?title=File:Hboxone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box.css.dsp?view=markup -
8/10/2019 ZK 6.5.4 Style Guide.pdf
89/213
Hlayout 82
Hlayout
Component Reference:Hlayout
Hlayout is composed of HTML Div tag.
Version History
Version Date Content
Default
This is the Default mold for Hlayout.
Source
Hlayout[1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: z-hlayout
Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
http://new.zkoss.org/index.php?title=File:Hlayout2.PNGhttp://new.zkoss.org/index.php?title=File:Hlayout1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/layout.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Hlayout -
8/10/2019 ZK 6.5.4 Style Guide.pdf
90/213
Default 83
CSS Specification
Class Name Description Default Values
.z-hlayout Overflow hidden
.z-hlayo