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:

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)
  • .noitems
      use to contain empty state messages
      used in #docextrapanes
      example: 'No comments for this document', 'No attachments for this document'
  • .icon
      use for icon buttons (example)
      used in .icon.rss in 'Quick Links' panel
  • .hasIcon
      use for elements that also have a background-icon attached (example)
      works in pair with other classes that specify the icon that will be used (ex: .iconRSS, .tmEdit, .etc)
      used in menus
  • .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 or a elements to display as buttons
  • .secondary.button
      use for secondary actions, like cancel
  • .icon-button
    • .icon-button.add-button
    • .icon-button.remove-button
        use for small icon actions, like add and remove (example)
  • .button.disabled
      use to display a button in it's disabled state

B2. Behavior classnames

  • .withTip
      introduced in XWIKI-4163
      description: automatically hides and reinserts the default text for input fields, acting as a tip.
      warning: will be replaced by the placeholder attribute introduced in HTML5
  • .useTitleAsTip
      introduced in 5.1 Milestone 1
      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.
      warning: will be replaced by the placeholder attribute introduced in HTML5
  • .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)
     deprecated since XWiki 10.6RC1, use suggest-users instead
      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)
     deprecated since XWiki 10.6RC1, use suggest-groups instead
      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.
     Needs to be used together with a skinx call to the uicomponents/widgets/fullScreen.js script

Classes for the responsiveness

With Flamingo, you can use Bootstrap classes plus some XWiki specific classes:

  • .responsive-table
      introduced in 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.
      Example:
     <table class="responsive-table">
       <thead>
         <tr>
           <th>Name</th>
           <th>Age</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td data-title="Name">John Smith</td>
           <td data-title="Age">42</td>
         </tr>
       </tbody>
     </table>

Further References

Special CSS Classes

  • When writing CSS code for XWiki there are some code style rules that need to be followed in order to assure consistency and quality.
Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected