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 Plus (TV) extension. This chapter is a TYPO3 Templavoila Plus 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. At the time of writing (January 2021), TYPO3 versions up to 9.x are supported, but support for future versions cannot be guaranteed.
  • Note to TYPO3 6.x-7.x users: you'll have to use the Templavoila extension for these versions of TYPO3.
  • Note to TYPO3 8.x-9.x users: when using a recent version of TYPO3, you will have to use Templavoila Plus extension.
  • Note to TYPO3 10.x-current users: Templavoila Plus doesn't support the latest TYPO3 versions (yet). Do not try to install the extension. It will break your website.

Basic requirements and recommendations

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!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.