Show last authors
1 XWiki has some special classes that are used in certain conditions to assure consistency and enhance functionality. The following classes are defined at least starting with [[the Colibri Skin>>extensions:Extension.Colibri Skin]]:
2
3 {{toc/}}
4
5 = A. General classes =
6
7 * **##.hidden##**
8 use to 'display: none' elements
9
10 * **##.invisible##**
11 use to 'visibility: hidden' elements
12
13 * **##.clearfloats##**
14 use to clear floats when using floated containers, in order to keep the parent's layout correct
15
16 * **##.separator##**
17 use to contain separators ( {{html}}·{{/html}} , | )
18 used in #document-info and blog .entry-footer
19
20 * **##.itemCount##**
21 use to contain numeric values that describe quantitative information about an item
22 used in #docExtraTabs, #document-info, .blog-category-level
23 example: Comments (1)
24
25 * **##.noitems##**
26 use to contain empty state messages
27 used in #docextrapanes
28 example: 'No comments for this document', 'No attachments for this document'
29
30 * **##.icon##**
31 use for icon buttons ([[example>>platform:DevGuide.StandardIconClasses||anchor="iconClass"]])
32 used in .icon.rss in 'Quick Links' panel
33
34 * **##.hasIcon##**
35 use for elements that also have a background-icon attached ([[example>>platform:DevGuide.StandardIconClasses||anchor="hasIconClass"]])
36 works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc)
37 used in menus
38
39 * **##.loading##**
40 sets an animated GIF as being the background image (center aligned) of the element
41 generally used on Ajax requests in order to express the loading status
42 example of usage: on loading each of the Annotations, Comments, Attachments, History and Informations tabs
43
44 * **##.column##** + (**##.full##** | **##.half##** | **##.third##**)
45 classes for generic (1|2|3) column layout
46
47 = B. Classes used for Form elements =
48
49 == B1. Buttons containers ==
50
51 * **##.buttonwrapper##**
52 use as an external container for buttons (required for Toucan skin)
53
54 * **##.buttonwrapper .button##**
55 use ##.button## on ##input## or ##a## elements to display as buttons
56
57 * **##.secondary.button##**
58 use for secondary actions, like ##cancel##
59
60 * **##.icon-button##**
61 ** **##.icon-button.add-button##**
62 ** **##.icon-button.remove-button##**
63 use for small icon actions, like ##add## and ##remove## ([[example>>platform:DevGuide.StandardIconClasses||anchor="iconButtonClass"]])
64
65 * **##.button.disabled##**
66 use to display a button in it's disabled state
67
68 == B2. Behavior classnames ==
69
70 * **##.withTip##**
71 introduced in [[XWIKI-4163>>https://jira.xwiki.org/browse/XWIKI-4163]]
72 description: automatically hides and reinserts the default text for input fields, acting as a tip.
73 warning: will be replaced by the ##placeholder## attribute introduced in HTML5
74
75 * **##.useTitleAsTip##**
76 introduced in 5.1 Milestone 1
77 description: when ##.withTip## is applied, use the value of the title attribute as the tip (i.e. the text displayed in the text input when it's empty); this is useful when the initial value of the text input is different than the tip (place-holder), e.g. a search input might have as initial value the submitted search query, but you still want to display a tip when the user clears the query.
78 warning: will be replaced by the ##placeholder## attribute introduced in HTML5
79
80 * **##.suggestDocuments##**
81 introduced in [[XWIKI-5301>>https://jira.xwiki.org/browse/XWIKI-5301]]
82 description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names.
83
84 * **##.suggestSpaces##**
85 introduced in [[XWIKI-5657>>https://jira.xwiki.org/browse/XWIKI-5657]] (XWiki 2.6 RC2)
86 description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names.
87
88 * --**##.suggestUsers##**--
89 introduced in [[XWIKI-5649>>https://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2)
90 {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-users## instead{{/warning}}
91 description: all input fields with classname suggestUsers will receive an autocomplete control suggesting document names of documents that contains user objects
92
93 * --**##.suggestGroups##**--
94 introduced in [[XWIKI-5649>>ttp://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2)
95 {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-groups## instead{{/warning}}
96 description: all input fields with classname suggestGroups will receive an autocomplete control suggesting document names of documents that contains group objects
97
98 * **##.suggested##**
99 description: blocks normal browser autocomplete and initializes the suggest object early instead of waiting for the field to be focused (if the suggests is declared on focus).
100
101 * **##.maximizable##**
102 introduced in [[XWIKI-5660>>https://jira.xwiki.org/browse/XWIKI-5660]] (XWiki 2.6 RC2) description: offers a link for users to maximize the element on which this classname is applied,
103 making it possible to view that element in fullscreen mode.
104 {{warning}}Needs to be used together with a skinx call to the ##uicomponents/widgets/fullScreen.js## script{{/warning}}
105
106 = Classes for the responsiveness =
107
108 With [[Flamingo>>extensions:Extension.Flamingo Skin]], you can use [[Bootstrap classes>>http://getbootstrap.com/]] plus some XWiki specific classes:
109
110 * **##.responsive-table##**
111 introduced in [[XWIKI-11576>>https://jira.xwiki.org/browse/XWIKI-11576]] (XWiki 6.4M2 & 6.2.5) description: make a table responsible to the screen-size. To use it, just add the ".responsive-table" class to you table, be sure you have proper <thead> and <tbody> tags in it, and put the title of the each column in the "data-title" attribute of every cell.
112 Example:(((
113 {{code language="html"}}
114 <table class="responsive-table">
115 <thead>
116 <tr>
117 <th>Name</th>
118 <th>Age</th>
119 </tr>
120 </thead>
121 <tbody>
122 <tr>
123 <td data-title="Name">John Smith</td>
124 <td data-title="Age">42</td>
125 </tr>
126 </tbody>
127 </table>
128 {{/code}}
129 )))
130
131 = Further References =
132
133 * XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc)
134 ** [[XWiki CSS Layout>>platform:AdminGuide.CSSLayout]] //(outdated)//
135 * XWiki provides by default a [[list of Skins>>platform:Features.Skins]], each with its own characteristics
136 ** [[XWiki Albatross CSS Files>>platform:AdminGuide.CSS files]] //(deprecated)//
137
138 = Special CSS Classes =
139
140 * When writing CSS code for XWiki there are some [[code style rules>>dev:Community.XhtmlCssCodeStyle]] that need to be followed in order to assure consistency and quality.

Get Connected