Building design templates with Sitemagic CMS

A template within Sitemagic CMS is a set of HTML and CSS files that makes up the design. They define the look and feel of the header, the navigation menu, content pages, the footer, and so forth. Templating is a powerful mechanism that allows us to completely customize the appearance of Sitemagic CMS and our website. Templates are often referred to as themes or skins.

The images below are examples of websites built using Sitemagic CMS and two different design templates. Click a preview to see a larger image. Also check out the references section on Sitemagic.org for more examples.

  

Templates are made up of pure HTML and CSS. Contrary to many other Content Management Systems, Sitemagic CMS features true separation between layout and logic, meaning no obscure server side code (PHP) in your templates. This greatly simplifies the process of building custom design templates, and eases understanding of templating.

The minimal requirement for a Sitemagic CMS compatible design template is shown on the image to the right. 2 HTML files and 2 CSS files.

Basic.html and basic.css are linked, and are mainly used to display content in pop up windows.

Index.html is linked to both index.css and basic.css, and is used to display the full web design containing header, navigation menu, footer, and the content itself.

The two HTML files have basic.css in common. So if a specific style is to be used by both pop up windows and the web design (e.g. look and feel of text, links, tables, input controls, and so forth), basic.css would be the place to add such style. If styles are to be used by the web design (e.g. appearance of the header, the navigation menu, or the footer), index.css would be the place to add these styles.

The HTML template files contain place holders and repeating blocks. These are used to indicate where Sitemagic CMS should insert text and images from your content pages, as well as links for your navigation menu.

The code above originates from basic.html which is used for pop up windows. {[Title]} and {[Extension]} are examples of place holders. {[Title]} is automatically replaced by the title of the extension or content page loaded by Sitemagic CMS, while {[Extension]} is automatically replaced by the content of a content page (i.e. text, images, links, etc.) or the user interface of an extension (e.g. the contact form editor or file manager).

The index.html file is slightly more complicated, as it defines the presentation of the navigation menu. Since a menu may contain a variable number of links, we need a mechanism that will allow us to define a block that represents the presentation of a single link, and have it automatically dublicated for each link defined. For that we use repeating blocks.

Here we see a repeating block starting on the first line and ending on the last line. The HTML between the first and last line defines the presentation of navigation links. It is repeated (or copied) by Sitemagic CMS the number of times equivalent to the number of links in the navigation menu, and the place holders are replaced by link URLs and link titles.

To complicate matters a bit more, repeating blocks may be nested, allowing us to repeat (or copy) repeating blocks. This enables us to build more sophisticated menus such as drop down menus with multiple levels of links. For simplicity, simply copy the menu structure from an existing design template, and modify the HTML contained within the repeating blocks to have it presented the way you want it. The following is a full design template (index.html) containing relevant place holders and nested repeating blocks to support two levels in the navigation menu:

Notice how basic.css and index.css are not referenced in our HTML files. References to these are automatically added to the head section by Sitemagic CMS (in that particular order).

To fully cover the design template, let's have a quick look at the associated CSS files:

Notice how styles above are related to general HTML elements shared by both pop up windows and the full design (e.g. text and link formatting).

The styles above are used only by the web design, hence added to index.css. Notice how all CSS classes are prefixed with TPL. This is good practice to avoid naming conflicts with other components (e.g. elements rendered by an extension).

For general information on developing design templates and extensions for Sitemagic CMS, please refer to the Best Practices developing for Sitemagic CMS. The chapter contains relevant information about file encoding and the <form> element that you should read.