Hide last authors
Sergiu Dumitriu 4.3 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]]:
Ecaterina Moraru (Valica) 1.1 2
Ecaterina Moraru (Valica) 4.2 3 {{toc/}}
Ecaterina Moraru (Valica) 1.1 4
Manuel Smeria 7.2 5 = A. General classes =
Ecaterina Moraru (Valica) 1.1 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
Ecaterina Moraru (Valica) 4.2 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
Ecaterina Moraru (Valica) 1.1 30 * **##.icon##**
Vincent Massol 11.3 31 use for icon buttons ([[example>>platform:DevGuide.StandardIconClasses||anchor="iconClass"]])
Ecaterina Moraru (Valica) 1.1 32 used in .icon.rss in 'Quick Links' panel
33
Ecaterina Moraru (Valica) 3.1 34 * **##.hasIcon##**
Vincent Massol 11.3 35 use for elements that also have a background-icon attached ([[example>>platform:DevGuide.StandardIconClasses||anchor="hasIconClass"]])
Ecaterina Moraru (Valica) 3.1 36 works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc)
37 used in menus
38
Ecaterina Moraru (Valica) 1.1 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
Manuel Smeria 7.2 47 = B. Classes used for Form elements =
Ecaterina Moraru (Valica) 1.1 48
Manuel Smeria 7.2 49 == B1. Buttons containers ==
Ecaterina Moraru (Valica) 1.1 50
51 * **##.buttonwrapper##**
52 use as an external container for buttons (required for Toucan skin)
53
54 * **##.buttonwrapper .button##**
Sergiu Dumitriu 4.1 55 use ##.button## on ##input## or ##a## elements to display as buttons
Ecaterina Moraru (Valica) 1.1 56
Sergiu Dumitriu 2.1 57 * **##.secondary.button##**
58 use for secondary actions, like ##cancel##
59
Sergiu Dumitriu 4.1 60 * **##.icon-button##**
61 ** **##.icon-button.add-button##**
62 ** **##.icon-button.remove-button##**
Vincent Massol 11.3 63 use for small icon actions, like ##add## and ##remove## ([[example>>platform:DevGuide.StandardIconClasses||anchor="iconButtonClass"]])
Sergiu Dumitriu 4.1 64
Ecaterina Moraru (Valica) 3.1 65 * **##.button.disabled##**
66 use to display a button in it's disabled state
67
Manuel Smeria 7.2 68 == B2. Behavior classnames ==
Ecaterina Moraru (Valica) 1.1 69
70 * **##.withTip##**
Thomas Mortagne 11.1 71 introduced in [[XWIKI-4163>>https://jira.xwiki.org/browse/XWIKI-4163]]
Ecaterina Moraru (Valica) 1.1 72 description: automatically hides and reinserts the default text for input fields, acting as a tip.
Marius Dumitru Florea 8.1 73 warning: will be replaced by the ##placeholder## attribute introduced in HTML5
Ecaterina Moraru (Valica) 1.1 74
Marius Dumitru Florea 8.1 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
Ecaterina Moraru (Valica) 1.1 80 * **##.suggestDocuments##**
Thomas Mortagne 11.1 81 introduced in [[XWIKI-5301>>https://jira.xwiki.org/browse/XWIKI-5301]]
Ecaterina Moraru (Valica) 1.1 82 description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names.
83
84 * **##.suggestSpaces##**
Thomas Mortagne 11.1 85 introduced in [[XWIKI-5657>>https://jira.xwiki.org/browse/XWIKI-5657]] (XWiki 2.6 RC2)
Ecaterina Moraru (Valica) 1.1 86 description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names.
87
Marius Dumitru Florea 12.1 88 * --**##.suggestUsers##**--
Thomas Mortagne 11.1 89 introduced in [[XWIKI-5649>>https://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2)
Marius Dumitru Florea 12.1 90 {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-users## instead{{/warning}}
Manuel Smeria 7.2 91 description: all input fields with classname suggestUsers will receive an autocomplete control suggesting document names of documents that contains user objects
Ecaterina Moraru (Valica) 1.1 92
Marius Dumitru Florea 12.1 93 * --**##.suggestGroups##**--
Manuel Smeria 7.2 94 introduced in [[XWIKI-5649>>ttp://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2)
Marius Dumitru Florea 12.1 95 {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-groups## instead{{/warning}}
Manuel Smeria 7.2 96 description: all input fields with classname suggestGroups will receive an autocomplete control suggesting document names of documents that contains group objects
Ecaterina Moraru (Valica) 1.1 97
98 * **##.suggested##**
Manuel Smeria 7.2 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).
Ecaterina Moraru (Valica) 1.1 100
101 * **##.maximizable##**
Thomas Mortagne 11.1 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,
Manuel Smeria 7.2 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}}
Ecaterina Moraru (Valica) 1.1 105
Guillaume Delhumeau 9.1 106 = Classes for the responsiveness =
Guillaume Delhumeau 10.1 107
Guillaume Delhumeau 9.1 108 With [[Flamingo>>extensions:Extension.Flamingo Skin]], you can use [[Bootstrap classes>>http://getbootstrap.com/]] plus some XWiki specific classes:
109
110 * **##.responsive-table##**
Thomas Mortagne 11.1 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.
Guillaume Delhumeau 10.1 112 Example:(((
Guillaume Delhumeau 9.1 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
Manuel Smeria 7.2 131 = Further References =
Ecaterina Moraru (Valica) 1.1 132
133 * XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc)
Vincent Massol 11.3 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)//
Ecaterina Moraru (Valica) 1.1 137
Manuel Smeria 7.2 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