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_content
elementos.
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_content
elemento usando a stdWrap
propriedade 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;
}