Color Theme Application

Permits fast and easy modifications of your wiki's look and feel

Description

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.

Create a new theme

To create a new theme:

• Go to the "Color Themes" space 
• Type in the name of the new theme

• 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. "Default color theme")
• Click the edit menu to start changing the theme

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

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

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. 

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. 

Set a theme

You can set the newly created/modified theme from:

• The "Color Themes" space home by clicking "Use this theme"

• The "Presentation" section in "XWiki Preferences"

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

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
• In Edit mode fill in the Theme title in the "Title" field
• Go to "Objects"
• Click on "ColorThemeClass" located on the "Add Object" panel
   
• Click "Add Object From This Class"
• Click "Save & Continue" 
• Go to Wiki edit 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 variables has it's 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 this 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:

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

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" icon and on the new page select the theme you want to use for your space.