TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

TYPO3 Fluid: Update your typoscript "Main template" to use the layout

The layout you've just created will be used by the Fluid templating engine to render your website. Furthermore you have introduced partials. Therefore you have to configure the layouts and partials file paths. Moreover, Fluid still uses your "one content column with side menu" template instead of your layout to render the website. You will need to replace the typoscript in the "Main template" with this:

config.no_cache = 1
config.doctype = html5

page = PAGE
page.typeNum = 0

page.10 {
    format = html
    file = fileadmin/templates/layouts/main_layout.html
    partialRootPath = fileadmin/templates/partials/
    layoutRootPath = fileadmin/templates/layouts/
    variables {
        content_main < styles.content.get
        content_main.select.where = colPos = 0

Please note that the file property now points to main_layout.html. As your layout does not contain any content variables (such as content_main, which is in your template file), you will have to assign your content template to your backend layout by adding the following code to your typoscript "Main template":

page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
    default = TEXT
    default.value = fileadmin/templates/main_1_column_with_menu.html

As you only have one content template right now, setting the default is sufficient.
Also, now is a good time to add your CSS file to your website. To make it look like something. Make sure the TYPO3Buddy CSS file is saved in your fileadmin/templates/css folder and add the following code to your typoscript "Main template":

page.includeCSS {
    file1 = fileadmin/templates/css/main.css

The setup part of your typoscript "Main template" will end up like this:

TYPO3 Fluid tutorial: Typoscript use layout and templates - TYPO3Buddy website tutorial

Save it. Clear the cache if necessary and refresh your browser window with CTRL+F5. You should see something like this, where the content part should look like the text you've entered into TYPO3 here:

TYPO3 Fluid tutorial: first result

That's more like it! Still, only the Home page with its content is visible. You can skip the rest of this chapter and start with the Typoscript part if you want to fill the website with other content, such as menus, header and footer content. Or you can add two more content templates and make sure you can select them in the TYPO3 backend.

Please note: when using TYPO3 v10, loading the website will result in an error. To see a website like the screenshot, you (temporarily) need to remove all lines that refer to a typoscript object (i.e. <f:cObject ...>). Or leave them there and continue with the tutorial.

Next step: create additional Fluid content templates ->

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.