Monday, March 8, 2010

What is Typo3 Templates?

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 Typo3 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.
Example:

… 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:
###BREADCRUMBS###

Main difference between the two is that you can enclose HTML comments inside subparts.

Because Typo3 front end creates HTML headers and tags you should insert subparts to let Typo3 know where your tags are. Your headers would be ignored, and you would use TypoScript to configure all stuff like contents, DOCTYPE etc

… your HTML code goes here along with further subparts/markers…

The HTML template should be prepared so that all resource paths refer to the directories in the file system in which they are stored, relative to the root directory. They should also be accessible from the File > Filelist module (e.g. fileadmin/images/…).

When you are done you can save the file with a tmpl extension and copy it to the server where your Typo3 installation resides.

at Template level we can edit in TSConfig as below

field = subtitle
subparts.HEADING = TEXT
subparts.HEADING.field = subtitle
subparts.CONTENT < styles.content.get
marks.FOOTER = TEXT
marks.FOOTER.value = Copyright notice....
===========================================
2.    Template Auto Parser/Modern Typo3 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.

This plugin can be used to read an HTML file, then automatically insert subpart-markers around parts with certain classes/ID's.
There are these objectives:
    * Allow an CSS based HTML-file including file-references, existing somewhere in fileadmin/.../ to be used directly as template by Typo3.
    * Keeping the original template file totally free of HTML-comments (which some editors might filter out by accident) and totally viewable with all references intact.

following steps are there

Template Creation
Enable the Auto-Parser
                Tell the Auto-Parser where to find your template
                Identify the parts youwant it to work on like header,body
                Identify the Divs you want it to work on
                Show Typo3 where to find things like the CSS & Graphics
                Tell the Auto-parser to generate content
                Configuring the Auto-Parser for main template:
              
Here we define which elements in the HTML that should be wrapped in subpart-comments:
              
elements {

                BODY.all = 1
                BODY.all.subpartMarker = DOCUMENT_BODY
              
                HEAD.all = 1
                HEAD.all.subpartMarker = DOCUMENT_HEADER
                HEAD.rmTagSections = Title
              
                TD.all = 1               
Map these to the Divs you want manged by Typo3

                DIV.id.nav-main = 1
                DIV.id.content = 1
                DIV.id.nav-supp = 1
                DIV.id.nav-announcement = 1
                DIV.id.nav-testimonial = 1
                DIV.id.nav-newsletter = 1
}

===================================
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.

TV Definitions
---------------------
 The 2 main definitions to get used to are Data Structure (DS) and Template Object (TO)

    * The Data Structure (DS) says which fields are linked with the HTML template
    * A Template Object (TO says which HTML Elements are linked to which fields

The Typoscript Template
--------------
we can call Typoscript Template On the root page create by called it TV template, with the following code:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

0 comments:

Post a Comment

Tu comentario será moderado la primera vez que lo hagas al igual que si incluyes enlaces. A partir de ahi no ser necesario si usas los mismos datos y mantienes la cordura. No se publicarán insultos, difamaciones o faltas de respeto hacia los lectores y comentaristas de este blog.