Flamingo Theme Application

Last modified by Admin on 2024/02/26 13:20

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

XWiki Development Team

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1
Bundled With

XWiki Standard

Installable with the Extension Manager

Description

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

Bundled themes

This applications comes with 21 themes, with the default one being Iceberg. In the gallery below you will see the themes Iceberg, Charcoal, Marina, Garden and Kitty.

15.3+  The contrast has been increased on the Iceberg theme in order to achieve accessibility standards defined in WCAG 2.1 AA. 

How to select a theme

  1. Go the administration on your wiki, on the Look & Feel section, and then on the Themes tab. Click on the arrow under Color Theme and select the wanted theme grouped under the "Flamingo Themes" label.
    change-wiki-theme.gif
  2. Select the theme you want to use, and click on "save".

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 "Look & Feel" section, Themes tab.
  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 "Look & Feel" section, Themes tab:
    Administration.png
  2. Click to "Customize"
  3. 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

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

Variables - Panels

  • @panel-bg : should change the background color of the panels (both header and content)
  • 16.0.0+ @panel-header-text : should change the text color of the panel header.

Variables - Headings

  • Direct heading size definitions
    • @font-size-document-title a special size for the document title, virtually a h0 one level above h1
    • @font-size-h1
    • @font-size-h2
    • @font-size-h3
    • @font-size-h4
    • @font-size-h5
    • @font-size-h6

15.9+

  • The heading size variables are currently computed based on the following variables:
    • @font-size-base the font size of the standard text
    • The viewport size (between 768 and 1200px)
    • A scaling ratio @font-size-headings-scale-min (1.125 by default) for 768px and below, @font-size-headings-scale (1.190 by default) for 1200px and above, and a proportional value for viewport in between 768 and 1200px.
      For instance, h1-size = h2-size x scale, except for h5 which is the same size as the standard font, and h6 which is one scale smaller than h5.

Advanced: LESS Code

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

  • 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

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;
}

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 16.1.0):

Tags:
    

Get Connected