To keep your code ordered and structured (how IT nerds like it), you'll make a separate typoscript template for each part that needs typoscript (header, menus, extensions, etc). You'll also put all your typoscripts in one place. Since the main typoscript template is in the root page, so will your other typoscripts.
In this example you will create a typoscript template that puts an image (the website logo) in the header_top_left section of the HTML template. You could decide to remove this part from the Templavoila data structure and leave the logo as static part of the HTML template. However, changing some typoscript is easier than updating the HTML template (and with it, the Templavoila object template).
Typoscript templates for parts of your website, like the header_top_left part, will be created the same way as the main typoscript template. Click on "List", click on the root page "TYPO3Buddy" and use the green plus icon next to the existing main template element to create a new content element of the template type instantly:
When creating a typoscript sub template, the template title will be in this example "+ Header top". The plus indicates that it's a sub template; an extension of the main template. The "Website title" field will be empty. In the setup part you will put the following lines:
lib.header_top_left = TEXT
lib.header_top_left.value = <a href="/"><img src="/fileadmin/templates/images/logo.png" alt="TYPO3Buddy" style="border:0px;" /></a>
lib.header_top_right = TEXT
lib.header_top_right.value = <!-- your own code -->
You'll end up with this:
Make sure you'll keep the "Setup", "Constants" and "Rootlevel" checkboxes (under the options tab) unchecked. Save the template.
Because this typoscript template will not be loaded automatically for the entire website (unlike the main template), and you'll never really visit the root page because it's a short cut to the home page, you'll have to include the sub template in the main template. To do that, edit your main typoscript template, click on the tab "includes" and include your sub template by clicking on the map icon next to the "Include basis template" box. A window will pop up, you navigate to the root page and click on the "+ Header top" template:
Save the main template. That's it. Clear all caches with the lightning bolt (if you don't have config.no_cache set) and enjoy the result! You might also need to clear the cache of your browser, or press CTRL+F5.
Please note: when using Fluid templating with recent versions of TYPO3, you need to remove unused references to typoscript objects from your template files otherwise the site won't load! Above, only the header_top_left and header_top_right objects have been configured.
Repeat this process for all other parts of the website, that are referenced by Fluid or Templavoila by the typoscript object path:
- The horizontal header menu: header_menu
- The header image: header_image
- The breadcrumb menu: breadcrumb
- The content menu: content_menu (main menu)
- The footer content: footer (menu)
To add multiple sub templates, use the black plus sign in the popup window. This way, the popup window won't close. When finished, your root page will look like this (in the backend of TYPO3, in List mode):
Don't forget to include your typoscript sub templates in the main template. When you've done this, you'll see a 1 appear (indicated in the image above) in the [Ref] column, which means that these records have a reference to another record (in this case the main typoscript template).
When you're finished, clear the cache and refresh your browser. The result will look like this:
And the rest is history...