Provide a fresh, responsive and modern skin for XWiki, based on Bootstrap.

Description

This skin use the well-known Bootstrap Framework which gives us a modern look-and-feel and makes the UI responsive and thus working on mobile devices. It uses the HTML5 doctype.

General Overview

Mobile

The Flaming skin is responsive and work on Mobile devices (Phones, Tablets, etc).

Drawer

XWiki 7.2+ A drawer menu has replaced the traditional top menu.
XWiki 15.10+ It's possible to reuse the logic of the drawer menu to create additional drawers.

Note that since 7.3M1, the pages that are not accessible by the user are not displayed in the drawer.

Nested Pages

Since XWiki 7.2, we have adopted the "nested pages" paradigm. It means that you will no longer find the "space" concept in the UI.

Instead, each page has now the ability to have children pages, except if it is marked as "Terminal". See the Content Organization page for more details.

To see the children of a page, you need to go to the "more actions" menu (represented with 3 vertical dots). Then you will see a LiveTable where you can filter and sort the different children in the list. It also provides the ability to edit, rename or delete these pages.

Activation

To active the skin, set flamingo in the skin field in the Administration or add ?skin=flamingo to your URLs.

Since 6.2, the Flamingo skin is the default skin (and thus it is enabled by default).

Compatibility

Since 6.1+, Flamingo uses Respond.js and HTML5Shiv to be compatible with Internet Explorer 8. Note that starting with XWiki 7.0, IE8 is not longer supported.

Under the cover

Flamingo uses the LESS Module to compile the CSS at runtime. Since 6.1M2, the Flamingo skin can display the Colibri Color Themes thanks to a compatibility layer.

Customising UI elements

• layoutExtraVars.vm
  • $displayPageHeader - Default: false - Since: 6.2-M2 - Displaying a dedicated header that holds the logo
    • This variable can also be set in the textarea at "Administration > Page Elements > HTTP Meta Info" (for the wiki or a space) instead of having to do a custom skin.

Customising stying

• less/custom.less (since 9.8-RC1)
  • This file allows custom skins to easily add their own styling. Use the templates customisation technique to override the file and add your own LESS code. 
  • Styling can also be added using Style Sheet Extensions (SSX) or in the "advanced" section of a Flamingo Theme. Each method has it's advantages and disadvantages, so choose the method you prefer:
    • SSX objects can have multiple options for visibility (local, global, on demand);
    • Flamingo Theme customisations need an active theme in order to be visible;
    • changes added in the Skin (through "less/custom.less") are applied before any Theme and any SSX object. This is important because of the cascade specificity, but also because it means that the code you write in "custom.less" applies for multiple Themes, so you don't need to duplicate the code in case you use multiple Themes and also you don't need to make sure the SSX is called or has a specific visibility;
    • all methods support LESS and CSS, but the SSX objects need to explicitly state the content type;
    • "custom.less" and the "advanced" section support only LESS and CSS, while SSX objects can be parsed and allow also Velocity code. Other Skin templates and files can be overwritten to support Velocity (like style.less.vm or *.vm).

Bootstrap versions

Bootstrap is bundled with Flamingo.