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:
typo3-ahmen-section_frame

Flattr this!

11 Gedanken zu „Rahmen für Inhaltselemente in TYPO3 4.4/4.7 – section_frame“

  1. Hallo!
    Ich versuchte deinen Ansatz, leider ohne Erfolg. Im Backend kann ich die verschiedenen Rahmen auswählen, jedoch wird im Frontend immernoch der standard-frame (csc-default) angzeigt.

    Ich benütze die neuste Typo3 Version 4.4.1. Habe deinen Code 1:1 übernommen, was könnte noch falsch sein?

  2. Jep. In der Version 4.3 machte ich es wie auch du es hier geschrieben hast. Und das neue Typoscript habe ich an die gleiche Stelle eingefügt und das alte rausgelöscht.

  3. vielleicht hilft es den einen oder anderen

    TCEFORM.tt_content {…} gehört in die pageTSConfig

    tt_content.stdWrap {
    innerWrap.cObject = CASE
    innerWrap.cObject {…} gehört in das Setup des Templates

    dann sollte es auch klappen ;)

    gruss

  4. Hi Sven,
    hast Du das mal bei 4.5.3 oder 4.5.4 getestet?
    Ich kann den innerWrap nicht verändern. Es sei denn, ich ändere in direkt in setup.txt von css_styled_content.
    Das verückte:
    im Objectbrowser wird alles korrekt angezeigt. Aber beim rendern passiert nix.

  5. Ich habe typo3 Version 4.5.6 im Einsatz. Die Rahmenbezeichnung wird im BE angezeigt und die std. Einträge habe ich mit removeItems entfernt. Soweit alles ok. Im Frontend geschieht aber gar nichts. Es wird weiterhin der standard Wrap
    der Text…

    angezeigt.

    Gibt es Probleme mit der Version 4.5.6 bei section_frame? Bei http://forge.typo3.org/projects/typo3v4-core/issues habe ich nichts gefunden.

  6. das wurde rausgeschnitten:
    <div class=“csc-default“ id=“c18″>
    <p class=“bodytext“>der Text.. </p>
    </div>

Kommentare sind geschlossen.