Templates in Percussion can be created in one of two ways:

1. Creating a new template from scratch
2. Creating a template using LiveFirst

This page will cover the process of creating a new template from scratch. 

Creating a new template, even when creating from scratch, is started by copying an existing template. Any template you create can then be copied to act as the foundation of a new template. Percussion ships with a number of base templates, including a set of responsive templates based on Zurb Foundation 4 that you can use as the foundation for your own template. This includes two plain templates, one of which is responsive, that have the absolute minimum of styling needed to support the Percussion application. 

When a template is created the region template layout is copied from the existing template as well as the content types (widgets) and classes associated with each region. However, no content is copied, even if the content is at the template level.  Please remember that styling (aka, look and feel) depends on the theme. If you create a template from a site that uses a different theme than the destination site, then the class references in the region will be invalid and the template look and feel will not appear. Refer back to Managing Themes for more information

To create a new template:

1. In the Finder, select Sites, then double-click on the site to which you want to add the template.
2. In the menu, choose Design.
3. In the Design Manager, choose Actions > Add Template.  
4. Choose the Percussion Templates radio button, and select the location of the source template. You can select from Percussion's base or responsive templates, or you can select from an existing site. 
5. Choose the template you wish to copy and click Save. A copy of the template is created with the name "(Original template name) - Copy" and added to the Design Manager.

To change the name of the template, double-click on the label above the template thumbnail. The name is opened for editing. Change the name and hit the return key or click somewhere else in the interface. NOTE: Each template in the system must have a unique name. If you give a template a name that already exists in the system, Percussion prevents the change.

Once you create a template, there is no association with the template is was based upon.  Any changes you make to the source template will not be reflected in the copy and vice versa.

Defining Template Layout

Template layout is a set of rectangular regions that define the sections of a template. Regions define the layout areas of pages, and are always managed on a template. Regions can be nested within other regions.  Each region is simply a standard HTML <div> element placed into the overall layout of the template. Dragging and dropping regions is simply adding or moving these <div> elements around within the template. Removing a region is simply removing that <div>.

The main function of regions is to block out and preserve space for the layout or “wireframe” of the given template. They are general purpose containers into which widgets and other regions can be placed.

On the Layout tab of the Template editor and Page editor in CM1, region outlines are represented by blue solid and dotted lines. On other tabs, and when viewing a preview of a page or a published page, these lines are not displayed.

To open a Template layout:

1. From the top menu, select Design.
2. In the Finder, double-click the Site whose template you want to modify.
3. In the Design Manager, click on the template Edit button. 
4. Click the Layout tab.

The size of regions on the Layout tab is always slightly distorted from the size on the preview and on rendered pages. On the layout tab, drop zones of 11 pixels are added to the top, bottom, and each side of each region to allow users to manipulate region layout. Thus, on the Layout tab, regions always appear 22 pixels larger side to side and 22 pixels larger up and down than they appear elsewhere.

Container Region

Every template in Percussion has an outermost “container” region which cannot be removed or modified, but can be styled with CSS. All other regions in the template are contained within this region. This region can be useful to define an intended optimal width for the main visible portion of all pages. This region is also useful as a centering mechanism for wide screen resolutions. 

Inserting Regions

To add a region to a Template, click the Insert Region tool in the Layout tab toolbar and drag it to the template. As you drag the Insert Region tool over the template, certain areas will be highlighted to indicate that a new region can be added in that location. Drop the tool over one of these highlighted areas to add a region in that location. While there are rules to how and where regions can be inserted, there is a certain element of trial and error to get it how you want it. 
 
The following table summarizes the results of most drop cases:

