Wiki source code of Special CSS Classes

Last modified by Lucas Charpentier (Sereza7) on 2024/02/22

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
Lucas Charpentier (Sereza7) 13.1 10 * **##.sr-only##**
11 use to hide elements visually but keep them visible semantically {{footnote}}https://dev.xwiki.org/xwiki/bin/view/Community/CodeStyle/XhtmlCssCodeStyle/Properly%20hiding%20elements/{{/footnote}}
12
Ecaterina Moraru (Valica) 1.1 13 * **##.invisible##**
14 use to 'visibility: hidden' elements
15
16 * **##.clearfloats##**
17 use to clear floats when using floated containers, in order to keep the parent's layout correct
18
19 * **##.separator##**
Lucas Charpentier (Sereza7) 14.1 20 use to contain separators ( {{html}}·{{/html}} , | )
Ecaterina Moraru (Valica) 1.1 21 used in #document-info and blog .entry-footer
22
23 * **##.itemCount##**
Lucas Charpentier (Sereza7) 14.1 24 use to contain numeric values that describe quantitative information about an item
Ecaterina Moraru (Valica) 1.1 25 used in #docExtraTabs, #document-info, .blog-category-level
26 example: Comments (1)
27
Ecaterina Moraru (Valica) 4.2 28 * **##.noitems##**
Lucas Charpentier (Sereza7) 14.1 29 use to contain empty state messages
Ecaterina Moraru (Valica) 4.2 30 used in #docextrapanes
31 example: 'No comments for this document', 'No attachments for this document'
32
Ecaterina Moraru (Valica) 1.1 33 * **##.icon##**
Simon Urli 12.2 34 use for icon buttons ([[example>>xwiki:Documentation.DevGuide.FrontendResources.StandardIconClasses||anchor="iconClass"]])
Ecaterina Moraru (Valica) 1.1 35 used in .icon.rss in 'Quick Links' panel
36
Ecaterina Moraru (Valica) 3.1 37 * **##.hasIcon##**
Simon Urli 12.2 38 use for elements that also have a background-icon attached ([[example>>xwiki:Documentation.DevGuide.FrontendResources.StandardIconClasses||anchor="hasIconClass"]])
Ecaterina Moraru (Valica) 3.1 39 works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc)
40 used in menus
Lucas Charpentier (Sereza7) 14.1 41 * **##.hasIcon##**
42 use for avatar icons.
Ecaterina Moraru (Valica) 3.1 43
Ecaterina Moraru (Valica) 1.1 44 * **##.loading##**
45 sets an animated GIF as being the background image (center aligned) of the element
46 generally used on Ajax requests in order to express the loading status
47 example of usage: on loading each of the Annotations, Comments, Attachments, History and Informations tabs
48
49 * **##.column##** + (**##.full##** | **##.half##** | **##.third##**)
50 classes for generic (1|2|3) column layout
51
Lucas Charpentier (Sereza7) 15.1 52 * **##.drawer-opener##**
Lucas Charpentier (Sereza7) 16.1 53 {{version since="XWiki 15.10"}} Used with a proper value of `aria-controls`, allows to trigger the opening of a drawer element. [[Details on creating a drawer>>xwiki:Documentation.DevGuide.FrontendResources.Drawer]] {{/version}}
Lucas Charpentier (Sereza7) 15.1 54
Manuel Smeria 7.2 55 = B. Classes used for Form elements =
Ecaterina Moraru (Valica) 1.1 56
Manuel Smeria 7.2 57 == B1. Buttons containers ==
Ecaterina Moraru (Valica) 1.1 58
59 * **##.buttonwrapper##**
60 use as an external container for buttons (required for Toucan skin)
61
62 * **##.buttonwrapper .button##**
Sergiu Dumitriu 4.1 63 use ##.button## on ##input## or ##a## elements to display as buttons
Ecaterina Moraru (Valica) 1.1 64
Sergiu Dumitriu 2.1 65 * **##.secondary.button##**
66 use for secondary actions, like ##cancel##
67
Sergiu Dumitriu 4.1 68 * **##.icon-button##**
69 ** **##.icon-button.add-button##**
70 ** **##.icon-button.remove-button##**
Simon Urli 12.2 71 use for small icon actions, like ##add## and ##remove## ([[example>>xwiki:Documentation.DevGuide.FrontendResources.StandardIconClasses||anchor="iconButtonClass"]])
Sergiu Dumitriu 4.1 72
Ecaterina Moraru (Valica) 3.1 73 * **##.button.disabled##**
74 use to display a button in it's disabled state
75
Manuel Smeria 7.2 76 == B2. Behavior classnames ==
Lucas Charpentier (Sereza7) 14.1 77
Ecaterina Moraru (Valica) 1.1 78 * **##.withTip##**
Thomas Mortagne 11.1 79 introduced in [[XWIKI-4163>>https://jira.xwiki.org/browse/XWIKI-4163]]
Ecaterina Moraru (Valica) 1.1 80 description: automatically hides and reinserts the default text for input fields, acting as a tip.
Marius Dumitru Florea 8.1 81 warning: will be replaced by the ##placeholder## attribute introduced in HTML5
Ecaterina Moraru (Valica) 1.1 82
Marius Dumitru Florea 8.1 83 * **##.useTitleAsTip##**
84 introduced in 5.1 Milestone 1
85 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.
86 warning: will be replaced by the ##placeholder## attribute introduced in HTML5
87
Ecaterina Moraru (Valica) 1.1 88 * **##.suggestDocuments##**
Thomas Mortagne 11.1 89 introduced in [[XWIKI-5301>>https://jira.xwiki.org/browse/XWIKI-5301]]
Ecaterina Moraru (Valica) 1.1 90 description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names.
91
92 * **##.suggestSpaces##**
Thomas Mortagne 11.1 93 introduced in [[XWIKI-5657>>https://jira.xwiki.org/browse/XWIKI-5657]] (XWiki 2.6 RC2)
Ecaterina Moraru (Valica) 1.1 94 description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names.
95
Marius Dumitru Florea 12.1 96 * --**##.suggestUsers##**--
Thomas Mortagne 11.1 97 introduced in [[XWIKI-5649>>https://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2)
Lucas Charpentier (Sereza7) 16.1 98 {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-users## instead{{/warning}}
Manuel Smeria 7.2 99 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 100
Marius Dumitru Florea 12.1 101 * --**##.suggestGroups##**--
Manuel Smeria 7.2 102 introduced in [[XWIKI-5649>>ttp://jira.xwiki.org/browse/XWIKI-5649]] (XWiki 2.6 RC2)
Lucas Charpentier (Sereza7) 16.1 103 {{warning}}deprecated since XWiki 10.6RC1, use ##suggest-groups## instead{{/warning}}
Manuel Smeria 7.2 104 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 105
106 * **##.suggested##**
Manuel Smeria 7.2 107 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 108
109 * **##.maximizable##**
Lucas Charpentier (Sereza7) 14.1 110 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 111 making it possible to view that element in fullscreen mode.
Lucas Charpentier (Sereza7) 16.1 112 {{warning}}Needs to be used together with a skinx call to the ##uicomponents/widgets/fullScreen.js## script{{/warning}}
Ecaterina Moraru (Valica) 1.1 113
Lucas Charpentier (Sereza7) 16.2 114 = C. Body styling classes =
115
116 Those classes are added on the {{code language="css"}}body{{/code}} node in order to provide the UI with hotswappable toggles.
117
118 {{warning}}In most cases, it's not needed for a style to be hotswappable, and using such a class should be avoided in favor of using LESS variables. LESS compilation is expensive (and making sure the cache is refreshed properly can be challenging), so styles that need to be changed regularly (e.g. changed for every user) should be implemented using body classes.{{/warning}}
119
Lucas Charpentier (Sereza7) 16.6 120 * Hide panel columns (styles available in [[layout.less>>https://github.com/xwiki/xwiki-platform/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less#L14]])
Lucas Charpentier (Sereza7) 16.2 121 ** ##.hideright## hides the right column
122 ** ##.hideleft## hides the left column
123 ** ##.hidelefthideright## hides the left and right columns {{warning}} ##hiderighthideleft## is not supported{{/warning}}
Lucas Charpentier (Sereza7) 16.6 124 * Panel columns width (styles available in [[layout.less>>https://github.com/xwiki/xwiki-platform/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less#L14]])
Lucas Charpentier (Sereza7) 16.2 125 {{info}} This could probably be reimplemented using less variables because I don't see a special need for it to be hotswappable (except maybe when editing those column sizes for Admins).{{/info}}
126 ** ##.panel-left-width-Small##
127 ** ##.panel-left-width-Medium##
128 ** ##.panel-left-width-Large##
129 ** ##.panel-right-width-Small##
130 ** ##.panel-right-width-Medium##
131 ** ##.panel-right-width-Large##
Lucas Charpentier (Sereza7) 16.3 132 * Skin
133 ** ##.skin-flamingo## indicates that the skin used is flamingo. This class should only be used in the ##xwiki-platform-flamingo## module or modules with a dependency on this module.
134 ** ##.skin-colibri## indicates that the skin used is colibri. {{error}}This skin is now deprecated and not supported in XWiki anymore. Some styles are left using this class, but as a rule of thumb it's not needed to provide style anymore for this skin.{{/error}}
135 * ##.wiki-<id of the wiki>## provides information on the current wiki in a multi-tenant setup.
136 * ##.space-<reference of the space, with spaces replaced by _s >## provides information on the current space. This allows to defined space-specific styles at the wiki level.
Lucas Charpentier (Sereza7) 16.4 137 * Context action
Lucas Charpentier (Sereza7) 16.5 138 Context actions are reflected in the style with classes on the model of ##${bodyAction}body##. For example:
Lucas Charpentier (Sereza7) 16.4 139 ** ##.viewbody## indicates that the current page should use the view specific styles (this class is also used by ##admin##, ##import## and ##export## actions)
140 ** ##.editbody## indicates that the current page should use the edit specific styles
141 * Drawer
142 {{version since="15.10.0"}}With the fix of https://jira.xwiki.org/browse/XWIKI-18007 , both of those are barely used anymore and should be removed after checking that it doesn't break too much backwards compatibility.{{/version}}
143 ** ##.drawer##
Lucas Charpentier (Sereza7) 16.5 144 ** ##.drawer~-~-right##
Lucas Charpentier (Sereza7) 16.2 145
Guillaume Delhumeau 9.1 146 = Classes for the responsiveness =
Guillaume Delhumeau 10.1 147
Guillaume Delhumeau 9.1 148 With [[Flamingo>>extensions:Extension.Flamingo Skin]], you can use [[Bootstrap classes>>http://getbootstrap.com/]] plus some XWiki specific classes:
149
150 * **##.responsive-table##**
Thomas Mortagne 11.1 151 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 152 Example:(((
Guillaume Delhumeau 9.1 153 {{code language="html"}}
154 <table class="responsive-table">
155 <thead>
156 <tr>
157 <th>Name</th>
158 <th>Age</th>
159 </tr>
160 </thead>
161 <tbody>
162 <tr>
163 <td data-title="Name">John Smith</td>
164 <td data-title="Age">42</td>
165 </tr>
166 </tbody>
167 </table>
168 {{/code}}
169 )))
170
Manuel Smeria 7.2 171 = Further References =
Ecaterina Moraru (Valica) 1.1 172
173 * XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc)
Lucas Charpentier (Sereza7) 16.1 174 ** [[XWiki CSS Layout>>xwiki:Documentation.DevGuide.Tutorials.Skins.CSSLayout]]
Simon Urli 12.2 175 * XWiki provides by default a [[list of Skins>>xwiki:Documentation.UserGuide.Features.Skins]], each with its own characteristics
176 ** [[XWiki Albatross CSS Files>>xwiki:Documentation.DevGuide.Tutorials.Skins.CSS files]] //(deprecated)//
Ecaterina Moraru (Valica) 1.1 177
Manuel Smeria 7.2 178 = Special CSS Classes =
179
180 * 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.
Lucas Charpentier (Sereza7) 14.1 181
182 {{putFootnotes/}}

Get Connected