A template is the HTML part of a theme.
Usually, there is only one file required, but you can have several if this seems logical.
The main HTML for your theme goes in themes/your-theme/templates/template.tpl
The minimum required elements are as follows (this works, but doesn't look good)...
Between these includes goes your HTML.
If you need to manually add code to the head of your document, create a new template called themes/your-theme/templates/customhead.tpl containing your head code - this will automatically be included.
#Content - the div that contains the content from the CMS, nothing else. eg: <div id="content">{include file="content.tpl"}</div>
#h1 - the ID of the H1 heading on the page eg <h1 id="h1">{$title|escape:"htmlall"}</h1>
#nav - the ID of the main navigation ul element - this is inserted automatically eg {$menu}
#wrap - fixed width designs will need a wrapper around almost all other elements
#header - the top header area if your site has one
#menu - the div that surrounds your main navigation
#container - if your design is multi column, a container is required to hold the #content-wrap and #sidebar divs
#content-wrap - This is typically a container for the breadcrumbs, H1 heading and content
#content - a container for only the content
#breadcrumbs - a div for breadcrumb navigation, if this is being used
#sidebar - the sidebar used in a 2 or 3 column layout
#footer - Footer navigation area, outside the content or wrap
Usually, there is only one file required, but you can have several if this seems logical.
The main HTML for your theme goes in themes/your-theme/templates/template.tpl
The minimum required elements are as follows (this works, but doesn't look good)...
{include file="head.tpl"}
<body>
{include file="content.tpl"}
{include file="foot.tpl"}
</body>
</html>
<body>
{include file="content.tpl"}
{include file="foot.tpl"}
</body>
</html>
Between these includes goes your HTML.
Head
It's important to note that the head.tpl include contains all the head declarations - titles, meta tags, CSS and Javascript. This important part of the page is managed by Jojo.If you need to manually add code to the head of your document, create a new template called themes/your-theme/templates/customhead.tpl containing your head code - this will automatically be included.
Body
The content.tpl include contains the content from the CMS. You will want to present this content nicely, so the purpose of the theme and template is to surround this content with a nice looking design. This means placing DIVs around the content, as per your design.Required Element names
If you are using our sitewide AJAX feature, you do need to name some of your DOM elements consistently. Unless there is a good reason not to, we recommend you name the elements as follows...#Content - the div that contains the content from the CMS, nothing else. eg: <div id="content">{include file="content.tpl"}</div>
#h1 - the ID of the H1 heading on the page eg <h1 id="h1">{$title|escape:"htmlall"}</h1>
#nav - the ID of the main navigation ul element - this is inserted automatically eg {$menu}
Recommended Element names
Other element names can be anything. In order to establish some consistency between templates and themes, and to keep things easy to understand, we recommend the following names...#wrap - fixed width designs will need a wrapper around almost all other elements
#header - the top header area if your site has one
#menu - the div that surrounds your main navigation
#container - if your design is multi column, a container is required to hold the #content-wrap and #sidebar divs
#content-wrap - This is typically a container for the breadcrumbs, H1 heading and content
#content - a container for only the content
#breadcrumbs - a div for breadcrumb navigation, if this is being used
#sidebar - the sidebar used in a 2 or 3 column layout
#footer - Footer navigation area, outside the content or wrap