Drop Location	Does the target region of the drop contain child regions?	Effect
center	No (You can only drop in the center if the region does not contain any child regions.)	One new region is added, nested in the region where you dropped. Any widgets in the original region are moved into the new child region.
Top or Bottom	No	Two new regions are added within the region where you dropped. The regions are arranged top to bottom. If you drop the region tool on the top any widgets in the parent region are moved into the child region on the bottom. If you drop the region tool on the bottom, any widgets in the parent region are moved into the child region on the top.
Top or Bottom	Yes	A new child region is appended to the existing set of child regions. If you dropped at the top, the new child is appended to the top; if you dropped at the bottom, the new child region is appended to the bottom. Widgets in the existing regions are not affected by the drop.
Left or Right	No	Two new regions are added within the region where you dropped. The regions are arranged left to right. If you drop the region tool on the left, any widgets in the parent region are moved into the child region on the right. If you drop the region tool on the right, any widgets in the parent region are moved into the child region on the left.
Left or Right	Yes	Two new child regions are created, arranged left to right. The existing child regions are nested within one of the new child regions as children of that child region. The existing children are nested in the new left region if you dropped to the right; they are nested in the right region if you dropped on the left. Widgets move with the region containing them
Between two child regions	Yes	A new child region is appended to the existing set of child regions at the location where you dropped. Widgets in the existing regions are not affected by the drop

 

Resizing Regions

For Percussion Base templates, all regions can be resized. However, by resizing regions, you are inserting CSS overrides that dictate the height and width of the region. Percussion recommends instead that you allow for the theme to control the width of regions. Details on how to associate regions with styles in the CSS are covered in Styling Templates.  

If you wish to manually resize a region, hover the cursor over the region boundary, then drag the boundary in the direction you want to resize the region. Several rules apply when you manually resize regions:

• Regions are always flush to one another. No space is allowed between regions on the Layout tab. The padding and margins applied in the styling of the region may result in space between on the contents of adjacent regions on a rendered page, but the regions themselves remain flush.
• Regions cannot overlay one another. However, margins and padding in the styling of the region can result in a rendering that causes regions to appear to overlap. In the underlying code and on the Layout tab, the regions will always be adjacent.
• The minimum vertical size of a region on the Layout tab is 46 pixels. When you subtract the 22 pixel padding for the drop areas, the actual minimum size is 24 pixels.
• The minimum horizontal size of a region on the Layout tab is 22 pixels, which is the padding for the drop areas; the actual minimum size is 0 pixels.
• You cannot resize a parent region to be smaller than its largest child region.
• You can resize a child region to be larger than its parent region; the parent region will resize to accommodate it.
• For Responsive Templates, if you add a region to the right or left of a column, it will add a column width of 1 column on a 12-column grid and reduce the column size of the next adjacent column by one. 

For Percussion Responsive templates, 

you can resize regions without creating local overrides to your CSS. I

t is not possible to enter a fixed width or height of a given region on Percussion's responsive templates.

• Region height is controlled by the base CSS powering the templates and is always dynamic to ensure that content is not truncated based on the browser size.  
• Region widths are sized based on a 12-column grid. When you resize a region via drag-and-drop the border will "snap to" the closed grid border.  Behind the scenes, the region is associated with a class within the base template CSS.  
• A given "row" on the template must always fill the 12 columns on the grid. If a given region cannot be resized it will be shown with a solid line border as opposed to a dotted line.   
• When adding a region to the left or right of an existing region, it will be added with a grid size of 1 column. You can then drag to resize the column.  It will "steal" width by reducing the column size of the next column to the right (or left if added to the far right). 

Deleting Regions 

When you remove a region, its contents may be removed automatically, or you may be given the option of preserving its contents. To preserve content in a region, either save as a shared asset or move the regions widgets to another location on the page.

To remove a region from a Template layout:

1. Click on the region you want to remove.
   CM1 highlights the region and displays the configuration and delete icons in the upper right corner of the region.
2. Click the delete icon.
   CM1 displays a confirmation dialog. The Delete contents checkbox is checked but may not be enabled.
3. If the checkbox is enabled and you want to keep the contents of the region, uncheck the box, then click [OK].
4. If the checkbox is disabled and you want to keep the contents of the region, click [Cancel] to stop the remove action. Move the contents of the region to another location on the layout, then delete the region.