Development/Template creation (table-less)
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.
Creating a template in a few steps
- Make copy and rename an existing template folder (ex. waverebirth)
- Open templatename/template.xml file: change <id />, <name />, <creationDate />, <author /> etc. (see XML formats/Templates) tags (i.e. <id>templatename</id> , <name>Template name</name>)
- Edit templatename/template.style.css file
- Edit/Add css class in "Template Design Class" section to create/personalize new schema:
- Main Blocks - Property of the primary DIV blocks (Container,Header,Pathway,Middle,Footer);
- Box Positions - Property of the DIV blocks nested in Main Blocks (like for example div#logo, div#banner, div#user1 etc.) *
- Edit/Add css class in "Generic Class" and "Global Lanius Class" for more customizations
- Edit/Add, if necessary, css class of the components/modules/drabots locate in respective folders.
- = you can easily see the exact position of the block at runtime by uncommenting the property "border:dotted 3px;" in each div class
NOTE: you should edit/add resources in the templatename/images directory accordingly with your CSS specifications.
Example structure
The following example shows the structure of a template in its 3 main DIV which contain nested child DIV block , which finally contain the PHP code blocks.
| Container DIV block | Main container, determines the template size in the browser window; can be set as fixed or variable width |
| Header, Middle, Footer DIV blocks | Main blocks, container of Box Positions blocks |
| Misc. DIV block | Box Positions, container of PHP code blocks |
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 Lanius CMS classes
Classes which handle shared module/component properties.
Example for assigning properties to module headers:
.dk_module .dk_header h3 {
width: 100%; padding:3px 0px 3px 0px; margin: 0;
font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
font-size : 11px;background-image : url(images/header.jpg); ...
}
Example for assigning padding to components:
.dk_component .dk_content {
padding : 3px 0px 3px 0px;
}
Template Design classes
Classes which handle design properties.
Example for assigning position to banner module:
div#bannerbox{
position:absolute;top:0px;right:3px;text-align:right;
}
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.
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
#leftbox a.menu_mainlevel {
text-decoration: none;
text-align:left;
padding:5px 0px 5px 30px;
color:#000000;
background : url(../images/boff.png) ;
}
...
Example for drabots
templatename/drabots/dravote.style.css
Classes for handling drabot vote
.dkbot_content_rating {
font-size : 10px;
color : #CC9900;
}
