Styling Templates

Once you have defined the layout of your template, you can then begin to associate the styles within your theme CSS to the template. This starts by identifying and defining each region's properties.

Identifying your regions

To identify regions, click on the region, then click on the configuration icon in the upper right corner of the region.

• Region name: Custom name for the region. This will correlate to a Div ID in generated webpage. The default name of a region is temp-region-n, where n is the incremental number of new regions added to the template. In other words,the first new region you add is "temp-region-1", the second is "temp-region-2", and so on.

• CSS Region root Class: Name of the root class for reference in CSS. The value in this field will be added to other values of the class attribute of the region <div> tag. You can refer to this class when defining CSS styling and formatting for the region in your theme CSS.

These two properties provide the ability to identify the region such that it can be associated with styles in your theme CSS.

Styling the template container region

The container region is required by the Percussion CMS. This region can be useful to define an intended optimal width for the main visible portion of all pages and as a centering mechanism for wide screen resolutions. By specifying a width and setting margins on the container to “auto” on left and right, the main visible portion of all pages will be centered.

For example, this bit of CSS in the theme creates a main visible area of 1000px that is centered (remember that a width must be specified for the centering to take effect):

       #container {

       width: 1000px;

       margin-left: auto;

       margin-right: auto;

     }

Responsive Classes

The responsive templates provided by Percussion use the following classes from Foundation Zurb: row, columns and large-X (X-- number from 1 to 12). 

Changing a Template Theme

When creating a template, it will automatically associate the template with the theme of the site.  However, it is possible to associate the template with a different theme. You can associate a region to a CSS class, but it is important to ensure you are pointing to the correct theme to have the region render properly. 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 in the Template

There are two primary ways of creating local overrides to the site theme in Percussion. 

1. Override theme CSS 
2. Define Region-specific overrides

Override theme CSS

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 code of the style.
4. Click Override Theme CSS.
5. Paste the style code in the CSS editor and modify as desired.
6. Click 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. 

Define Region Specific Overrides

Region properties provide several locations where theme overrides can be performed. To modify region properties, click on the region, then click on the configuration icon in the upper right corner of the region.  

• Height: The height in pixels of the DIV tag representing the region. Modifying this value is equivalent to resizing the region vertically. If Do not use CSS overrides is checked, this property becomes disabled, and its value cannot be changed. This field is not available when using Responsive templates. 
• Width: The width in pixels of the DIV tag representing the region. Modifying this value is equivalent to resizing the region horizontally. If Do not use CSS overrides is checked, this property becomes disabled, and its value cannot be changed.This field is not available when using Responsive templates
• Padding: The padding, in pixels, between the boundary of the region and its content. If Do not use CSS overrides is checked, this property becomes disabled, and its value cannot be changed.
• Margin: The margin, in pixels, around the region. If Do not use CSS overrides is checked, this property becomes disabled, and its value cannot be changed.

You can also specify additional Region CSS properties by entering them on this panel. These overrides will apply to all templates for all regions sharing the same name.