TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

Templavoila: Create an additional template object and data structure

In this step you will create an additional template object and data structure. It will be a "1 column wihout menu" template. You can use this template when you need the full width of your website for content. Your new template will be based on the existing "Main template" template. Click on Templavoila, then on the Storage folder, then, if necessary, on the Page templates tab and finally on the "Update mapping" button:

TYPO3 Templavoila Update mapping - TYPO3Buddy website tutorial

In the next screen, click on the "Information" tab and click on the "Modify DS/TO" button:

TYPO3 Templavoila Modify DS/TO - TYPO3 website tutorial

A warning message shows, saying that editing the DS/TO this way may remove any manual changes. Since you haven't done that, it's safe to click "OK".

Be aware that at this moment you are editing the existing Main template object, indicated by the red rectangle in the screen shot below! To make sure that you don't overwrite the main template, make a copy of it immediately by clicking the "Save as" button:

TYPO3 Templavoila Save new template - TYPO3 Template tutorial

You have seen this before. This time, the title of DS/TO will be "Main template without menu", Template type will be "Page template", it will again be stored in the Storage folder. Then click on the "CREATE DS/TO" button:

TYPO3 Templavoila save data structure - TYPO3Buddy website tutorial

You will return to the previous overview. As you will see, the template object at the top now indicates you're editing the "Main template without menu" template. As the title suggests, this template won't have a menu in the content part of the website, so you will delete the Content menu by clicking the corresponding trash can icon:

TYPO3 Templavoila remove data element - TYPO3 template tutorial

Click "OK" when you're asked if you're sure you want to delete this data structure entry. Are you sure? Is it the "Content menu" entry? Good. Next, you will have to remap the "Content main" element, to make sure the "content_menu" div won't be included by the Templavoila engine. Click on the "Remap" button of the "Content main" element:

TYPO3 Templavoila remap data element - TYPO3 website tutorial

Make sure you're in "HTML Source" mode, search for the "content" div and click on its corresponding div button:

TYPO3 Templavoila map data elements - TYPO3Buddy website tutorial

And click the "Set" button:

TYPO3 Templavoila Map Set inner - TYPO3 website tutorial

And finally, click the "Save and exit" button:

TYPO3 Templavoila save and exit - TYPO3 template tutorial

You'll see the new template appearing in the template overview. Next, you'll need to make sure that the "1 column without menu" page and the "2 columns without menu" page will use your new template, by right clicking the page icon in the page tree and choosing edit:

TYPO3 Templavoila controle center - TYPO3Buddy website tutorial

Click the "Appearance" tab and choose your new template at the "Use template design" part:

TYPO3 Set Templavoila template for one page - TYPO3 template tutorial

Save your changes. Do the same thing for the "2 columns without menu" page. This page won't have 2 columns yet, it will just have the same layout as the "1 column without menu" page. You're going to make a special template for the 2 columns, called "flexible content element". You will be able to use this element anywhere on the website! That's great. So let's continue making this flexible content element. And add content to the new layed out pages after that.

Please note that there are other ways to get rid of the content menu. You can create an additional CSS file, which makes the content_menu div hidden and the content_main div as wide as the website. You then can include this CSS file with typoscript for certain pages (with the PIDinRootline condition, for example), or include the CSS file with your new Templavoila template object (as described here), which will just be a copy of the existing template object.

Next step: create a 2 column flexible content element ->

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.