Development/Template creation
From Lanius CMS Wiki
This tutorial will guide you through the creation of a well formed Lanius CMS template (see CSS conventions) compliant to our accepted standards and valid for certification.
Contents |
Directory and files structure
See Structure.
Architecture
See 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 |
CSS properties
Contents generated by Lanius CMS through the template's index.php are formatted following the properties assigned in the CSS files of the template: template.style.css and components/modules/drabots/name.style.css.
For more information about the architecture and the CSS model, read CSS.
Template-specific CSS file
templatename/template.style.css contains global CSS classes definitions (dk_classname), such classes are used by elements in Lanius CMS output for 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 Lanius CMS standard.
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 Lanius 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);
}
Addon-specific CSS files
templatename/components/component.style.css templatename/modules/module.style.css templatename/drabots/drabot.style.css
Each of these files (varying by the component, module or drabot names) are declared class properties which determine the settings and customization of components/modules/drabots. This class overrides settings declared in 'template.style.css file.
Example for component
templatename/components/polls.style.css
Classes for handling polls component
.dkcom_polls .dkcom_tableheader td{
padding:5px 5px 5px 5px; color : #999999;
font-size : 12px; font-weight : normal; letter-spacing : 1px;
}
.pollscolor1 { background-color: #8D1B1B; }
.pollscolor2 { background-color: #6740E1; border: #4169E1; }
...
Example for module
templatename/modules/menu.style.css
Classes for handling menu modules
.dkmod_menu a.menu_mainlevel {
font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
text-align : center;
display : block;
line-height : 22px;
height : 20px;
font-size : 12px;
text-decoration : none;
width : auto;
background : url(../images/boff.png);
color : #999999;
}
...
Example for drabots
templatename/drabots/dravote.style.css
Classes for handling drabot vote
.dkbot_content_rating {
font-size : 10px;
color : #CC9900;
}
Creating or editing a template
In order to easily and quickly create a new template you should:
- edit the images in images/ directory without renaming files (unless you are going to update the references in index.php, template.xml and eventually the CSS files);
- re-assign, where necessary, the class properties that are active in template.style.css (e.g. relatively to the color and background properties);
- update templatename/template.xml (in template root directory) which contains references to used resources (check for added or removed resources).
When you want to edit the HTML structure of templatename/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.style.css and the references to the new graphics too (if any).
NOTE: tpl_ classes are template-relative and are not part of the CSS conventions. Such classes, as any other not part of the standard CSS model of Lanius 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 scheme.
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.style.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"> </td>
<td class="tpl_headertopright"> </td>
</tr>
</table>
and in template.style.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 Lanius 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 XHTML code and CSS in the "content" module must obviously be, for best result in final layout, coherent with the position of the module.
Logo layout example
The following snippet is used in a "content" module for logo rendering.
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.style.css
.tpl_logo {
background : url(../images/logo.png);
}
