ColorTheme Application

ColorTheme Application

The color theme editor application allows for fast and easy modifications of your wiki's look and feel.

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:

#template('colorThemeInit.vm')

.yourClass {
  color: $theme.linkColor;
}

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.