Theme templates

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)...

{include file="head.tpl"}
<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

Footer

The footer typically contains navigation and webmaster credits. The foot.tpl include is used for adding any code Jojo needs. For example, Google Analytics code should go last in your HTML, not in the head, as the W3C would recommend. Many people find that having Analytics code in the head causes your site to run very slowly when the Analytics server goes offline, or is responding slowly. Placing it in the footer means Analytics will load last, asfter your page content is delivered.