Usando o campo “Layout” em elementos de conteúdo

No TYPO3, todos os elementos de conteúdo normal têm um campo “Layout” na guia “Aparência”. Este campo pode ser usado para alterar o layout do elemento de conteúdo. Por exemplo, para adicionar uma classe CSS ao div de envolvimento. Vamos tentar isso abaixo.

Página TSConfig

Primeiro, modificamos a caixa de seleção de layout para os tt_contentelementos.
Neste caso, queremos ser capazes de alterar a cor de fundo do elemento de conteúdo.

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

Aqui, definimos os rótulos a serem usados ​​na caixa seletora e removemos todos os outros rótulos.

Configuração do Typoscript

A próxima coisa a definir é como o campo Layout deve ser usado ao renderizar o frontend.
Dizemos ao TYPO3 para adicionar uma classe ao tt_contentelemento usando a stdWrappropriedade no typoscript.
O seguinte funciona para TYPO3 4.7. No 4.7, o elemento define as classes a serem colocadas no div. Apenas adicionamos um extra (número 40) e definimos que deve depender do valor do campo layout.tt_content.stdWrap.innerWrap.cObject.default.20

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

A única coisa que falta fazer é definir o CSS necessário para dar o resultado que queremos.

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

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