Themes

The appearance and behavior of the pages in your site is are defined by the themes you assign to it. A theme is a set of cascading stylesheets (CSS), images, and JavaScript files. By associating a theme to a template, you control the look and feel of the pages associated to the template. Theme styles can be overwritten at the page or template level by inserting local or inline style changes. 

Typical design practice is to use one theme per site, so that the site has a consistent look and feel across all pages. However, themes are associated directly only to templates, so it is possible for a site to use multiple themes in order to support a different look and feel in different areas of the site.

Adding Themes to your system

To add a new theme to Percussion CMS, in the Finder select Design > web_resources > themes. This directory structure corresponds to the CMS server directory <CM1InstallDirectory>/web_resources/themes/

Each theme is then stored in a sub-directory. The name of the directory is used as the name of the theme, for example, /web_resources/themes/themename. You can either create the sub-directory by selecting "Add Folder" in the Finder or by adding the directory directly on the server.

Note: anything created under the Percussion directory may be overwritten upon upgrading CM1, so you should ensure that you are using separate directories.

Each theme directory contains the following files and sub-directories:

• A theme thumbnail image file
  This image file represents the theme on the Style tab of the template editor. The theme thumbnail image should be named <themename>.ext, where <themename> is the name of the theme, and ext is the image file type extension. The theme thumbnail image should be the only image file included directly in the theme directory. Any additional images for the theme should be stored in an sub-directory. If the theme directory contains multiple image files, the image used is selected arbitrarily. If no valid image file is found in the theme directory, no thumbnail is displayed for the theme.
• The theme CSS file
  This file defines the styles for the theme. The theme directory normally should only contain one CSS file, which should be named <themename>.css. If the name of the CSS file is different from the name of the theme, and if there are other css file(s) existing in the theme directory, the system will load the first file (alphabetically) which has extension ".css". However, if <themename>.css file exists then any other file in the theme directoty will be ignored. Generally additional supporting CSS file(s) should be stored in a sub-directory. These additional CSS files should be referenced or imported (@import) into the main theme CSS file.
• css sub-directory
  This directory stores additional CSS files for the theme. This sub-directory is optional. You only need to include this sub-directory if you your theme includes additional CSS files to support the primary theme CSS file. This directory is typically named "css".
• images sub-directory
  This directory stores any images used in the theme. It is optional. If your theme does not include any images, you do not need this directory. This directory is typically named "images".
• javascript sub-directory
  This directory stores any JavaScript files used in the theme. It is optional. If your theme does not include any JavaScript, you do not need this directory. This directory is typically named "js".

Percussion does not provide a user interface to modify theme files once they have been uploaded. To modify these files, you can download, make changes, and re-upload them through the Finder, or directly on the server. Because Percussion does not track versions of the CSS files, we do not recommend that you make changes to the files directly on the CMS Server, but rather track and version them using a third party system. 

Associating a Theme to a Site

Once you have uploaded your theme, you can then associated it with a site and template. To specify or maintain the theme for a template:

1. In the top navigation menu, choose Design.
2. Select the Site.
3. Open the template whose look and feel you want to maintain.
4. Click on the Style tab.
5. On the Style tab, click Select Theme. Percussion CMS displays all themes available in the system. Select the theme you want to use for the template.
6. Click [Save]

Overriding a Theme

To override a theme style:

1. Click View Theme CSS. Percussion displays the CSS code for the theme main CSS file.
2. In the CSS code, find the style that you want to override.
3. Copy the complete code of the style.
4. Click Override Theme CSS.
5. Paste the style code in the CSS editor.
6. Change the style by clicking save.

Note: The changes you make to the style only affect the template (they are local overrides.) These changes do not modify the styles in the theme.