Tutorial: creating a template

This tutorial will guide you through the creation of a well formed Drake CMS template (see CSS conventions) compliant to our accepted standards and valid for certification.

Directory and files structure

In the following example we will use as reference a template from those of the official release (take FixBlue, for example).

templatename/ - main directory in ::/templates 
	index.htm
	index.php
	template.xml
	template_thumbnail.png
templatename/css
		drake.css
		templates_css.css
templatename/images
		boff.png
		bon.png
		bottom.png
		bullet.png
		but.png
		header.jpg
		indent1.png
		inputback.jpg
		modulback.png
		space.png
		top-fill.png
		top.png

templatename can be fixblue or any other name but written as lowercase.

Architecture

Drake CMS contents are processed by index.php (in the root directory of the template). Such file is a simple tabular HTML structure which includes inside it (in certain positions) blocks of PHP code which generate the output.

The PHP code blocks have the following purposes:

For more information about Drake CMS architecture, read Architecture.

Example template

The following example shows the structure of a template in its 3 main tables which contain nested child tables, which finally contain the PHP code blocks.

 

Container table

Determines the template size in the browser window; can be set as fixed or variable width

 

Main tables Header, Center, Footer

Allow management of contents in the three layout areas and have variable width ("width" attribute set to 100%); they adapt to the size of the container table

 

Secondary tables

They contain PHP code blocks and they all have variable width ("width" attribute set to 100%) except the left and right tables ("width" attribute set to 178 pixels by default)

 

mainbody table

It has variable width ("width" attribute set to 100%) and contains a PHP line which allows loading of the current component

  PHP code - positions for modules/component loading
  PHP code - positions for global variables

BANNER
PATHWAY USER3
LEFT
TOP
USER1
USER2
MAIN BODY
USER5
USER6
BOTTOM
RIGHT

CSS properties

Contents generated by Drake CMS through the template's index.php are formatted following the properties assigned in the two CSS files of the template: drake.css and template_css.css.

For more information about the architecture and the CSS model, read Cascading Style Sheets (CSS).

drake.css In this file global CSS classes are defined (dk_classname), generated by Drake CMS output and that are used in global layout. Such classes are grouped by type as follows:

Global Modules Classes

Classes which handle module properties

Example for assigning properties to module headers:

.dk_module .dk_header h3 {
	font-family : Arial, Verdana, Geneva, Helvetica, 
	sans-serif;
	font-size : 11px;
	background-image : url(../images/header.jpg); 
	...  
} 
  

Global Component Classes

Classes which handle component properties.

Example for assigning padding of components:
.dk_component .dk_content {
	width : 100%;
	padding-left : 3px;
	padding-right : 3px;
	...
}

Global Form Object Classes

Classes which handle properties of form items.

Example for assigning a background and a border to input elements:
.dk_inputbox {
	background-image :url(../images/inputback.jpg);
	border : 1px solid #666;
} 

Global Generic Classes

Generic template classes not part of the Drake CMS standard.

template_css.css

In this file are declared class properties which determine the settings and graphical customization of templates.As for the drake.css file, also such classes are grouped for type/subtype.


Generic Custom Classes

Classes for global HTML tags handling

Template Classes

Classes which determine properties of elements of the HTML structure of the index.php file.

Such classes are specifically relative to the graphical layout of the template (images, borders) and can have a tpl_ prefix (not mandatory neither part of the Drake CMS CSS standard); the color scheme of the global properties (pathway, date, copyright) is also assigned in this section.

Example to assign a background image to the header table.
.tpl_headerfill {
	background : url(../images/top-fill.png);
}

Modules and Components Custom Classes

Classes for handling modules and components

Such classes are subgrouped as follows:

  • Shared - shared properties between component/modules

    Example to assign table header properties to components with tabular lists:

    .dkcom_tableheader {
    	background : #D8E0E4;
    	color : #333333;
    	...
    }
      
  • Module/Component name - properties of a single module/component.

    Example which assigns the link properties to the menu module (mod_menu):

    .dkmod_menu a.menu_mainlevel:link  {
    	text-align : center;
    	display : block;
    	font-size : 12px;
    	text-decoration : none;
    	width : auto;
    	color : #000080; 
    } 
    

Drabot Custom Classes

Classes for drabots properties

Creating or editing a template

In order to easily and quickly create a new template you should:

When you want to edit the HTML structure of index.php in order to create code positions and/or use different graphics from that used in the default templates, it becomes necessary to assign or create tpl_ reference classes in the file template_css.css and the references to the new graphics too (if any).

NOTE: tpl_ classes are template-relative and are not part of theDrake CMS CSS model. Such classes, as any other not part of the standard CSS model of Drake CMS, can have any name; in this tutorial the tpl_ prefix has been used since it is the same of some templates of the standard distribution, but nothing denies the usage of a different naming.

header table example (only 1 background image)

In index.php we will have:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:92px;" class="tpl_headerfill">

and in template_css.css

.tpl_headerfill {
	background : url(../images/top-fill.png);
}

header table example (2 background images)

In index.php we will have:

<table width="100%" border="0" cellspacing="2" cellpadding="0" style="height:92px>
<tr>
<td class="tpl_headertopleft">&nbsp;</td>
<td class="tpl_headertopright">&nbsp;</td>
</tr>
</table>

and in template_css.css

.tpl_headertopleft {
	background : url(../images/top-left.png);
}
.tpl_headertopright {
	background : url(../images/top-right.png);
}

This logic can be applied to any scheme you wish to realize with the proposed HTML skeleton, reminding that the main table CENTER is subject to the dynamic variations due to the settings chosen by the Drake CMS administrator. For example a whole menu column (left or right) might be disabled in certain pages and the CENTER table, which shall contain most modules and the main content area, will have to re-adapt to this situation.

Advanced Template

Using a structure like that one of the “Flat” template, it is possible to take advantage of one or more instances of the module “accessible Content” from the backend in order to implement bitmap and logo in any position. In order as an example to load a logo vertical in the position “left”, new request of the “Content” in management is sufficient to create one modules (backend) and to input to the field “module content” appropriate code HTML that can be managed like any other module of the CMS.

NOTE: Inserted code HTML and css in the module “content” must obviously be, to the ends of the final layout, coherent with the position of destination of the module.

Contained in the module “Content” for the logo management example

In "module content" text field we will have

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:200px;"class="tpl_logo"> </td>
</tr>
</table>

and in template_css.css

.tpl_logo {
	background : url(../images/logo.png);
}

  DATE  
 
LEFT
USER3
PATHWAY
TOP
USER1
USER2
MAIN BODY
USER5
USER6
BOTTOM
RIGHT
 
     

 

NOTE: File template.xml (template root directory) contains references to used resources. It must be updated with references to the added or removed resources.