Using the "Layout" field on content elements

In TYPO3 all normal content elements has a "Layout" field on the "Appearance" tab. This field can be used to change the layout of the content element. For example to add a CSS class to the wrapping div. We will try this below.

Page TSConfig

First we modify the Layout selector box for tt_content elements.
In this case we want to be able to change the color of the background of content element.

TCEFORM.tt_content {
    layout {
        altLabels {
            1 = Green background
            2 = Blue background
        }
        removeItems = 3,4,5,6,7,9,10
    }
}

Here we set the labels to be used in the selector box, and remove all other labels.

Typoscript setup

The next thing to define is how the Layout field should be used when rendering the frontend.
We tell TYPO3 to add a class to the tt_content element using the stdWrap property in typoscript.
The following works for TYPO3 4.7. In 4.7 the element tt_content.stdWrap.innerWrap.cObject.default.20
defines the classes to put on the div. We just add an extra (number 40) and define that it should depend on the
value of the layout field.

tt_content.stdWrap.innerWrap.cObject.default.20.40 = CASE
tt_content.stdWrap.innerWrap.cObject.default.20.40 {
    key.field = layout

    1 = TEXT
    1.value = fce-pagediv-green

    2 = TEXT
    2.value = fce-pagediv-blue
}

CSS

The only thing left to do is to define the CSS needed to give the result we want.

.fce-pagediv-green {
    background: green;
}

.fce-pagediv-blue {
    background: blue;
}