TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

TYPO3 Templavoila Plus tutorial

Templavoila Plus 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 TYPO3 6.x-7.x users: you'll have to use the Templavoila extension for these versions of TYPO3.
  • Note to TYPO3 8.x-12.x users: when using a recent version of TYPO3, you will have to use Templavoila Plus extension.
  • Note to all: Allthough Templavoila is an external project and not maintained by TYPO3's core team, it keeps being updated for the latest versions of TYPO3. However, support for future versions of TYPO3 cannot be fully guaranteed. This Templavoila tutorial has been tested up until TYPO3 v9. If you think this tutorial needs to be updated for TYPO3 v10 or later, please let me know.

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.