Wiki source code of Special CSS Classes
Version 3.1 by Ecaterina Moraru (Valica) on 2012/01/16
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | = Special CSS Classes = | ||
| 2 | XWiki has some special classes that are used in certain conditions to assure consistency and enhance functionality. The following classes are defined for [[Colibri Skin>>extensions:Extension.Colibri Skin]]: | ||
| 3 | |||
| 4 | {{toc /}} | ||
| 5 | |||
| 6 | == A. General classes == | ||
| 7 | |||
| 8 | * **##.hidden##** | ||
| 9 | use to 'display: none' elements | ||
| 10 | |||
| 11 | * **##.invisible##** | ||
| 12 | use to 'visibility: hidden' elements | ||
| 13 | |||
| 14 | * **##.clearfloats##** | ||
| 15 | use to clear floats when using floated containers, in order to keep the parent's layout correct | ||
| 16 | |||
| 17 | * **##.separator##** | ||
| 18 | use to contain separators ( {{html}}·{{/html}} , | ) | ||
| 19 | used in #document-info and blog .entry-footer | ||
| 20 | |||
| 21 | * **##.itemCount##** | ||
| 22 | use to contain numeric values that describe quantitative information about an item | ||
| 23 | used in #docExtraTabs, #document-info, .blog-category-level | ||
| 24 | example: Comments (1) | ||
| 25 | |||
| 26 | * **##.icon##** | ||
| 27 | use for icon buttons | ||
| 28 | used in .icon.rss in 'Quick Links' panel | ||
| 29 | |||
| 30 | * **##.hasIcon##** | ||
| 31 | use for elements that also have a background-icon attached | ||
| 32 | works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc) | ||
| 33 | used in menus | ||
| 34 | |||
| 35 | * **##.loading##** | ||
| 36 | sets an animated GIF as being the background image (center aligned) of the element | ||
| 37 | generally used on Ajax requests in order to express the loading status | ||
| 38 | example of usage: on loading each of the Annotations, Comments, Attachments, History and Informations tabs | ||
| 39 | |||
| 40 | * **##.column##** + (**##.full##** | **##.half##** | **##.third##**) | ||
| 41 | classes for generic (1|2|3) column layout | ||
| 42 | |||
| 43 | == B. Classes used for Form elements == | ||
| 44 | |||
| 45 | === B1. Buttons containers === | ||
| 46 | |||
| 47 | * **##.buttonwrapper##** | ||
| 48 | use as an external container for buttons (required for Toucan skin) | ||
| 49 | |||
| 50 | * **##.buttonwrapper .button##** | ||
| 51 | use .button on input, a to display as buttons | ||
| 52 | |||
| 53 | * **##.secondary.button##** | ||
| 54 | use for secondary actions, like ##cancel## | ||
| 55 | |||
| 56 | * **##.button.disabled##** | ||
| 57 | use to display a button in it's disabled state | ||
| 58 | |||
| 59 | === B2. Behavior classnames === | ||
| 60 | |||
| 61 | * **##.withTip##** | ||
| 62 | introduced in [[XWIKI-4163>>http://jira.xwiki.org/jira/browse/XWIKI-4163]] | ||
| 63 | description: automatically hides and reinserts the default text for input fields, acting as a tip. | ||
| 64 | |||
| 65 | * **##.suggestDocuments##** | ||
| 66 | introduced in [[XWIKI-5301>>http://jira.xwiki.org/jira/browse/XWIKI-5301]] | ||
| 67 | description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names. | ||
| 68 | |||
| 69 | * **##.suggestSpaces##** | ||
| 70 | introduced in [[XWIKI-5657>>http://jira.xwiki.org/jira/browse/XWIKI-5301]] (XWiki 2.6 RC2) | ||
| 71 | description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names. | ||
| 72 | |||
| 73 | * **##.suggestUsers##** | ||
| 74 | introduced in [[XWIKI-5649>>http://jira.xwiki.org/jira/browse/XWIKI-5649]] (XWiki 2.6 RC2) | ||
| 75 | description: all input fields with classname suggestUsers will receive an autocomplete control suggesting document names of documents that contains user objects | ||
| 76 | |||
| 77 | * **##.suggestGroups##** | ||
| 78 | introduced in [[XWIKI-5649>>http://jira.xwiki.org/jira/browse/XWIKI-5649]] (XWiki 2.6 RC2) | ||
| 79 | description: all input fields with classname suggestGroups will receive an autocomplete control suggesting document names of documents that contains group objects | ||
| 80 | |||
| 81 | * **##.suggested##** | ||
| 82 | 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). | ||
| 83 | |||
| 84 | * **##.maximizable##** | ||
| 85 | introduced in [[XWIKI-5660>>http://jira.xwiki.org/jira/browse/XWIKI-5660]] (XWiki 2.6 RC2) | ||
| 86 | description: offers a link for users to maximize the element on which this classname is applied, making it possible to view that element in fullscreen mode. {{warning}}needs to be used together with a skinx call to the ##uicomponents/widgets/fullScreen.js## script{{/warning}} | ||
| 87 | |||
| 88 | == Further References == | ||
| 89 | |||
| 90 | * XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc) | ||
| 91 | ** [[XWiki CSS Layout>>http://platform.xwiki.org/xwiki/bin/view/AdminGuide/CSSLayout]] //(outdated)// | ||
| 92 | * XWiki provides by default a [[list of Skins>>http://platform.xwiki.org/xwiki/bin/view/Features/Skins]], each with it's own characteristics | ||
| 93 | ** [[XWiki Albatross CSS Files>>http://platform.xwiki.org/xwiki/bin/view/AdminGuide/CSS+files]] //(deprecated)// | ||
| 94 | |||
| 95 | * When writing CSS code for XWiki there are some [[code style rules>>http://dev.xwiki.org/xwiki/bin/view/Community/XhtmlCssCodeStyle]] that need to be followed in order to assure consistency and quality. |
