Rahmen für Inhaltselemente in TYPO3 4.4/4.7 – section_frame

Update 2012 – für TYPO3 4.7

Mit erscheinen der Version 4.7 wurde die Anordnung der CSC-Default Anweisung im css_styled_content verändert. Eine zusätzliche Klasse zu csc-default fügt man nun wie folgt hinzu:

tt_content.stdWrap {
 innerWrap.cObject {
  default.20.10.value = csc-default neue-klasse
 }
}

Weitere Rahmen/Layouts (section_frames) werden in TYPO3 4.7 wie folgt hinzugefügt.

tt_content.stdWrap {
 innerWrap.cObject = CASE
 innerWrap.cObject {
  31 =< tt_content.stdWrap.innerWrap.cObject.default
  31.20.10.value = block
  31.30.cObject.default.value = ><div class="block-inner blue">|</div></div>
  32 =< tt_content.stdWrap.innerWrap.cObject.default
  32.20.10.value = block
  32.30.cObject.default.value = ><div class="block-inner green">|</div></div>
  33 =< tt_content.stdWrap.innerWrap.cObject.default
  33.20.10.value = block
  33.30.cObject.default.value = ><div class="block-inner teaser blue">|</div></div>
  34 =< tt_content.stdWrap.innerWrap.cObject.default
  34.20.10.value = block
  34.30.cObject.default.value = ><div class="block-inner teaser green">|</div></div>
 }
}

Bisheriger Artikel – für TYPO3 4.4-4.6

Das eine oder andere Design gibt es vor, dass Inhaltselemente wie Text mit Bild oder eine Erweiterung ein anderes Aussehen als der übliche Inhalt erhalten sollen. Dazu kann man die in jedem Inhaltsobjekt enthaltene Auswahlbox Rahmen verwenden. Wer diese Funktion bereits mit TYPO3 4.2 oder vorher verwendet hat, die Inhaltselemente in DIV-Containern mit der CSS-Klasse „csc-default“ gewrappt sind.

In Version 4.2 konnte man bisher mit

tt_content.stdWrap {
 innerWrap.cObject {
  # Rahmen 20 überschreiben (csc-frame csc-frame-frame1)
  20.value = <div class="box"><div class="box-inner">|</div></div>
 }
}

ein Element mit einer DIV-Klasse umrahmen und per CSS stylen.

Durch die Einführung der Standard-Klasse „csc-default“ in TYPO3 4.3 wird nun jedes Element automatisch gewrappt. Diese Klasse kann man mit folgendermaßen erweitern, um ein anderes Aussehen zuzuweisen:

tt_content.stdWrap {
 innerWrap.cObject {
  default.15.value = csc-default neue-klasse
 }
}

Möchte man neue Rahmen anlegen, die nicht die Standardklasse verwenden, empfehle ich folgende Lösung. Hier wird die CSS-Klasse „csc-default“ durch „block“ ersetzt und zusätzlich ein DIV-Block mit der Klasse „block-inner“ und eine Farb-Klasse eingefügt.

tt_content.stdWrap {
 innerWrap.cObject = CASE
 innerWrap.cObject {
  31 =< tt_content.stdWrap.innerWrap.cObject.default
  31.15.value = block
  31.30.value = ><div class="block-inner blue">|</div></div>
  32 =< tt_content.stdWrap.innerWrap.cObject.default
  32.15.value = block
  32.30.value = ><div class="block-inner green">|</div></div>
  33 =< tt_content.stdWrap.innerWrap.cObject.default
  33.15.value = block
  33.30.value = ><div class="block-inner teaser blue">|</div></div>
  34 =< tt_content.stdWrap.innerWrap.cObject.default
  34.15.value = block
  34.30.value = ><div class="block-inner teaser green">|</div></div>
 }
}

Neue Rahmen hinzufügen (in TYPO3 bekannt machen)

Wenn nicht ein bestehender Rahmen in TYPO3 verwendet werden soll, empfehle ich, die Deaktivierung aller vorhandenen. Folgendes ins Page-TSConfig der Rootseite schreiben:

TCEFORM.tt_content {
 section_frame.removeItems = 1,5,6,10,11,12,20,21
 section_frame.altLabels.0 = Bitte wählen Sie Ihr Layout
}

Jetzt fügen Sie die neuen Rahmen hinzu:

TCEFORM.tt_content {
 section_frame.removeItems = 1,5,6,10,11,12,20,21
 section_frame.altLabels.0 = Bitte wählen Sie Ihr Layout
 section_frame.addItems.31 = Box Blau
 section_frame.addItems.32 = Box Grün
 section_frame.addItems.33 = Box Teaser Blau
 section_frame.addItems.34 = Box Teaser Grün
}

Im TYPO3-Backend sieht das die Auswahlbox für die section_frame dann so aus: