The so-called template (TYPO3 template) is the heart of a CMS website. It consists of several files (HTML, CSS, images) to determine the basic structure and layout of the page. It will put special markings, which are later filled automatically by the CMS with the appropriate content. The overall visual appearance of an Internet presence can be defined in a single static template and thus guarantees a uniform build. Of course, but can if required also for different areas (eg pages of a presence, various templates) are created. Suppose you are planning an online magazine for different sports, for example, can the rubric of “Winter” a completely different layout and color system to get than the rubric of “Water”.
We can create TYPO3 templates from
• New Design to TYPO3 templates
• PSD, AI or any other source design file to typo3 templates
• HTML templates to TYPO3 templates
There are many methods to implement template.
1. Standard Typo3 Templates
2. Auto Parser Typo3 templates
3. TemplaVoila Typo3 templates
1. Traditional Templating
Defining the areas in your template whose contents or functionalities are to be dynamically replaced by your content inputted into Typo3 back end. To let TYPO3 know what parts of your template to replace you have to include special placeholders in the HTML template. Two types of placeholders are available for this: subparts and markers.
Subparts are used in pairs to enclose sections of the HTML template that are replaced by the output of your TypoScript configuration.
The name of the subpart is enclosed by ### and subpart name is case sensitive.
… This text would be replaced by Typo3…
Markers are enclosed by ###, they are used as single tags and distinction is made between upper and lower case. Example:
Main difference between the two is that you can enclose HTML comments inside subparts.
2. Template Auto Parser/Modern Template Building
The modern approach to template building is to keep the site design separate from the site engineering. This is epitomised in templavoila. A slightly earlier and more restrictive approach, which many users nevertheless advocate, is provided by the Template Auto Parser.
TYPO3 provides four page divisions which (if turned on) are traditionally configured separately and processed in order to generate a main, left, right and border “columns” for the page template.
The template auto parser removes the spatial relationships between these elements, and attaches them instead to ids in the HTML template. In this way, at least four variable content areas can be defined in any HTML page, without disrupting the HTML layout.
As with templavoila, the content elements can be anywhere on the page; the key limitation is that, without hassle, only four such areas are available for the page, and this may not be enough. However, the HTML template can be designed with dummy content, enabling the work of the page designer to be separated from that of the site engineer.
3. Templavoila typo3 template
TemplaVoila is an extremely powerful templating engine for typo3. With it you can use virtually any html page(s) as the basis of the template(s) for your site, and change the template of any given page and its descendents very easily.
In particular the problems that TemplaVoila addresses are how to create more flexible page structures than currently known in TYPO3s concept of “columns”. Further, it integrates traditional templating on the content element level but with a far more flexible point-n-click style than seen before.