Zum Inhalt springen

TYPO3 – easy change from TemplaVoila! to Fluidtemplates

A small step for a coder – a big step for the upgrading possibilities of your website!

TemplaVoila! is outdated long time ago, but still around in some TYPO3 installations. A shift to Fluidtemplates, in combination with Backend-Layouts, seems to be a big hassle, but is indeed not so complicated since the principles are pretty much the same. In both cases we map a content form a backend column into a certain area of a predefined html-template.

How to do it

a. first step

First we must find out which elements in our main template are mapped with TemplaVoila!, therefor we need the extension (including Static-Info-Tables) still in action, before we disable it. Important is, whether it is an „inner“ or an „outer“ mapping. With „inner“ we just replace the inside of the html element with a viewhelper and a variable. If it is an „outer“ mapping, we have to replace the the whole html-element as such with the viewhelper. Example of an „inner“ mapping:
<div id="myMapID"><f:format.raw>{variableLaterInTypoScript}</f:format.raw></div>


templa voila to fuid templates
the path to the mapping – click on (in may case) „ik_TemplaVoila“


templa voila to fluid
„Modify DS /TO“
mouse over element mapping
the mapping – mouse over the html-elements shows their ID-number


templa voila to fluid mouse over
mouse over shows the ID of the element („#headline“)

Next you write down a list of the names of the columns („pageHeaderHeadline, banner …“) and the corresponding element names and Ids. The columns names you then use to create a backend layout with the same name, numbering from „0“ left to the accordant last number on the right. Check your old columns, because not all of the mapped IDs are coming from a column in the backend, some are replaced by „lib“ or „temp“ TypoScript variables. So just create the same column structure as it was with TemplaVoila! After assigning the backend layout to the root page, the first step is done.


b. second step – changes on the main page template

As said before, some of the „markers“ (viewhelpers) are getting their information from a TypoScript variable, like the Menu e.g.

main template fluid
main template fluid

The others are coming from the backend columns.

Now you take your list and replace the html elements on your list, with an viewhelper („<f:format.raw>{yourVariable}</f:format.raw>“). If it is a „inner mapping“ put the viewhelper inside the element.

We also have to delete everything above and including the html body tag. Don’t forget the closing tags at the end!

You have to do these steps very careful, because getting into a wrong element will mess up the whole thing. Work on a copy of the template file!.


c. third step – TypoScript in the root of the website

10 {
     template = FILE
     file = fileadmin/zazu/default/templates/zazu_template.html
     partialRootPath = fileadmin/zazu/default/templates/Partials
     layoutRootPath = fileadmin/zazu/default/templates/Layouts
        variables {
           h1TopSlogan < styles.content.get
           h1TopSlogan.select.where = colPos=0
           rubrikH < styles.content.get
           rubrikH.select.where = colPos=1
           unterNav < lib.field_unternav
           hauptNav < lib.field_hauptnav
           footerNav < lib.field_footernav

The TemplaVoila! TypoScript can be deleted:


10 = USER
10.userFunc = tx_templavoila_pi1>main_page


d. fourth step – move the content

This is easy to do if you work on a copy (or „Staging“ as it called by the provider Mittwald). After you deactivate the „static-info-tables“ and the „templaVoila!“ Extension, all content will be in the „main column“ now you have to move the content elements into their old order. It is no problem if you can switch between an old implementation and the new one to check what was where. Otherwise you have to find the order by yourself or memory. Anyway with such a step you should always work on a copy!


There are probably some extensions doing similar work in a automated process. But who wants to deal with a complicated extension for a small website. In case it is a bigger site of course one should consider to go into something more automated.

Comments and additions are welcome!


Autor: Thomas Hezel

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert