In this little guide we will create a little template and explain how templates in Skeletonz work.

We will create Dummy_Template. Here is a introduction animation of the end result (700 kb):

Before you continue, browse the templates directory in Skeletonz SVN. There you can also find the source code for Dummy_Template.

The overall structure

One template has following components:

• Name_Template/: A directory that has template files and static files
• Name_Template/template.py: A Python module with one class that implements a template class, this class should be named SiteTemplate

In the dummy case it will be Dummy_Template/ directory, that should be inserted under the templates/ directory.

template.py

This module has a class SiteTemplate that creates 4 objects from skeletonz.modules. It creates a header, a content, a menu and a footer object.

This class has also to extend a template class that is located in skeletonz/modules/template.py. This Template class has some accessor methods (such as getHeader(), getMenu()... etc.).

Anyway, if you want it easy, then just take and copy Default_Template and rename it to Dummy_Template. Now open Dummy_Template/template.py and edit the NAME variable to:

NAME = "Dummy_Template"

The convention is that template names are the same as directory names.

We will only have one CSS file, therefor remove following line from template.py:

obj_header.appendStyle("%s/%s/static/styles/content.css" % (getConfig().BASE_URL, self.name) )

Dummy_Template/ directory

This directory has 2 sub directories:

• view/: Template code is located here
• static/: Static files. Skeletonz automatically exposes this directory to the web - http://yoursite.com/static_tmpl/ will be the URL.

Create following directories:

• Dummy_Template/
• Dummy_Template/view
• Dummy_Template/static

The view/ directory

In this directory we will create two files:

• site_structure.tmpl: The template that defines the structure of the site.
• site_content.tmpl: The template that defines how template is rendered.

Go ahead and create them. If you don't know Cheetah template system, here is a one page tutorial - check it out. You can basically mix in all the HTML you want.

site_structure.tmpl

We will use Skeleton defaults, therefor fill this file with following:

$template.getHeader().renderText()
$template.getContent().renderText()
$template.getFooter().renderText()

site_content.tmpl

We will have a simple site with a list menu, headline and content field - 30 lines, that's all that it takes!! In the code below, notice how we tell Skeletonz where menu, headline and content is by decorating with id="CMS_Section:

<div id="top">
  My web page
</div>

<div id="menu">
  <ul class="CMS_ListMenu">
    $template.getMenu().renderText()
  </ul>
</div>

<div id="content">
  <h2 id="CMS_HeadLine">$page_obj.title</h2>
  <div id="CMS_ContentText">
    #if $page_obj.content == None or $page_obj.content == ''
        <span class="Content">The page has no content</span>
    #else
        #if $edit_mode
            <span class="Content">$page_obj.getContentEdit()</span>
        #else
            <span class="Content">$page_obj.getContent()</span>
        #end if
    #end if
  </div>
</div>

<div id="bottom">
  <?= cms_link_box ?>
  <br />
  <?= cms_status_box ?>
</div>

The static/ directory

In this directory create one file. Remember that we from Dummy_Template.py have specified that it should append one static file to the header, namely Dummy_Template/static/styles/gui.css. Create following:

• Dummy_Template/static/styles/ directory
• Dummy_Template/static/styles/gui.css file

Fill Dummy_Template/static/styles/gui.css with following:

body { color: #222; }

#top {
  background-color: #f8ded4;
  border-bottom: 3px solid #999;
  padding: 9px;
  font-size: 20px;
}

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 9px;
}
#menu li {
  display: inline;
  margin-right: 10px;
}

#content { padding: 9px; }
#bottom {
  padding: 15px 9px 9px 9px;

  text-align: center;
}

h2 {
  font-size: 20px;
  border-bottom: 1px solid #999;
}

Test it out

Open your Admin section and go to Template Manager. Select Dummy_Template. Close GreyBox window and reload...
Voila, your own template!