Chapter 2: Template Organization

XT templates live in the "inc/html" sub-folder in any Sitellite installation.

Template sets

Templates are organized into multiple "sets", which typically contain completely separate designs. In this way, the Sitellite CMS user interface can use the same template organization as the rest of the web site, but still have its own graphic design. You can have as many designs for as many applications as you want running on top of the Sitellite platform.

The Template Naming Convention

Inside a template set, templates are stored as individual ".tpl" files that contain the XHTML and XT markup. A single template set can have multiple templates within it, which are organized according to output mode and by template name. The name of the template file is made of three parts: the output mode, the template name, and the tpl extension. For example, the default html template is named html.default.tpl .

Output modes

Output modes allow you to offer different output formats on a web site, instead of just XHTML. This way, you can accommodate different types of visitors as new technologies become available, such as cell phones and PDAs. You can also provide alternative file formats such as PDF output for your web site using output modes. A chapter in this lesson covers output modes more in details.

Multiple templates

Even within the same output mode (ie. XHTML), you may still want some pages to look different than others. For example, your main index page might have more branding and imagery and less content than inside pages, and some inside pages may require more width than others. Sitellite allows you to do this as part of the standard template naming convention.

Templates and CSS

Any good design nowadays contains more than just XHTML, but rather a design consists of two distinct parts. The first, the XHTML, is meant to describe the document moreso than to control the display of it. The second, the CSS, is meant to apply style to the different markup tags in the markup document. In this way, you have even more control over your design, and more meaningful markup (ie. metadata) about your documents as well.

In Sitellite, CSS files live in the template set folders alongside templates. They are considered of equal importance to a complete web site graphic design.

In fact, because XT templates must be valid XML (ie. XHTML instead of HTML), Sitellite actually encourages additional standards compliance that are otherwise not required of most CMS software.

XHTML transitional

XHTML is the newest version of the HTML markup language. The reason for the added "X" is because XHTML is HTML with a few new added rules that allow it to be XML compliant.

XML compliance allows HTML documents to better interoperate with new technologies, as well as other XML-based markup languages, such as Scalable Vector Graphics (SVG), MathML, and XT.

By requiring XHTML compliance in Sitellite's templates, we were able to create the XT template language using only a standard XML parser, which makes template parsing much more stable and predictable.

The main design templates live in the inc/html folder of your Sitellite installation.  Each template set (akin to a theme) lives in a subfolder below inc/html.  Each theme has at least three things in it: an html.default.tpl file containing the default template to use for that set, a site.css file containing the styles for that template set, and a "pix" folder for storing related graphics.

Sitellite ships with two built-in template sets, which we recommend you add to instead of modifying: "default", and "admin".  The "default" set contains the look of the example web site installed with Sitellite, and the "admin" set contains the design of Sitellite's administrative user interface.  These can be a valuable resource in terms of a working example of a template set.

In creating a custom design for your Sitellite-based web sites, we recommend you name your template set after the name of the web site (ie. www.yourWebSite.com would use "yourWebSite" as the name of the template set).

Where Sitellite's template system gets interesting is in the ability to specify alternate templates within a set.  This is done in one of two ways:

1. Via the "mode" parameter.

2. Via the page_template() function or "template" page attribute.

The "mode", which defaults to "html", affects the first part of the template name, and is optionally specified via the request URL (ie. ?mode=html).  This allows you to provide multiple subsets of a template set based on the mode (aka. content type) that the visitor wants.  In this way, you could offer a web site in both HTML format (the default), and WAP format for cell phones, to name one potential use.

The second part of the template name is considered its actual name (the mode could be called a prefix if you like, and ".tpl" is simply a suffix that tells you the file is a template file).  The actual name corresponds either to the "template" attribute of the page object (accessible under the "Properties" tab in the page editor, or via the page_template() function inside boxes and actions), to the template attribute of a parent page that is marked as a section root (also under the "Properties" tab), or the name specified in the "default_template" setting in inc/conf/config.ini.php (which you should leave as "default").

This allows you to specify additional templates in the same set that alter the look of specific pages, or of entire sections of your web site.

With all of these naming options, Sitellite's template system offers undoubtedly the most flexible and advanced template selection structure available in any PHP-based system today.

New template sets are installed simply by dropping them into the inc/html folder.  To change the default set used by your web site, simply change the "default_template_set" value in inc/conf/config.ini.php to the name of the set you want to be the default.

You can also install additional sets and use them as themes for Sitellite-based apps, which is exactly what we do with the Sitellite UI itself.  To do this, simply specify the template set name in your app's access.php files, like this:

 sitellite_template_set = myTemplateSet

That's all there is to it.  To make your own template sets, simply copy an existing set to a new folder inside inc/html, give it a name, and modify as desired.