TYPO3Buddy
TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter
menu

Templavoila: Map the root and data elements to the HTML template

We'll start where we left off in the previous step, where all data elements were created. When mapping (linking) the elements to the HTML template, you always have to start with the root data element. This will be the body of your HTML template and the main container for the Templavoila data structure. Click on the "Map" button:

TYPO3 Templavoila map data elements - TYPO3Buddy website tutorial

After clicking on the "Map" button, your template will appear. As you probably can see, Templavoila doesn't handle the presentation of floating elements very well, so most of the time it's better to change the Mode from "Exploded Visual" to "HTML Source". After that, click on the "body" icon:

TYPO3 Templavoila Mode HTML Source - TYPO3Buddy website tutorial

After clicking the body icon, choose "INNER (Exclude tag)" and click on the "Set" button:

TYPO3 Templavoila Map Set inner - TYPO3Buddy website tutorial

As TYPO3 will generate the body tag, you don't need Templavoila to copy it from your HTML template. Therefore you've selected "INNER (exclude tag)". When you've hit the "Set" button, "Map" buttons will appear behind every data element. You'll start with mapping the "Header top left" data element:

TYPO3 Templavoila map data elements - TYPO3Buddy website tutorial

After clicking on the "Map" icon for the "Header top left" data element, click on the corresponding div icon. Hover on it to see what the ID of the div is. Obviously, you look for "header_top_left". Click on that div icon:

TYPO3 Templavoila map data elements - TYPO3Buddy website tutorial

After clicking the div icon, choose "INNER (Exclude tag)" and click on the "Set" button:

TYPO3 Templavoila Map Set inner - TYPO3Buddy website tutorial

Repeat these steps for all other data elements until you've mapped them all and you see the following result, where you'll click on the "Save as" button:

TYPO3 Templavoila save data structure - TYPO3Buddy website tutorial

The following screen will appear. Give your template a title. In this case it's the main template, so you can call it "Main template". After that, click on "CREATE DS/TO":

TYPO3 Templavoila create DS/TO - TYPO3Buddy website tutorial

And you're done!

Finally, to double check your mappings, an overview of the data elements and the mapped divs:

Data elementField nameMapped div id
Header top leftfield_header_top_leftheader_top_left
Header top rightfield_header_top_rightheader_top_right
Header menufield_header_menuheader_menu
Header imagefield_header_imageheader_image
Breadcrumbfield_breadcrumbbreadcrumb
Content menufield_content_menucontent_menu
Content mainfield_content_maincontent_main
Footer leftfield_footer_leftfooter_left
Footer rightfield_footer_rightfooter_right

Please note: field names and div ids do not need to be the same. However, it is good practice to be consistent in giving names.

Next step: add the CSS file to the Templavoila template object ->

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!