TYPO3: Rahmen und Layout Feld in Inhaltselementen nutzen

In TYPO3 gibt es zur Gestaltung von einzelnen Inhaltselementen diverse Felder meisten nutzt man hierfür die layout und section_frame Auswahlbox. So können hier beliebig viele und neue Elemente hinzugefügt werden. Was allerdings etwas umständlicher ist, ist nachher anhand der Felderauswahl die CSS-Klassen auszugeben. Für die bereits im Standard enthaltenen Felder steht bereits Typoscript zur Verfügung, für neue muss man manuell Hand anlegen.

Neue Elemente hinzufügen

Zum Erweitern der List mit Elemente muss das folgende Typoscript in die TSConfig in die Seite (meisten Rootseite) eingebunden werden. Die IDs müssen wir uns merken, da hiermit eventuelle CSS Klassen verknüpft werden können.

#layout Feld
TCEFORM.tt_content.layout.addItems.21 = List1
 
#section_frame
TCEFORM.tt_content.section_frame {
  addItems.100 = hidden box
  addItems.101 = toogle-box open  
}

Die übliche Methode

Das Objekt tt_content.stdWrap.innerWrap.cObject.default enthält einige default Werte und wraps, um jedes Inhaltselemente mit einem div tag und css Klassen zu versehen. So wird immer csc-default ins class tag gelegt. Diesen Wert kann man durch erweitern von tt_content.stdWrap.innerWrap.cObject anhand der gesetzten ID ersetzt z.B. toggle-box. Bei neuen Elemente muss dieses sogar gemacht werden, sonst wird immer der default also quasi ID=0 genutzt.

tt_content.stdWrap {
 innerWrap.cObject = CASE
 innerWrap.cObject {
  100 = tt_content.stdWrap.innerWrap.cObject.default
  100.15.value = toggle-box
 }
}

Global Klassen tags anhand ID für jedes Element

Für mich ist es viel zu umständlich jedes neue Elemente einzeln mittels der ID zu wrap und viel zu unflexible wenn man auch andere Felder einbinden will, wie z.B. das layout. Durch die einfache Nutzung von insertData innerhalb von tt_content.stdWrap.innerWrap.cObject.default, kann man jedes Elementfeld einfach innerhalb des "Class-Tags" nutzen. Das ganze ist dann für alle Felder gültig, soviel für die Standard als auch die neue Felder gültig. Zusätzlich können natürlich auch wieder eigene CSS Selektoren an die Klassen an gehangen werden, dazu einfach mittels appendString weitere Strings einer bestimmten ID zuordnen.

tt_content.stdWrap.innerWrap.cObject.default.15.value = csc-default csc-layout-{field:layout} csc-frame-{field:section_frame}
tt_content.stdWrap.innerWrap.cObject.default.15.insertData = 1
 
# also add a costom class this in typoscript template
tt_content.stdWrap.innerWrap.cObject {
  100 < tt_content.stdWrap.innerWrap.cObject.default
  100.15.value := appendString( toggle-box)
 
  101 < tt_content.stdWrap.innerWrap.cObject.default
  101.15.value := appendString( toggle-box open)  
}