Colibri Skin

Colibri Skin

Lightweight, easily customizable skin

XWiki 2.0 introduces a new, lightweight, easily customizable skin. The main goal of the Colibri skin is to provide the proper support for fast and easy modifications of the look and feel of the wiki. The Colibri skin colors and decorative images are defined in ColorTheme objects inside Wiki documents, that can be changed directly in the web interface.

XWiki 2.1 introduces a complete redesign for the action menus.

Quick Tour

Overview

Selecting a Theme

The Colibri skin supports several possible color themes. The default color theme is blue. Several predefined themes are bundled with XE:

In order to select a theme:

• Go to "Administration"
• Click on "Presentation"
• Go to the bottom of the page
• Click the "Color Theme" dropdown and select your theme
• Click "Save".

You have now successfully changed your theme!

Customizing a Theme

To customize a theme:

• Go to the Color Themes space
• There you will find the default theme and a list of the available variants, including predefined themes bundled with XE:
  • Blue Sky
  • Bordo
  • Inner Dark
  • Nature
  • Nightfall
  • Peach

• Click on the theme you wish to customize (e.g. Bordo)
• On the newly loaded page click on the "Edit" menu at the top of the page
• At this point you should be able to edit the selected theme.

Don't forget to save your changes! ;-)

Adding a new Theme

In order to add a new theme:

• Go to the "Color Themes" space
• From the top menu create a new page
• In Edit mode fill in the Theme title in the "Title" field
• Go to "Objects"
• Click on "ColorThemeClass" located on the "Add Object" panel

• Click "Add Object From This Class"
• Click "Save & Continue"
• Go to Wiki edit mode
• Type: {{include document="ColorThemes.ColorThemeSheet"/}}
• Click "Save & View".

Using Color Themes variables

In order to see all the existing variables, you need to look at the Color Themes class (xwiki/bin/edit/ColorThemes/ColorThemeClass?editor=class).

Every variables has it's purpose in the skin. For example, linkColor is the color that is used to represent all the links in the wiki; buttonPrimaryBackgroundColor defines the background color of a button, etc.

You would want to use this variables in your Stylesheet Extensions if you want your new pages/applications to follow the same colors as the current ColorTheme.

In order to use the variables in your ssx files you need to include the macro that defines the colors, for example:

#template('colorThemeInit.vm')

.yourClass {
  color: $theme.linkColor;
}

Congratulations! You have just added your first new theme. Now you may want to customize and select your theme. To do so please refer to the steps as described above.