XWiki Standard 9.8.1 Documentation » XWiki Applications Overview » Flamingo Color Themes Application

Flamingo Color Themes Application

The Flamingo Color Themes Application is bundled with XWiki Standard 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.

Switch Between Flamingo Color Themes

The default Flamingo color theme in the XWiki standard distribution is named "Charcoal". To enable a different one, click the DrawerMenuIcon.png button which will open the drawer menu, then click on "Administer Wiki".

In the wiki administration page, click on "Look & Feel" in the accordion menu, then choose "Themes".

AdministerWikiMenu.pngPresentationGlobalAdmin.png

Finally, in the "Color Theme" section choose one of the options in the drop-down, then click on "Save". 

FlamingoDefaultColorTheme.png

Another possibility is to click on "Manage color themes" located below the drop-down list which redirects to the Flamingo themes overview page. Once you have decided about the one that you want, click on "Use this theme".

FlamingoChangeColorTheme.png

XWiki Standard 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 the Default Theme

To begin editing a theme, go back to the wiki preferences page, click on "Look & Feel" -> "Themes", make sure the "Charcoal" theme is selected in the drop-down, then click on "Customize".

CustomizeDefaultTheme.png

This will load a preview of the wiki home page using the "Charcoal" theme.

FlamingoColorThemeHome.png

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 theme page in "Inline" mode as shown in the previous section, click on "Logos" variable in the "Variables" panel, then on "Choose an attachment" in order to launch an attachment selector.

FlamingoBootstrapVariables.png

Next, upload a file from your computer or phone and click on "Upload and select". 

UploadNewLogo.png

The new logo will be immediately applied the "Preview" window and you should also see a thumbnail image in the "Variables" panel.

LogoApplied.png

Advanced Color Theme Actions

The "Variables" panel also provides an advanced feature allowing developers to enter some LESS code. Before XWiki 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