TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

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

To make your content templates selectable in the backend, you can link them to the corresponding backend layout. Therefore you need to edit your typoscript "Main Template" once more. Furthermore, you have introduced two new Fluid variables in the 2 column template; content_column_1 and content_column_2. TYPO3 needs to know about those, too. So they have to be configured. Update your typoscript "Main template" until it looks like 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
        content_column_1 < styles.content.get
        content_column_1.select.where = colPos = 1
        content_column_2 < styles.content.get
        content_column_2.select.where = colPos = 2

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
    1 = TEXT
    1.value = fileadmin/templates/main_1_column_with_menu.html
    2 = TEXT
    2.value = fileadmin/templates/main_1_column_without_menu.html
    3 = TEXT
    3.value = fileadmin/templates/main_2_column_without_menu.html

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

Take a good look at what parts have been updated, and what their function could be. You'll end up with this:

TYPO3 Fluid tutorial: Necessary Typoscript for Fluid - TYPO3Buddy website tutorial

Save your typoscript! Please note that the follow-up numbers indicated in the screenshot above, need to correspond with the IDs of the backend layouts you've created. To find out the ID of a backend layout, click on list, click on "Storage folder" and then hover with your mouse on the icon of the backend layout element:

TYPO3 Find out backend layout ID - TYPO3Buddy website tutorial

The ID should popup in a second. You can also edit the backend layout by clicking the pencil. The content type with its ID shows in the right bottom corner of the edit window and will look like "Backend Layout [1]", where the number is the ID. Check this. When you have deleted a backend layout, or created them in another order, the numbering will be different for you!

Next step: assign the backend layouts to the pages ->

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.