In this section a very basic design template will be created and explained. This example may be used as a base for creating even more sofisticated and better looking templates. The entire example is available for download.

1) Open the templates folder in the Sitemagic CMS installation, and create a new folder called MyTemplate.

2) Create the following empty files in the MyTemplate folder: index.html, index.css, basic.html, basic.css

3) Open the Sitemagic CMS configuration file in the root of the installation (config.xml.php), and insert the name of the new template in the following configuration elements.

Fill out index.html with the content from the example below.

The example above is just basic HTML as we know it. Notice the two place holders.
{[Title]} is replaced by the title of the current content page.
{[Extension]} is replaced by an extension or the content of a content page.

Now browse to the following URL in your Sitemagic CMS installation: index.php?SMExt=SMLogin
It's not pretty, but you should now see the login extension loaded. Also notice that a title has been set for the website.

We will construct the menu later, when we have improved the structure of the design template using some basic CSS.

Fill out index.css with the content from the example below.

The example above defines three CSS classes; TPLcontainer, TPLmenu, and TPLcontent.

TPLcontainer
The container contains the menu and the content area. To make sure the design doesn't stretch to the width of the screen, a fixed size is specified. The entire design is centered on the screen too.

TPLmenu
Defines the design of the menu. The menu will be surrounded by borders (boxed) and have a fixed width of 200 pixels. The menu is placed in the left side of the container, and a blue background color is set.

TPLcontent
Defines the design of the content area. The content area will be surrounded by borders (boxed) and have a fixed width of 700 pixels. The area is placed to the right of the menu in the container, and a brown background color is set.

Once again, browse to the website, to see the changes. We now have a little more structure and color on our website.

We will now define how the menu is displayed using repeating blocks and place holders. The following code should replace "Menu goes here.." in index.html. This example will create a menu that support links in 2 levels (top nodes and child nodes).

Notice how the code is colored in the example above, to make it easier to understand. The red code define links in the root of the menu (first level), while the blue code define links under each root node (second level). To support yet another level of links in the menu, the example above may be extended with the following lines of green code.

You will only see links in all three levels, if links are created - you may have to create some dummy links using the administration section.

When the menu extension builds the navigation menu, it first dublicates the content of the first repeating block (SMMenuLevel1). Since this block contains other repeating blocks, it will be necessary to assign each repeating block a unique ID, to avoid conflicts. Therefore the ID of each element in the first repeating block is used to define the nested repeating blocks. We also see this approach in the definition of the 3rd repeating block, which is defined using the unique ID from the second repeating block.

In most cases a 3-level navigation menu is fine, and will cover the needs for most people. The navigation menu must support at least 2 levels though, since the administration section depends on this number of levels. Repeating blocks are covered in more details in the Template engine chapter.

Use the file basic.css to implement styling for general elements such as text, links, and headings, that are supposed to be used for both the design template, pop-up windows and the content page editor (TinyMCE). If styling for these elements are defined in index.css, the styling will not be applied in popup-windows, and when editing content pages, which will confused many users. Therefore, insert the following style classes in basic.css.

Once again, browse to the website, to see the changes. It all looks even better now. Go to the login extension and log in (index.php?SMExt=SMLogin). Try editing a content page. You will see that the background of the content page matches the background of the content area of the website. Unfortunately it is no longer just the content area of the website that is brown - the entire background of the website is brown. This is because we defined a background color for the body element in basic.css, which is necessary in order to assign a background color for pop-up windows and content pages in the content page editor (TinyMCE). To fix this, we simple override the background color of the website in index.css, which is not included in basic.html (defined later). Add the following code to index.css in the top of the file.

The background of the website is now once again white, while the content area is still brown, and so are the content pages in the content page editor. The overriding is possible since index.css is included after basic.css in index.html.

This page is, as described earlier, used for pop-up windows. Insert the code below in basic.html.

The content of the file simply renders the content of an extension or a content page, without the menu or anything else.

We have now successfully created a template for Sitemagic CMS. It is now up to you, to make it look really good. Feel free to use the templates that comes bundled with Sitemagic CMS, to create new and exciting templates. Also, we would be happy to share your creations with other Sitemagic CMS users, so please contact us, if you want to make your template available to the community.

Enjoy working with templates for Sitemagic CMS.