[headline:The template]
The template is the model for all the pages within your site, each page will be generated with its look and feel.

Edit the [bold:template.html] file in the admin folder with any text editor (I recommend HomeSite or PHPEdit).

The template for this page comes with loads of comments to explain how to set up the template correctly. 
So if these explanations here don\'t help you, just take a look at it.

The template.html needs to link to each of the [bold:\"meta\"] elements of the sitemap. You link to these pages by taking their name, lowercasing it and replacing each space with an underscore.

So, if your sitemap has a meta element called \"About Us\", the link would be 
[start:code]<a href=\"about_us.html\">About Us</a>[end:code]
For all the other sitemap elements the script does that for you. 

[subheadline:Defining the navigation]
To define which part of the template shall become the navigation, you add the appropriate comments. The necessary comments are:
[start:code]
	<!-- start:mainnav -->
	<!-- end:mainnav -->

[end:code]
around the main navigation, and 
[start:code]
	<!-- start:leftnav -->
	<!-- end:leftnav -->

[end:code]
around the second level navigation (normally on the left side of the screen, hence the name).

Inside these \"comment-tags\" you add the two possible states of the navigation, active and inactive.
Let\'s say for example we want the main navigation to show links to each other element of the main navigation, and display the current selected element in bold and un-linked.
To do this, you need to add the following where you want the main navigation to appear.
[start:code]
	<!-- start:mainnav -->
	<!-- start:inactive -->
	<a   href=\"url.html\">item</a> 
	<!-- end:inactive -->
	<!-- start:active -->
	<strong>item</strong> 
	<!-- end:active -->
	<!-- end:mainnav -->

[end:code]
The [bold:item] texts will be replaced by the real wording of the main navigation element (coming from [bold:sitemap.xml]).
The [bold:url] texts will be replaced by the filename of the main navigation element. The filename is generated by taking the wording, lowercasing it and replacing each space with an underscore.

The same applies for the left/second level navigation. 

By using clever naming conventions you can also do a graphical navigation, for example if a main element is called \"Our People\" you can call the inactive button \"our_people.gif\"  and the active \"our_people_on.gif\"  and display it by using this code:
[start:code]
	<!-- start:mainnav -->
	<!-- start:inactive -->
	<a href=\"url.html\"><img src=\"../images/url.gif\" alt=\"item\" /></a> 
	<!-- end:inactive -->
	<!-- start:active -->
	<img src=\"../images/url_on.gif\" alt=\"item\" /> 
	<!-- end:active -->
	<!-- end:mainnav -->

[end:code]
Also selectboxes using Javascript are possible:
[start:code]
 <form>
	<select onchange=\"self.location=this.options[this.selectedIndex].value\">
	<!-- start:mainnav -->
	<!-- start:inactive -->
	<option value=\"url.html\">item</option>
	<!-- end:inactive -->
	<!-- start:active -->
	<option value=\"url.html\" selected=\"selected\">item</option>
	<!-- end:active -->
	<!-- end:mainnav -->
	</select>
</form>

[end:code]

Furthermore you can add a comment called
[start:code]<!--breadcrumb -->
[end:code]
which will be replaced by the breadcrumb navigation.

[subheadline:Placing the content]
To define where the content should appear, simply add a comment called 
[start:code]<!-- content -->
[end:code]
and [bold:EasyCMS] will replace it with the real thing.

[subheadline:The stylesheet]
[bold:EasyCMS] adds HTML with attached stylesheet classes for each EasyCMS command. The classes you need to define in your stylesheet are:

[bold:headline] - for all headlines
[bold:subheadline] - for all subheadlines
[bold:content] - for all textlinks, sitelinks and external links

make sure not to add any class with the name ecms, as that would interfere with the styles used by [bold:EasyCMS] internally.