Überschriften definieren

Überschriften Typen

Erstellt man ein Inhaltselement so findet man unter dem Feld Überschrift das Dropdown "typ".
Damit kann man verschiedenen CSS-Klassen vergeben, grafische Überschriften (als Bilder) erzeugen, sie per CSS zu verstecken oder auch gar nicht erst auszugeben.

Je nachdem welche man auswählt und welches "statische Template" z.B css_styled_content man installiert hat werden die Überschriften dann formatiert.

Wir möchten die Auswahl aber nun selber konfigurieren.

Zuerst werden wir mal die Bezeichnungen umbenennen:

ins TSConfig der Rootseite
## Layout-Felder Ueberschriften umbenennen und Rest ausblenden
TCEFORM.tt_content.header_layout.altLabels {
1 = H2 rot
2 = Grafische Ueberschrift
3 = Versteckt (CSS)
4 = Nicht ausgeben
}
TCEFORM.tt_content.header_layout.removeItems = 5,6,7,8,9,10,100

-Mit dem removeItems lassen sich die nicht benötigten Felder ausblenden.
-Der Wert 100 entfernt übrigens das Hidden/Versteckt/Verborgen.

Nun müssen wir die Werte im TypoScript Setup der Root-Seite wieder entgegennehmen und damit die Frontend-Ausgabe anpassen. 
Dies geht wie folgt:

Ins Setup des TS Templates der Rootseite
# Ueberschrift neu definieren
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
# DEFAULT H1-AUSGABE (0)
default = TEXT
default.field = header
default.wrap = <h1>|</h1>
# Verlinkung von Ueberschriften
default.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
#H2 ROT (1)
1 = TEXT
1.field = header
1.wrap = <h2 style="color: red;">|</h2>
#GRAFISCHE UEBERSCHRIFT (2)
2 = IMAGE
2.file = GIFBUILDER
2.file {
XY = 1+[10.w], 24
backColor = #FFFFFF
10 = TEXT
10.text.field = header
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/arial.ttf
10.fontColor = #000
10.fontSize = 13
10.offset = 0, 12
# ggf vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 1, 38
# Hilfsebene fuer Hoehenberechnung
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 22
16.offset = 1000,1000
wrap = |<br />
}
2.alttext.field = header
2.titletext.field = header
# Verlinkung von Ueberschriften
2.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
# CSS VERSTECKT (3)
3 = TEXT
3.field = header
3.wrap = <h1 class="hidden">|</h1>
# NICHT AUSGEBEN: WECH!!! (4)
4 = TEXT
4.field >
} # ENDE lib.stdheader

Überschriften nur neu formatieren

Möchte man die Überschriften allerdings nur neu Formatieren so kann man das so recht schnell erledigen:

Überschriften neue Klasse zufügen
lib.stdheader.10.1.fontTag = <div class='standart_title'>|</div>
lib.stdheader.10.2.fontTag = <div class='standart_title'>|</div>
lib.stdheader.10.3.fontTag = <div class='standart_title'>|</div>
lib.stdheader.10.4.fontTag = <div class='standart_title'>|</div>
lib.stdheader.10.5.fontTag = <div class='standart_title'>|</div>

Die Zuweisung erfolgt wie hier:

Normal
Layout1   ---> lib.stdheader.10.1.fontTag...
Layout2   ---> lib.stdheader.10.2.fontTag...
Layout3   ---> lib.stdheader.10.3.fontTag...
Layout4   ---> lib.stdheader.10.4.fontTag...
Layout5   ---> lib.stdheader.10.5.fontTag...
Versteckt

War das Ihnen eine Hilfe? ein "LIKE" wäre ein tolles "Dankeschön"