Color Themes Application
 | Ability to change skin colors |
| Type | XAR |
| Category | |
| Developed by | |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
| Bundled With | XWiki Standard |
Table of contents
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
- Click "Create 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. "Azure")
- Click "Edit" to start changing the theme
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.
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"
- Inside the field, the themes created with this application are labelled "Colibri themes", since they are designed to be used with the Colibri Skin.
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
- Fill in the Theme title in the "Title" field
- Edit the page in "Objects" mode
- Select "ColorThemeClass" from the "New Object" drop-down list
- 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:
.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:
background: $theme.pageContentBackgroundImage;
}
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.
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
