Bluebird Skin

Last modified by Ecaterina Moraru (Valica) on 2021/03/17 21:09

cogAn experimental skin based on bootstrap and inspired by the Flamingo proposal.
TypeSkin (filesystem)
Developed by

Denis Gervalle

0 Votes
LicenseGNU Lesser General Public License 2.1



Built with Bootstrap version 2.3.2

This skin has been quickly built over Colibri default templates to illustrate the benefit of adapting the HTML generated by XWiki to an existing CSS like Bootstrap. Some features are not yet available, some have rough edges or have not been reshaped. Why? Simply because we currently do not have centralized our HTML, and we produce similar HTML (like the one to produce a button) from many different places. It could happen in a .vm template, a XWikiDocument, some JavaScripts or a macro. It is therefore really difficult to quickly adapt the HTML to existing CSS.

This skin give access to all the Bootswatch's variants. Bootswatch's CSS files are simply downloaded and works AS IS. Here is the sample code you could used to override style.css and select the amelia variant:

@import "$xwiki.getSkinFile('css/amelia.min.css', true)";
@import "$xwiki.getSkinFile('css/bootstrap-responsive.min.css', true)";
@import "$xwiki.getSkinFile('css/font-awesome.min.css', true)";
@import "$xwiki.getSkinFile('bluebird.css', true)";

For this to be, the HTML generated by XWiki needs to be adapted to the markup required by Bootstrap. This is done in the Bluebird skin by overriding some .vm, but as mentioned earlier, this is not enough to be complete. A few custom style are also defined in bluebird.css.

You may enjoy this skin on your wiki at your own risk.


Prerequisites & Installation Instructions

  • Download the ZIP file and unzip it into the skins/ folder inside your expanded XWiki WAR directory
  • Download the Bootstrap 2.3.2 distribution, unzip it and add all folders (css, font, js) into the skins/bluebird folder inside your expanded XWiki WAR directory
  • Download the provided Skin page and import it in the wiki using Administration -> Content -> Import
  • Go to Administration -> Look & Feel -> Presentation and set Skin property to BluebirdSkin.Bluebird. Save preferences


Dependencies for this extension (org.xwiki.contrib:skin-bluebird 5.4.2-1):

Get Connected