Template Basics

Templates are the HTML markup tags that determine the layout and appearance of your site. In this tutorial we will show how to create valid XHTML layout templates controlled by CSS documents.

Templates are created in the Resources section of the Evo admin interface.

Select New template from the Templates tab.

In the Creat/Edit template form, give the template a name, a description, and if you like, check the Lock template for editing box. Then enter your HTML/XHTML code into the textarea. You can create the template in a different editor and copy/paste the entire template into the textarea.

Let's examine a simple, two-column template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title>Simple Template</title>
<meta http-equiv="Content-Type" content="text/html; charsetiso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="banner">
<div id="wrapper">
<div id="container">
<div id="content"> 
<!-- main page content goes here --> 
<!-- end of content div --> 
<!-- end of container div -->
<div id="sidebar"> 
<!-- menu and other blocks goes here --> 
<!-- end of sidebar div -->
<div class="clearing"></div>
<!-- end of wrapper div -->
<div id="footer">Footer</div>

Like any HTML code, an Evo template at its most basic is a set of HTML tags to indicate the structure of the page. It begins with the doctype declaration, sets some information in the head, such as where to locate the CSS file for the page, then lays out the structure for the body of the page. This is not intended to be an HTML tutorial; here are some links to helpful sites:

Here is a simple CSS file to control our template's appearance:

*{padding:0; margin:0; border:0}
body{margin:0 20px}
#banner{background:#cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab}
#banner h1{padding:10px}
#wrapper{background:#fff; border-left:1px solid #ababab; border-right:1px solid #ababab}
#container{width:100%; background:#fff; float:left; margin-right:-200px}
#content{background:#fff; margin-right:200px; height:200px; border-right:1px dotted #ababab}
#sidebar{width:200px; float:right}
#footer{background:#cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab}
.clearing{clear:both; height:0}

This template and CSS file will make a page that looks like this:

Doesn't look like much right now, does it? How about this?

Or this...

Or this?

It's all in the CSS, with the help of Evo tags to include content and functionality. The next document in this series covers adding Evo tags to your template.

While it is beyond the scope of this document to provide a tutorial in CSS, here is a list of links to helpful sites:

Suggest an edit to this page.