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:
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:
After clicking the body icon, choose "INNER (Exclude tag)" and click on the "Set" button:
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:
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:
After clicking the div icon, choose "INNER (Exclude tag)" and click on the "Set" button:
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:
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":
And you're done!
Finally, to double check your mappings, an overview of the data elements and the mapped divs:
| Data element | Field name | Mapped div id |
|---|---|---|
| Header top left | field_header_top_left | header_top_left |
| Header top right | field_header_top_right | header_top_right |
| Header menu | field_header_menu | header_menu |
| Header image | field_header_image | header_image |
| Breadcrumb | field_breadcrumb | breadcrumb |
| Content menu | field_content_menu | content_menu |
| Content main | field_content_main | content_main |
| Footer left | field_footer_left | footer_left |
| Footer right | field_footer_right | footer_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!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.