Flamingo Theme Application

Last modified by Admin on 2017/10/05 15:44

paletteVisually customize any Flamingo-based skin and preview the results live + Default Themes
TypeXAR
Developed by

XWiki Development Team

Rating
Rate!
1 Votes
LicenseGNU Lesser General Public License 2.1
Bundled With

XWiki Enterprise

Installable with the Extension Manager

Description

With this application, you can change colors, typographies and more in any skin based on Flamingo.

This application use a lot the JavaScript interpretor of your browser. You might experience some slowness due to that fact. For the same reason, Internet Explorer 8 is not supported by this application. You need to use a more recent browser: Microsoft Internet Explorer 9+, Mozilla Firefox, Google Chrome...

Bundled themes

This applications comes with 4 themes: Charcoal, Marina, Garden and Kitty:

How to select a theme

  1. Go the administration on your wiki, on the "presentation" section, and click on the "color theme" property:
    ColorThemeDisplayer.png
  2. There you will see themes created by this application, regrouped under the "Flamingo Themes" label, and themes created with the old Color Theme Application, regrouped under the "Colibri Themes" label. 
  3. Select the theme you want to use, and click on "save".
Since XWiki 8.3M1, you can chose a theme coming from the main wiki (global themes) in a subwiki. You are able to select if you want a theme from the main wiki (global) or from the current wiki (local):
ColorThemeDisplayerOnSubwiki.png

Colibri themes are compatible with the Flamingo Skin, but for retro-compatibility concern only. You should better consider use themes created with this new application, under the "Flamingo Themes" label.

Note: if an invalid color theme is configured (for example when your color theme is deleted), you will see the following error:

ColorThemeDisplayerInvalid.png

How to see all existing themes

  1. Go the administration on your wiki, on the "presentation" section.
  2. Click on "manage color theme".
  3. You will reach the "Flamingo Theme Application" main page:

     FlamingoThemeWebHome.png

Here you can see existing themes, select one of them, or create new ones.

How to create a new theme

  1. Go to the "Flamingo Theme Application" main page, as explained just before.
  2. Fill the form where you can enter the name of your new theme and click on "Create new Theme".
  3. You will have two panels: on the left, a selection of variables (most of them come from bootstrap) that you can change, and on the right, the preview of the wiki using the theme:
    FlamingoThemeEditor.png
  4. Change any variable you want, and see the result in the preview box!
  5. Do not forget to save your theme at the end of your work.

How to modify a theme

  1. Go the administration on your wiki, on the "presentation" section:
    Administration.png
  2. Select on the existing flamingo theme (by default, there is only one: FlamingoDefaultTheme or Charcoal since 6.3m1).
  3. Click to "Customize".
  4. You will see the Flamingo Theme Application, with a preview of the wiki using the theme you are editing:
    FlamingoThemeEditorView.png
  5. Click on "Edit".
  6. Now you can modify the theme with the same system you used to create new ones.

Special cases

  1. Go the the "Logos" section of the variables of the theme you are editing.
  2. Click on the "Choose an attachment" button, just beneath the @logo variable.
  3. Select from one of the existing image attachments on the theme page.
  4. Otherwise, if you'd like to upload a new logo image, click "Browse", choose a file from your computer and then click "Upload and select".

Remember: It's always a good idea to resize your logo image before uploading to the actual size that it is going to be displayed to avoid unnecessarily large downloads for your users. Also, using a vector image format, like SVG, is always a recommended alternative, whenever possible.

flamingoThemes-logo-picker-select.png

Before 9.5RC1, the process involved an extra step:

  1. Add the image containing your logo in the attachments of the theme you are editing (currently, you need to go to the "view" mode to see the "Attachments" tab).
  2. Click on "Edit" again, and go the the "logo" section of the variables.
  3. Now, you can select one of the images that you have in your theme:
    ChangeLogo.png

Additional information for Color theme variables

Variables - Buttons:

    - @btn-default-border: should change the border of the "cancel" button in the comments panel.
     Buttons Default Border.JPG   

    - @btn-font-weight: should affect all buttons.
     Buttons Font Weight.JPG   

    - @btn-warning-bg / @btn-warning-color: You must create a new button to check this functionality
     Buttons Warning Background.JPG    

Advanced: LESS Code

LESSCode.png
In this field, you can enter some LESS code

  • Before XWiki 7.3M1, the preview will not take into account this field, but if you save the theme, you will be able to see your change on the wiki.
  • Before 7.3, any variable defined in the LESS code field taked priority over the variables defined in the other fields. (e.g. if you defined @text-color in the @lessCode, it will overrides any value filled in the @@text-color field.)
  • Since 7.3, the priority is given to the standard fields.
  • Changing this field is reserved to advanced users that know how to use LESS and CSS. It might break the display of the skin if some errors are written there.

Examples

You can use this field to set a bootstrap that is not exposed by the Flamingo Theme Application:

@modal-content-bg: red;

Or you can create a new CSS class that will be added to the default stylesheet:

.myClass{
 background-color: red;
}

You can even use LESS functions and bootstrap mix-ins:

.myClass{
 background-color: darken(red, 10%); // LESS function
 .make-xs-column(12); // Bootstrap mixin
}

Backward compatibility

The Colibri Skin can use the themes made for Flamingo. We have created a mapping between the Flamingo Themes variables and the Color Theme Application ones. The results may not be perfect though.

How it works

The Flamingo skin is written with the LESS language. The final CSS that is sent to the browser is first compiled on the server by the LESS Module. It is cached on the server to not re-compute it afterwards.

On the preview box, when you are editing a theme, it is different. It actually uses the LESS compiler, executed on the browser. It allows us to offer a real preview (not a fake one) without making the server re-compile the LESS files, which would be too costly.

Using theme variables

Starting with 6.4 milestone 2, you can use LESS in a Skin Extension. Thus, in order to use the theme variables, you just need to choose the LESS syntax for your Skin Extension and then just use the Flamingo Theme variables normally. For example, in order to reuse the link color, you'd write:

.yourClass {
color: @link-color;
}

Before 6.4 milestone 2 there is no solution for using the flamingo theme's variables in a Skin Extension. But you can still use the old color theme variables because there is an automatic mapping between flamingo variables and them. For example, 

#template('colorThemeInit.vm')

.yourClass {
color: $theme.linkColor;
}

Note that this automatic mapping exists also for versions above 6.4 milestone 2, so CSS code using $theme. will continue to work. This mapping is offered, though, on best-effort basis, so using this mechanism might not be seamless.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Dependencies

Dependencies for this extension (org.xwiki.platform:xwiki-platform-flamingo-theme-ui 9.8.1):

Tags:
Created by Guillaume Delhumeau on 2014/08/07 16:15
    

Get Connected