Building design templates - introduction
Sitemagic CMS features a powerful yet lightweight template engine, that lets you create fantastic design template, to control the design and layout of the website. Sitemagic CMS features true seperation of logic and layout, which means that not even one line of PHP code will be found in the templates - it is pure HTML, and optionally CSS and JavaScript.
Data from the Content Management System is loaded into the design template using
Place Holders and
Repeating Blocks, which are relative easy to use.
The basics
Templates are installed in the templates folder. Each template has its own folder. Each template must define at least the following files.
index.html
The actual HTML design template containing logo, menu, content area etc.
This file should include both the basic.css file and index.css file (in that order).
index.css
Style sheet for the design template.
This file should only contain styles that are specific to the design template. If in doubt, add styles to basic.css.
basic.html
Simple page used for pop-up windows.
basic.css
Style sheet used for pop-up design template.
This file is also used by the content page editor (TinyMCE). Use this file to define general styling for elements such as text, links, tables, headings etc.
See the installation instruction for information about installing new design templates.
Referencing images and style sheets
Referencing images and style sheets in the HTML files, must be done using the full path to these files from the root of the Sitemagic CMS installation. See examples below.
<link rel="stylesheet" type="text/css" href="templates/<MyTemplateFolder>/basic.css">
<img src="templates/<MyTemplateFolder>/images/logo.png" alt="Logo"> |
Referencing images from a style sheet file (*.css) is a bit different. Use the path relative to the template folder, as the example below demonstrates.
div.TPLlogo
{
background-image: url("images/logo.png");
width: 700px;
height: 75px;
} |
Notice that it is good practice to prefix template style classes with TPL. Extensions may use style classes as well, so to avoid any conflicts, both extensions and templates should use prefixing, to make class names unique.
Encoding
Sitemagic CMS uses the ISO-8859-1 encoding (Latin1 / Western Europe) for all output. PHP, on which Sitemagic CMS is based, do have support for UTF-8, but it wasn't designed to work with that to begin with. When the first lines of code was written for Sitemagic CMS, not all string functions had equivalent multibyte functions. We therefore decided to wait for PHP6, to support UTF-8, since this version introduces native support for multibyte encodings. This means that no code has to be re-written.
If you intend to build a website or web application for Americans or Europeans, you will not have to worry about encoding.