Überschriften in CE's modifizieren und anpassen
in Snippets/Tutorials/TypoScriptDie Standard Typbezeichnung für Überschriften (Standard, Layout1, Layout2, ...) sind für die meisten Redakteure mehr als unpraktisch. Auch für gestalterische Aufgaben sind die CSS Klassen, welche bei der Überschriften vergeben meist nicht zu gebrauchen. Die kann aber mit ein wenig TypoScript angepasst werden.
Um die Beschriftung für das Backend zu ändern, muss man in die Seiteneigenschaften der Root-Seite gehen und dort unter dem Reiter Ressources im Feld TypoScript Configuration - Page TSConfig folgendes Snippet einbauen:
- TCEFORM.tt_content.header_layout {
- altLabels {
- 1 = Content H1
- 2 = Content H2
- 3 = Content H3
- 4 = Rechte/ Linke Spalte H1
- 5 = Rechte/ Linke Spalte H2
- }
- addItems {
- 6 = Verstecken
- 11 = Spalte NEW H2
- }
- removeItems = 7,8,9,10,20,100
- }
Der Abschnitt altLabels ändert die Beschriftung der Überschriften und mit addItems könnt ihr weitere Überschriften definieren. removeItems hingegen entfernt Überschriften die ihr nicht mehr braucht.
Nun muss noch im Typoscript definiert werden was mit den Überschriften passieren soll. Dazu muss im TypoScript Setup das folgende Snippet eingebunden werden:
- lib.stdheader.10 {
- default = TEXT
- default.field >
- default.wrap >
- # Content H1
- 1.fontTag = <h1>|</h1>
- # Content H2
- 2.fontTag = <h2>|</h2>
- # Content H3
- 3.fontTag = <h3>|</h3>
- # Rechte/ Linke Spalte H1
- 4.fontTag = <h1 class="leftrightH1">|</h1>
- # Rechte/ Linke Spalte H2
- 5.fontTag = <h2 class="leftrightH2">|</h2>
- # Überschrift nicht im FE rendern
- 6 = TEXT
- 6.field >
- 6.wrap >
- # Linke Spalte NEW H2
- 11 < .1
- 11.fontTag = <h2 class="newservice">|</h2>
- }
Hier gibt es eine Besonderheit und zwar habe ich default neu erstellt und sage ihm, dass wenn der Überschriftstyp auf Standard steht, dass die Überschrift nicht gerendert werden soll. Das gleich gilt für die Ebene 6 (Bezeichnung Verstecken in der SelectBox). Vorteil hier ist, dass man nicht immer "Verstecken" auswählen muss, wenn die Überschrift nicht gerendert werden soll.
Für alle anderen bestehenden Überschriftstypen 1 -5 für lediglich das FontTag angepasst, damit eigene CSS Klassen vergeben werden können.
In der Ebene 11 definieren wir noch die neue Überschrift "Spalte NEW H2". Dazu kopieren wir uns von Ebene 1 alle Eigenschaften und passen ebenfalls den FontTag an.
Hier noch 2 kleine Backenscreen mit dem Vorher - Nachher - Effekt und die beiden Snippets als download.
Mein Kommentar