• Design the page with any editor that can produce (X)HTML.
• It is easiest to set up a fileadmin folder on your PC, with sub folders as appropriate for all the files associated with the template.
• Normally, this design would include elements for the most complex layout you are likely to use on the site, as this makes it easier to produce templates for simpler pages based on sub-sets of the complex page.
• Most sites benefit, for example from having the option on a page-by page basis, to have 3, 2 or 1 column(s) in the main content area, and these can often be mapped from a single (X)HTML master layout file.
• If you are planning to include extensions such as log-in boxes on all pages, or menus you need to add placeholders for them, which are appropriate to the sort of element they are (block elements such as divs for block elements, inline elements such as spans for inline elements)
• If a given area of the page will contain multiple content elements which apply to that page only, you normally only need to define a single element for them.
• Upload the files to the fileadmin folder on your site, which is accessed through the Filelist plugin. (or use ftp or any other means)
• Within the TemplaVoila interface (Accessed from Web<TemplaVoila), you indicate which area/element of the page is designed for which kind of content using a point and click interface.
• As you do this you define what sort of variable content should be included in each section of the page, and then, as appropriate, define that element to be replaced with content elements from the back-end, or insert references to typoscript or other objects.
• Anything not included in the abstracted areas appears unchanged when the template is displayed
• You can add additional fields for elements which do not appear in the current template, and which may be needed later, without mapping them to the HTML template.
• You also indicate which elements from the header area of the page should be included with the template, and which should be excluded.

What the system then does

The system then breaks the page down into a Data Structure (DS), and a Template Object (TO).

The Data Structure

The Data Structure is an abstract list of potential page elements, and does not in itself contain any spatial information. Rather it links what might appear on a page to the code which would be used to generate it.

Template objects

A template object connects the Data Structure to elements in an HTML file, thus connecting abstract data elements to positions on a visible page, within which they are embedded.

A single data structure can be referred to by many template objects, each of which can refer to a different HTML template file, within which the same data elements may be differently spatially organised, and embedded in a different containing design.

The HTML template itself is not modified by the process of mapping: the information, including HTML code which defines the overall look of the page is included in the Template Object. For this reason, you can re-edit the HTML template at will and upload the revised file.

The revisions do not change the appearance of the site unless and until you remap the template object.

How they relate 

The Data Structure provides the connections between the various content elements of your pages and the underlying system, its database, and other files.

Each template object surrounds these content elements with the HTML necessary to display a page.

The HTML templates determines the basic layout.

Why do it this way? 

TemplaVoila! provides a three-level model for site construction that separates page layout from page content and page configuration, making it much easier for the various people, each with their own skills, that normally interact to produce a website, to concentrate on their own area of expertise, without needing to worry about what the other is doing.

Because of this separation, it is much easier:

• to provide a site with a variety of different designs
• to provide variations of the same design, modifying numbers of columns or navigation layout, for example, to deal with the different functions of different pages or sections
• to modify a single part of the system without having to change the rest
• to upgrade the design of a section or the whole site without having to rewrite the content of the site

Flexible Content Elements

Templa Voila is not limited to working with whole pages. You can also use it to abstract what are called  Flexible Content Elements: effectively templates for parts of pages, which can combine arbitrary collections of other content elements.

These have their own Data Structures and Template Objects, independent of the page Template Object and Data Structure.

This allows you to combine a number of content types that you want to go together in more-or-less complex layouts, and also to provide libraries of alternative sub-layouts for parts of pages - for example, to alternate one and two columns in the vertical layout of the page.

Most of the content type options described below apply more to flexible content elements than to page templates, and by using them you can build up complex repeating layouts independent of extensions.

• Manual
• Futuristic Template Building
• News Group

Implementation Notes

