Flamingo Theme Application
 | Visually customize any Flamingo-based skin and preview the results live + Default Themes |
| Type | XAR |
| Category | |
| Developed by | |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
| Bundled With | XWiki Standard |
Table of contents
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.
XWiki 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
- 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.
- 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):
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:
How to see all existing themes
- Go the administration on your wiki, on the "Look & Feel" section, Themes tab.
- Click on "Manage color theme".
- You will reach the "Flamingo Theme Application" main page:
Here you can see existing themes, select one of them, or create new ones.
How to create a new theme
- Go to the "Flamingo Theme Application" main page, as explained just before.
- Fill the form where you can enter the name of your new theme and click on "Create new Theme".
- 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:
- Change any variable you want, and see the result in the preview box!
- Do not forget to save your theme at the end of your work.
This theme creator/editor UI allows to easily customize some of the variables:
- Logo: @logo
- Base colors
- @text-color
- @body-bg
- @xwiki-page-content-bg
- @link-color
- @brand-primary
- @brand-success
- @brand-info
- @brand-warning
- @brand-danger
- @headings-color
- @component-active-color
- @component-active-bg
- Typography
- @font-family-base
- @font-family-sans-serif
- @font-family-serif
- @font-family-monospace
- @font-size-base
- Tables
- @table-bg
- @table-bg-hover
- @table-border-color
- Buttons
- @btn-font-weight
- @btn-default-color
- @btn-default-bg
- @btn-primary-color
- @btn-primary-bg
- @btn-success-color
- @btn-success-bg
- @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
- @navbar-default-bg
- @navbar-default-link-color
- @navbar-default-link-hover-color
- @navbar-default-link-hover-bg
- @navbar-default-link-active-color
- @navbar-default-link-active-bg
- @navbar-height
- Drop downs
- @dropdown-bg
- @dropdown-border
- @dropdown-link-color
- @dropdown-link-hover-color
- @dropdown-link-hover-bg
- @dropdown-divider-bg
- Forms
- @input-bg
- @input-border
- @input-color
- @input-border-focus
- @input-color-placeholder
- @legend-color
- @legend-border-color
- Panels
- @panel-bg
- @panel-header-text
- Breadcrumb
- @breadcrumb-bg
- @breadcrumb-color
- @breadcrumb-link-color
- @breadcrumb-separator
- Advanced : @lessCode
How to modify a theme
- Go the administration on your wiki, on the "Look & Feel" section, Themes tab:
- Click to "Customize"
- Now you can modify the theme with the same system you used to create new ones
Special cases
How to change the logo
- Go the the "Logos" section of the variables of the theme you are editing.
- Click on the "Choose an attachment" button, just beneath the @logo variable.
- Select from one of the existing image attachments on the theme page.
- 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.
Additional information for Color theme variables
Variables - Buttons
- @btn-default-border: should change the border of the "cancel" button in the comments panel.
- @btn-font-weight: should affect all buttons.
- @btn-warning-bg / @btn-warning-color: You must create a new button to check this functionality
Variables - Panels
- @panel-bg : should change the background color of the panels (both header and content)
- XWiki 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
XWiki 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
In this field, you can enter some LESS code.
Examples
You can use this field to set a bootstrap that is not exposed by the Flamingo Theme Application:
Or you can create a new CSS class that will be added to the default stylesheet:
background-color: red;
}
You can even use LESS functions and bootstrap mix-ins:
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:
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:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- 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.10.1):
- org.xwiki.platform:xwiki-platform-icon-script 16.10.1
- org.xwiki.platform:xwiki-platform-webjars-api 16.10.1
- org.webjars:requirejs 2.3.7
- org.webjars:jquery 3.7.1
- org.webjars.npm:less 4.2.0
- org.webjars:colpick 2.0.2
- org.xwiki.platform:xwiki-platform-attachment-ui 16.10.1
- org.xwiki.platform:xwiki-platform-attachment-validation-ui 16.10.1
- org.xwiki.rendering:xwiki-rendering-macro-message 16.10.1
- org.xwiki.platform:xwiki-platform-localization-macro 16.10.1
- org.xwiki.platform:xwiki-platform-rendering-xwiki 16.10.1
- org.xwiki.platform:xwiki-platform-index-tree-macro 16.10.1
- org.xwiki.platform:xwiki-platform-wiki-script 16.10.1
