HowTo: Content Element Layout bei TYPO3
Für einen aktuellen Auftrag war es nötig, bestimmt Content Elements anders zu gestalten. Es sollte eine blau hinterlegte Box mit gelber Headline dargestellt werden:
Was liegt also näher, als das Feld "Layout" im Content Element zu nutzen? Von Haus aus haben die Einstellungen dort allerdings keinerlei Effekt. Wir müssen also selber Hand anlegen.
Es gibt einige Artikel im Netz, die zeigen, wie man unterschiedliche Layouts darstellen kann. Eigentlich alle Artikel nutzen dafür die Einstellungen des Rahmen-Layouts. Aber warum soll ich denn das Rahmen-Layout ändern, wenn ich doch das Layout des gesamten Content Elements anpassen möchte? Außerdem waren viele Tipps ziemlich kompliziert.
Es geht aber auch einfach:
Hier jetzt also das Content Element Layout HowTo!
1. Page-TSconfig anpassen
Mit "altLabels" wird der Text definiert, der im BackEnd im Auswahl-Dropdown angezeigt werden soll. Und mit "removeItems" werden alle anderen Texte aus dem Dropdown entfernt. Das erhöht die Übersichtlichkeit.
Jetzt können wir die beiden Layouts "Normal" und "Special" schon auswählen. Aber es ändert sich noch nichts im FrontEnd:
2. TypoScript-Template anpassen
Mit diesem kleinen TypoScript checken wir, welcher Wert im Feld "Layout" steht. Bei Wert "1" greift dann das Script und es werden die beiden CSS-Klassen "csc-default" und "special-content" dem DIV hinzugefügt.
Über den TypoScript-Object-Browser könnt ihr übrigens herausfinden, dass hinter der Zahl 15 die CSS-Klassen definiert werden.
Alles, was man jetzt noch machen muss, ist, für die CSS-Klasse "special-content" das benötigte CSS zu schreiben.
Et voilà: Ihr habt jetzt ein anders gestaltetes Content Element!