• It is important to follow the "Futuristic Template Building" Tutorial when you first use TemplaVoila! You can easily apply it to your own HTML template.
• While you can extend a data structure if you need to, it is a good idea to avoid this happening. Before you design your HTML template, think about how many things you may need to include in your pages, and make sure there is a place for all of them that may relate to that particular layout.
• While you are doing the initial mapping, add any additional elements which do not apply to the HTML template but may be used later, without mapping them.
• When mapping, using the inside setting puts the mapped element inside the defined container, while leaving the container in place. This is normally what you want. If you use the outside setting, the mapped element needs to have an appropriate container.
• The content type options are not well described in the manual. They are as follows:
  • Plain input Field
    Input field for single line of text.
  • Header Field
    Field for a heading. The heading is automatically placed in the same horizontal position as the Left Field, if this is present.
  • Graphic Header Field
    Like the header Field, but to contain a graphic.
  • Text AREA for bodytext
    An input area to contain several lines of body text. The text cannot be formatted in any other way
  • Rich text editor
    The RTE is made available, providing comprehensive facilities for producing formatted text combined with graphics.
  • Link field
    Used to enter a URL to link to an internal or external page
  • Integer VALUE
    User entered numeric value: could be inserted in a table cell, for example, for the editor to add the relevant value.
  • Image field
    A diagram or a picture.
  • Image field, fixed W+H
    A diagram or a picture with given dimensions. The image is automatically resized.
  • Content elements
    The most common type of field. As many as required of available content elements, including installed front-end plugins, can be inserted.
  • Selector box
    A selection box, providing options from which the editor selects one. The options are defined directly in the XML source code of the data structure.
  • [NONE]
    Inserts nothing. It is useful if you need to modify an existing element so that its traces do not appear on the page.
  • TypoScript Object Path
    The content will be generated by a TypoScript library which you define in the Typoscript template of the site. It is used for menus and all elements which are not controlled by the editor, and should appear on all pages or all pages where the flexible content element appears.

Extensions of the Extension

This link opens a window to a search of TYPO3.org which contains a list of extensions which mention templavoila!, and most of which extend its functionality.

Before installing such extensions, be aware of their development status, and  also check that the function you want has not already been added to the main package.

TYPO3 templates are historically built up using large amounts of typoscript.

There is in fact no need to use anything else for your template, since typoscript can be configured to generate almost any HTML.

Typoscript has tended to be the most difficult part of TYPO3, and hundreds of lines of code may be needed to output a page. The tendency has been for the amount of user-generated typoscript to be reduced as far as possible by:

• Including static templates, which are chunks of typoscript code which is prewritten, associated with constants which are set by the user.
• Moving the typoscript into extensions, and configuring it using flexforms associated with the extension.
• Using an HTML file as the backbone of the page, rather than building up the HTML file using typoscript, then using typoscript to inject the variable content into the page. This has the disadvantage that the HTML for the page has to be written with markers and hidden comments which makes it difficult to assess how it will look in advance.

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.

The Template Auto Parser Documentation is here, and the associated tutorial Modern Template Building here.

You can, of course, design your own template, or get it custom-designed by someone else. Both processes can be very expensive - the one in money, and the other in time.

You may even have a template you have had designed for an earlier incarnation of your site.

Any of these can be pressed into service as your site template, using templavoila!

Alternatively, there are many companies that produce site design templates for sale, and these can provide a quick way in to having your site up and running

Examples of such companies are:

• Template Monster
• Design Load- a subscription service
• OSWD - a collection of open source templates using CSS layout
• Basic Google Search

Evaluating Templates

Most commercial templates are designed for static sites, and this can make it difficult to use them with a CMS. In particular, beware menu structures which cannot grow - you may easily want to add another section, and you will not be able to do so if the main menu area is full and cannot be expanded.

Ideally, you need templates which use CSS-based layouts, rather than tables.

YAML

As a sort of half-way house in template design, YAML provides a CSS-based framework for producing multi-column layouts, an extension of which takes the form of a TYPO3 site, with many of the most common extensions preconfigured.

The intention of this is not to provide a template in itself, but rather to simplify considerably the process of creating multi-column websites using CSS-based layouts.