Example: creating a template

This example shows how to create a Coach View that contains a simple header and footer. It then shows how to make the Coach View available as a template.

This example creates a Coach View called My Template. My Template has three areas: a header that contains standard text, a content area, and a footer that contains some more standard text. To separate the areas, My Template uses <div> tags.

My Template with a header, a content area, and a footer

Upload the image for the header background:
1. Click the Add icon for Files and then select Web File.
2. Add the image file as a web file. For the example, use this image file:
Create the My Template Coach View:
1. Click the Add icon for User Interface and then select Coach View.
2. Create the My Template Coach View.
Define the layout of the My Template Coach View:
1. In the Layout page of the Coach View, drop a custom HTML item onto the layout canvas.
2. In the properties of the custom HTML item, add the following HTML code as text that goes in the header:
```
<div id="header">
	<h1 id="header_text">My Company</h1>
</div>
<div id="content">
```
  This code defines the text that goes in the header division and opens the main content division.
3. Drop a content box below the custom HTML item for the content area. The content box is a placeholder for content that is defined by Coach Views and Coaches that users create based on the My Template Coach View. In this case, content placed in the content box fits between the header and footer in the My Template Coach View.
4. In the Layout page of the Coach View, drop a custom HTML item onto the layout canvas below the content box.
5. In the properties of the second custom HTML item, add the following HTML code as text that goes in the footer.
```
</div>
<div id="footer">
	<h2 id="footer_text">© My Company</h2>
</div>
```
  This code closes the content division and defines the text that goes in the footer division.
The layout of the My Template Coach View looks like the following screen capture:
In the Behavior page, define the look of the My Template Coach View by adding the following code as inline CSS:
```
#header {
	text-align: center;
	padding: 10px 0 10px 0;
	height: 60px;
	background-image: url('banner.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#header_text {
	 color:black;
	 border:none;
	 font-size:40px;
}

#footer {
	padding: 5px 25px 5px 5px;
	text-align: right;
	background: #EAD6D1;
}

#footer_text {
	color:black;
	border:none;
	font-size:12px;
}

#content {
	background: #F8F8F8;
	padding: 20px;
}
```
If the image has been packaged in a .zip file, use the following format for the URL:
```
url('zip_name.zip!path/banner.gif');
```
Tip: You can also put the CSS code in a .css file and then use Included Scripts to refer to the file. If you use this approach, put your .css file and any images it refers to in a .zip file. Then add the .zip file as a web file. Putting all of the files in the .zip file means that the system can find the referenced image files.
To make the My Template Coach View into a template, in the Overview page select Use as a Template.
To represent the My Template Coach View on the palette and in the New Coach View wizard, add a palette icon.
Tip: Take a screen capture of the My Template Coach View in a browser, save it as a .png file, and use that file as the palette icon.
Save the My Template Coach View.

When you create a Coach View or Coach, you can now base it on the My Template Coach View. The new Coach View or Coach now has the header and footer. It also has an area between the two where you can drop content.