Color Themes Application

Last modified by Thomas Mortagne on 2024/07/05 18:02

color-themes.pngAbility to change skin colors
TypeXAR
Category
Developed by

XWiki Development Team

Rating
1 Votes
LicenseGNU Lesser General Public License 2.1
Bundled With

XWiki Standard

Installable with the Extension Manager

Description

This application has been designed to be used with the Colibri Skin. Since XWiki 6.2, Flamingo is the new default skin. Flamingo can use the color themes created by this application, but for retro-compatibility concern only. If you want to create a new color theme to customize Flamingo, you should better use the new Flamingo Theme Application.

Since of its dependence with Colibri, the ColorThemes have been retired with Colibri skin to contrib since 8.0.

See existing themes

With the color theme editor you have a new way of displaying themes on the "Color Themes" space home, each color theme being accompanied by a description.

AvailableThemes.png

In the "Color Themes" space, you will not see themes created with the Flamingo Theme Application.

Create a new theme

To create a new theme:

  • Go to the "Color Themes" space 
  • Type in the name of the new theme
  • Click "Create New Theme"

CreateNewTheme.png

  • Customize the resulting page
  • Click "Save & View"

Edit a theme

To edit a theme all you have to do is:

  • Go to the "Color Themes" space
  • Select the theme you would like to edit (e.g. "Azure")
  • Click "Edit" to start changing the theme

ColorThemesSpace.png

DefaultColorTheme.png

Edit.png

Hover over an area you'd like to edit. A palette will appear in the bottom left corner. Hover over the pallete to see a popup listing everything you can customize at that level. 

EditMenu.png

When you click on the pallete a dialog appears where you can make the desired changes. 

EditMenu1.png

EditMenu2.png

If you're not satisfied with one or more changes at this level you can click the green arrows to revert the modifications. 

Should you not like any of the changes made since you started editing the theme you can always click the "Reset" button in the top right corner and start again. 

EditMenu3.png

Once you're happy with the modifications all you have to do is click "Save & View", refresh the page and you'll be able to see the changed theme. 

NatureColorTheme.png

Set a theme

You can set the newly created/modified theme from:

  • The "Color Themes" space home by clicking "Use this theme"
    UseThisTheme.png
  • The "Presentation" section in "XWiki Preferences"
    PreferencesPresentationSkin.png
  • Inside the field, the themes created with this application are labelled "Colibri themes", since they are designed to be used with the Colibri Skin.
    ColorThemeDisplayer.png

You've now successfully changed the look of your wiki!

NatureMain.png

Adding a new Theme

In order to add a new theme:

  • Go to the "Color Themes" space
  • From the top menu create a new page
  • Fill in the Theme title in the "Title" field
  • Edit the page in "Objects" mode
  • Select "ColorThemeClass" from the "New Object" drop-down list
    ThemeObject.PNG
  • Click "Add"
  • Click "Save & Continue" 
  • Edit the page in "Wiki" mode
  • Type: {{include document="ColorThemes.ColorThemeSheet"/}}
  • Click "Save & View".

Using Color Themes variables

In order to see all the existing variables, you need to look at the Color Themes class (xwiki/bin/edit/ColorThemes/ColorThemeClass?editor=class). 

Every variable has its own purpose in the skin. For example, linkColor is the color that is used to represent all the links in the wiki; buttonPrimaryBackgroundColor defines the background color of a button, etc.

You would want to use these variables in your Stylesheet Extensions if you want your new pages/applications to follow the same colors as the current ColorTheme. 

In order to use the variables in your ssx files you need to include the macro that defines the colors. For example:

#template('colorThemeInit.vm')

.yourClass {
 color: $theme.linkColor;
}

There is a special case for the color theme variable names: when your name has the Image suffix, the url will automatically be generated. For example, the custom variable pageContentBackgroundImage holds the value lebg.png:

#mainContentArea {
 background: $theme.pageContentBackgroundImage;
}
#mainContentArea {
 background: url(/xwiki/bin/download/ColorThemes/Default/lebg.png);
}

Congratulations! You have just added your first new theme. Now you may want to customize and select your theme. To do so please refer to the steps as described above.

Setting separate themes on different spaces

Since XWiki Enterprise 2.7 the Color Theme Application allows you to add a different theme on each space. In order to do this you must hover over the space menu and click the "Administer Space" link for the space you want to change the color theme. Once in "Administration" click the "Presentation" link and on the new page select the theme you want to use for your space.

XEColorThemeSpace.png

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

Get Connected