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.
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.
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.
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
|
|
Main tables Header, Center, Footer
|
|
Secondary tables
|
|
mainbody table
|
|
PHP code - positions for modules/component loading | |
PHP code - positions for global variables |
|
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:
|
||||||||
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.
|
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.
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);
}
In index.php we will have:
<table width="100%" border="0" cellspacing="2" cellpadding="0" style="height:92px> <tr> <td class="tpl_headertopleft"> </td> <td class="tpl_headertopright"> </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.
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.
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 | ||||||||||||||||||||
|
||||||||||||||||||||
NOTE: File template.xml (template root directory) contains references to used resources. It must be updated with references to the added or removed resources.