Uso del campo “Diseño” en elementos de contenido

En TYPO3, todos los elementos de contenido normal tienen un campo “Diseño” en la pestaña “Apariencia”. Este campo se puede utilizar para cambiar el diseño del elemento de contenido. Por ejemplo, para agregar una clase CSS al envoltorio div. Intentaremos esto a continuación.

Página TSConfig

Primero modificamos el cuadro de selección de Diseño para tt_contentelementos.
En este caso, queremos poder cambiar el color del fondo del elemento de contenido.

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

Aquí configuramos las etiquetas que se utilizarán en el cuadro de selección y eliminamos todas las demás etiquetas.

Configuración de tipografía

Lo siguiente que hay que definir es cómo se debe usar el campo Diseño al renderizar la interfaz.
Le decimos a TYPO3 que agregue una clase al tt_contentelemento usando la stdWrappropiedad en tipografía.
Lo siguiente funciona para TYPO3 4.7. En 4.7, el elemento define las clases que se colocarán en el div. Simplemente agregamos un extra (número 40) y definimos que debería depender del valor del campo de diseño.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

Lo único que queda por hacer es definir el CSS necesario para dar el resultado que queremos.

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

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