# Frontendlayouts

## Basic Informations <a href="#basic-informations" id="basic-informations"></a>

You can select a Frontendlayout in the TYPO3 backend when you edit a Page. („Apperiance“ Tab)

### PageTS <a href="#pagets" id="pagets"></a>

{% code lineNumbers="true" %}

```typoscript
# Frontendlayouts 
TCEFORM.tt_content {
    layout{
        addItems {
            100 = Background Red
            101 = Background Gray
        }
        altLabels{
            100 = Background Red
            101 = Background Gray
        }
    }
}
```

{% endcode %}

### SetupTS <a href="#setupts" id="setupts"></a>

{% code lineNumbers="true" %}

```typoscript
# Frontendlayouts (Wraps)
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
    key.field = layout
    100 = TEXT
    100.value = <div class="red-bg">|</div>
    101 = TEXT
    101.value = <div class="graydark-bg">|</div>
}
```

{% endcode %}

### Fluid/HTML <a href="#fluidhtml" id="fluidhtml"></a>

{% code lineNumbers="true" %}

```html
<f:if condition="{data.layout} == 101">
    <f:then>
        Markup für das bestimmte Frontendlayout
    </f:then>
    <f:else>
        Standardmarkup
    </f:else>
</f:if>
```

{% endcode %}