Special CSS Classes

 
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:

• Special CSS Classes
  • A. General classes
  • B. Classes used for Form elements
    • B1. Buttons containers
    • B2. Behavior classnames
  • Further References

A. General classes

• .hidden  
    use to 'display: none' elements

• .invisible  
    use to 'visibility: hidden' elements

• .clearfloats  
    use to clear floats when using floated containers, in order to keep the parent's layout correct

• .separator
    use to contain separators ( · , | )
    used in #document-info and blog .entry-footer

• .itemCount
    use to contain numeric values that describe quantitative information about an item
    used in #docExtraTabs, #document-info, .blog-category-level
    example: Comments (1)

• .icon
    use for icon buttons
    used in .icon.rss in 'Quick Links' panel

• .loading
    sets an animated GIF as being the background image (center aligned) of the element
    generally used on Ajax requests in order to express the loading status
    example of usage: on loading each of the Annotations, Comments, Attachments, History and Informations tabs

• .column + (.full | .half | .third)
    classes for generic (1|2|3) column layout 

B. Classes used for Form elements

B1. Buttons containers

• .buttonwrapper
    use as an external container for buttons (required for Toucan skin)

• .buttonwrapper .button
    use .button on input, a to display as buttons

• .secondary.button
    use for secondary actions, like cancel

B2. Behavior classnames

• .withTip
    introduced in XWIKI-4163
    description: automatically hides and reinserts the default text for input fields, acting as a tip.

• .suggestDocuments
    introduced in XWIKI-5301
    description: all input fields with classname suggestDocuments will receive an autocomplete control suggesting document names.

• .suggestSpaces
    introduced in XWIKI-5657 (XWiki 2.6 RC2)
    description: all input fields with classname suggestSpaces will receive an autocomplete control suggesting space names.

• .suggestUsers
    introduced in XWIKI-5649 (XWiki 2.6 RC2)
   description: all input fields with classname suggestUsers will receive an autocomplete control suggesting document names of documents that contains user objects

• .suggestGroups
    introduced in XWIKI-5649 (XWiki 2.6 RC2)
   description: all input fields with classname suggestGroups will receive an autocomplete control suggesting document names of documents that contains group objects

• .suggested
   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).

• .maximizable
    introduced in XWIKI-5660 (XWiki 2.6 RC2)
   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. Warningneeds to be used together with a skinx call to the uicomponents/widgets/fullScreen.js script

Further References

• XWiki's structure is defined in templates that generate specific layout classes (.main, #mainContentArea, etc)
  • XWiki CSS Layout (outdated)
• XWiki provides by default a list of Skins, each with it's own characteristics
  • XWiki Albatross CSS Files (deprecated)

• When writing CSS code for XWiki there are some code style rules that need to be followed in order to assure consistency and quality.