Skip to Content

Migrating from Colibri to Flamingo

Last modified by Vincent Massol on 2024/11/19 16:14

 XWiki
 Requirements
 Completed
 
 

Description

There are some changes between Colibri Skin and Flamingo Skin. 

Technology

Entity Colibri Flamingo Issue
Framework Custom made, no external framework Uses Bootstrap (v3.2.0) responsive framework 

Change in standard used can cause issues with backwards compatibility. 

Some components might need adapting to be responsive.

Stylesheet CSS CSS+LESS 

All Flamingo styling lies in .less files. Each time you make a modification, you need to recompile the files (currently easily done by re-saving a ColorTheme page).
Overwriting Bootstrap specific .less file preserves their original name, while custom XWiki .less files can be also found.

Templates Inherited from Toucan + modifications Inherited from Colibri + modifications Flamingo overwrites macros.vm (and other templates) and also combines the menu templates in menu/ folder
ColorThemes Color Theme Application Flamingo Theme Application 

Flamingo Themes are completely different but are compatible with the Colibri Themes (but do not expect fancy results).
Only in style.less.vm we can write Velocity code, that's why old ColorThemes variables in .less files are replaced with LESS variables (like @xwiki-border-color for $theme.borderColor, etc.)

IconThemes - Icon Theme Application Adapt applications to use the IconThemes

Styling

Differences

Entity Colibri Flamingo Problem Solution Examples
Lists (ul, ol) Done with margin Inherits browser's padding Differences in spacing, alignment Check the padding and margin values 

Failed to execute the [groovy] macro. Cause: [startup failed: Script3805.groovy: 14: unable to resolve class XmlParser  @ line 14, column 12.     def xml = new XmlParser().parseText(cont)               ^  1 error ]. Click on this message for details.

Tables Full borders Vertical borders Missing some borders If you want the old behavior back you can use table:extend(.table-bordered) {}   
...       

Replacements

Entity Colibri Flamingo Issue 
Browser's defaults Colibri uses a reset.css included in colibri.css  BS uses a normalize.css  Careful on the differences. Some elements that were reseted by Colibri might need additional properties in order to have the same behaviour in Flamingo
Clearing floats  .clearfloats  .clearfix Colibri needed a dedicated container to hold the class, while now you just need to add the class to the parent element 
Buttons  .buttonwrapper .button, .secondary  .btn .btn-primary, .btn-default Colibri classes will be displayed in the same manner because of the LESS mapping. Use the new standard when creating new buttons
Grid .column + .full, .half, .third .col-xs-*, .col-sm-*, etc. Careful on BS responsiveness
...    

Conflicts

CSS classes used inside XWiki apps with a meaning inside Bootstrap:

Class Colibri Flamingo Same? Problem Examples
.row Used in tables (History) Used in grids, as container for columns bullet_red No   
.label Used in forms in different places (Profile, Extension, etc.) Used as markers, like 'New' bullet_red No Has nowrap and white color 

Failed to execute the [groovy] macro. Cause: [startup failed: Script3806.groovy: 14: unable to resolve class XmlParser  @ line 14, column 12.     def xml = new XmlParser().parseText(cont)               ^  1 error ]. Click on this message for details.

.pagination Used in livetable pagination, parent for <a> tags BS pagination done with <ul li> tags 

bullet_orange Almost

  
.panel Used in Panels App BS has a more complex concept of panels 

bullet_orange Almost

  
.disabled Used in forms to mark disabled elements Used in multiple components (forms, dropdowns, nav, pagination) to mark disabled elements bullet_green Yes   
.hidden 

Force an element to be hidden, using
display: none;

Uses
display: none !important; visibility: hidden !important;

bullet_green Yes Careful on the additional property  
.invisible 

Affects the visibility of an element
visibility: hidden;

Used for hiding content
visibility: hidden;

bullet_green Yes   
.checkbox     

Failed to execute the [groovy] macro. Cause: [startup failed: Script3807.groovy: 14: unable to resolve class XmlParser  @ line 14, column 12.     def xml = new XmlParser().parseText(cont)               ^  1 error ]. Click on this message for details.

CSS property box-sizing Browser's default Globally set to border-box bullet_red No Problematic if you have code written for old IE browsers, see http://getbootstrap.com/getting-started/#third-box-sizing 

Failed to execute the [groovy] macro. Cause: [startup failed: Script3808.groovy: 14: unable to resolve class XmlParser  @ line 14, column 12.     def xml = new XmlParser().parseText(cont)               ^  1 error ]. Click on this message for details.

...      

Behavior

...


 

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected