Extensions Wiki » Extensions » Color Theme Application

Color Theme Application

Last modified by Guillaume Delhumeau on 2014/10/01 12:25
color-themes.pngPermits fast and easy modifications of your wiki's look and feel
TypeXAR
Developed by

XWiki Development Team

LicenseGNU Lesser General Public License 2.1
Bundled With

XWiki Enterprise, XWiki Enterprise 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.

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

Created by Silvia Rusu on 2010/03/25 09:48

Download XWiki

My Recent Modifications

Get Connected