Wir haben natürlich nicht für alles eine Lösung. Aber an Problemen, über welche wir selber schon gestolpert sind, müssen sich andere ja nicht auch noch die Zähne ausbeissen.

Es ist häufig so, dass sich einzelne Seiten einer Webseite in kleinen Punkten unterscheiden. Es kann zum Beispiel sein, dass die Titel der Webseite oder andere grafische Elemente sich je nach Kategorie farblich unterscheiden sollen. Diese Unterschiede werden meist durch unterschiedliche CSS-Formatierungen definiert. Das Problem ist aber, dass im Template auf jeder Seite die selben ID’s und Klassen vorhanden sind. Wie können also beispielsweise die H1-Überschriften von konkreten einzelnen Seiten angesprochen werden?

Die grosse Keule  – ein eigenes Template-File 

Die konventionelle Variante ist die, für die gewünschte Seite ein Erweiterungs-Template zu erstellen, in dem ein eigenes Template-File eingebunden wird.  In diesem File können dann die gewünschten Klassen definiert und via CSS angesprochen werden. Dies ist aber eine unschöne Lösung, da sich die Template-Files meist nur um diese konkrete Klasse vom Basis-Template unterscheiden. Und trotzdem muss für diese kleine Änderung jeweils das ganze Template neu geladen werden.

Die leichtere Variante – etwas Typoscript

Eine leichtere Variante bieten die folgenden Codezeilen. Auch hierfür wird auf den gewünschten Seiten ein Erweiterungs-Template erstellt. Anstatt aber ein komplett neues Template einzubinden, wird dem Body-Tag des Basis-Templates einfach eine spezielle Klasse (oder ID) hinzugefügt (im folgenden Code ist dies die Klasse „klassenname“).

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body class=“klassenname“>
page.bodyTagCObject.value.insertData = 1

Damit werden die entsprechenden Seiten und Unterseiten mit der angegebenen Klasse ergänzt. Möchte man nun beispielsweise die Überschriften auf diesen Seiten in roter Farbe haben, reicht es, in der CSS-Datei folgende Definition zu ergänzen:

.klassenname h1 {
color:red;
}

Share This