XWiki Enterprise 8.4.4 Documentation » XWiki Applications Overview » Flamingo Color Themes Application

Flamingo Color Themes Application

The Flamingo Color Themes Application is bundled with XWiki Enterprise and it provides the means to easily customize wiki skins and color themes based on Flamingo.

LESS CSS

Flamingo uses the LESS Module to compile LESS files located in the current skin folder at runtime. The LESS module provides a Java integration of LESS CSS using the LESS CSS Compiler for Java.

In fact, LESS extends the CSS language and makes it more efficient because it allows to create re-usable components. The generated result is a standard CSS file which eliminates the browser support issue.

LESS is written is JavaScript and it can be used in 2 ways:

  • directly in the browser in order to see the rendered content
  • in the command line via Node.js which creates a CSS file

Some of the LESS features include variables, extends, mix-ins, import and merge. For more details and examples, go to the "LESS Module and LESS CSS" documentation page.

Use a Flamingo Color Theme

Starting with version 6.2, "Charcoal" is the new default color theme. In case you have already set a Colibri theme as default, click the DrawerMenuIcon.png button which will open the drawer menu, then click on "Administer Wiki".

AdministerWikiMenu.png

In the wiki administration page, click on the "Presentation" link from the vertical menu to the left.

PresentationGlobalAdmin.png

Finally, in the "Color Theme" section choose one of the options under "Flamingo Themes", then click on "Save". 

FlamingoDefaultColorTheme.png

Another possibility is to navigate to "FlamingoThemes.WebHome" which lists the available Flamingo themes. Once you have decided about the one that you want, click on "Use this theme".

FlamingoChangeColorTheme.png

XWiki Enterprise has a total of 4 bundled themes, Charcoal, Marina, Garden and Kitty and another 16 themes that have been adapted from the Bootswatch collection. These ones have been integrated using the advanced lessCode property. Most importantly, the preview of the Flamingo Theme Application won't work in these cases. Also, the Bootswatch themes use some fonts from the Google Fonts web service which means that if you are working behind a proxy that filters some requests, or if you are browsing XWiki on an intranet without having an Internet connection, you will not have the same fonts, but a default one instead.

On sub-wikis you will notice 2 tabs in the "Color Theme" section:

  • Local - refers to the color themes from the current sub-wiki
  • Global - allows to use a color theme from the main wiki

LocalGlobalColorTheme.png

This way, in case you choose to use a global theme, it will be displayed differently in the page "FlamingoThemes.WebHome", more specifically it won't have the wiki prefix next to its name, unlike local themes.

GlobalColorThemeSubWiki.png

Edit a Flamingo Theme

To begin editing a theme, go to "FlamingoThemes.WebHome" which will display a preview of the wiki home page using the default theme which in our case is "Charcoal".

FlamingoColorThemeHome.png

Click on the editing pen icon to start customizing the theme and you will notice a left panel named "Variables" with the list of LESS variables you can change.

FlamingoBootstrapVariables.png

After each modification in the "Variables" panel, click "Refresh" in the right panel and you will see a preview. The process can take up to several seconds and the displayed UI might not be completely accurate.

The preview only works for the 4 bundled Flamingo themes: Charcoal, Marina, Garden and Kitty. The remaining 16 themes were created from Bootswatch using the lessCode property which is not taken into account by the live preview.

LESS Variables

Below you can see the list of LESS variable names and the corresponding mappings in the old Color Themes class.

Skin ElementLESS Variable Default Value
Logo@logo 
Color@text-color#333333
@body-bg$theme.pageBackgroundColor
@xwiki-page-content-bg $theme.pageContentBackgroundColor
@link-color $theme.linkColor
@brand-primary $theme.buttonPrimaryBackgroundColor
@brand-success $theme.notificationSuccessColor
@brand-info$theme.notificationInfoColor
@brand-warning $theme.notificationWarningColor
@brand-danger $theme.notificationErrorColor
@component-active-color The global color for active items like navs or drop-downs
@component-active-bg The global background color for active items
Typography@font-family-base@font-family-sans-serif
@font-family-sans-serif
@font-family-serif
@font-family-monospace
@font-size-base
Buttons@btn-font-weightnormal
@btn-default-color $theme.buttonSecondaryTextColor
@btn-default-bg $theme.buttonSecondaryBackgroundColor
@btn-primary-color $theme.buttonPrimaryTextColor
@btn-primary-bg $theme.buttonPrimaryBackgroundColor
@btn-success-color $theme.menuAddEntryLinkColor
@btn-success-bg$theme.menuAddEntryBackgroundColor
@btn-info-color  
@btn-info-bg  
@btn-warning-color  
@btn-warning-bg  
@btn-danger-color  
@btn-danger-bg  
@btn-default-border 
Navigation Bar@navbar-default-color#777
@navbar-default-bg$theme.menuBackgroundColor
@navbar-default-link-color$theme.menuLinkColor
@navbar-default-link-hover-color $theme.menuLinkColor
@navbar-default-link-hover-bg lighten($theme.menuBackgroundColor, 3%)
@navbar-default-link-active-color $theme.menuLinkColor
@navbar-default-link-active-bg lighten($theme.menuBackgroundColor, 3%)
@navbar-height  
Drop-downs@dropdown-bg#fff
@dropdown-border
@dropdown-link-color $theme.textColor
@dropdown-link-hover-color$theme.textColor
@dropdown-link-hover-bg$theme.submenuContentBackgroundColor
@dropdown-divider-bg 
Forms@input-bg#fff
@input-border$theme.borderColor
@input-color 
@input-border-focus 
@input-color-placeholder 
@legend-color  
@legend-border-color  
Panels@panel-bg#fff
@panel-default-text$theme.panelTextColor
Breadcrumb@breadcrumb-bg#f5f5f5
@breadcrumb-color
@breadcrumb-separator  

To display your custom logo, open the page "FlamingoThemes.Charcoal" in "View" mode and attach the new image. Next, edit the page in "Inline" mode and expand the "Logo" variable in the left panel.

LogoVariable.png

Finally, select the new logo from the drop-down list and click on "Refresh" to see the change in the preview window.

LogoApplied.png

Advanced Color Theme Actions

The "Variables" panel also provides an advanced feature allowing developers to enter some LESS code. Before XWiki Enterprise 7.3, the preview didn't take this field into account, but now, if you save the theme, you will be able to see your change on the wiki.

AdvancedActions.png

Any variable defined in the "Advanced" field takes priority over the variables defined in the other fields. For instance, if you defined @text-color in @lessCode, it will override any value from the @text-color field. More details about LESS CSS and examples are available in the "LESS Module and LESS CSS" documentation page.

      

Search this space