TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

TYPO3 Templavoila tutorial

Templavoila templating engine

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website. From this chapter on, you will learn how to rebuild the TYPO3Buddy website with the TYPO3 CMS and the TemplaVoila (TV) extension. This chapter is a TYPO3 Templavoila tutorial. The Templavoila approach is one of the most flexible and easy to use templating solutions found in the world of CMS.

Before you begin - important notes

  • Note to all: Templavoila's future within the TYPO3 community is uncertain. Its code base is ancient and very hard to maintain. At the time of writing (May 2015), all TYPO3 versions are supported, but support for future versions cannot be guaranteed.
  • Note to TYPO3 4.x users: We recommend to use Templavoila 1.7.0 or earlier versions for TYPO3 4.x.
  • Note to TYPO3 6.0/6.1 users: if you're planning to use Templavoila with TYPO3 6.0 or 6.1, you will have to use Templavoila 1.8.0 or later versions.
  • Note to TYPO3 6.2 users: when using TYPO3 6.2, you will have to use Templavoila 1.9.x. This version is now available through the official TYPO3 Extension Repository (TER)
  • Note to TYPO3 7.x users: when using TYPO3 7.x, you will have to use Templavoila 2.x.x. This version is available through the Extension Repository (TER)

Basic requirements and recommendations

To start with Templavoila, we would highly recommend reading the tutorial "Futuristic Template Building". Minimal requirement to proceed with Templavoila is having set up the basics of your TYPO3 website. You have installed TYPO3 and you are able to log in to the backend. You need to have a basic page structure, a file folder structure and a working typoscript template in the root page. You also need a special page called the Storage folder, where the Templavoila data will be stored. All these things are described in the previous chapter.

When you're ready to start...

Next, the following steps will be documented:

  1. Create an HTML template, which will be styled with an associated css file
  2. Install the (latest) Templavoila extension
  3. Edit the main typoscript template to enable Templavoila
  4. Create the TV template object and data structure
  5. Map the data elements to the html divs
  6. Add the CSS file to the TV template
  7. Set the template design for the root page and all sub pages
  8. Add content to the home page

These are the steps you need to follow when you want to use only one template object. In the steps below, you will create another template object and a flexible content element (FCE).

  1. Create an additional template object and data structure
  2. Create a flexible content element (2 columns)
  3. Add flexible content to the page
  4. Advanced: Edit the Templavoila data structure
The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!