Dynamisches CSS für dynamische Header und Seitenfarben

 

 

Dynamisches CSS muss bei TYPO3 Version 4.5 nicht mehr unter Nutzung des &type=xx Typenkonzepts erzeugt werden. Deswegen wurde dieser Artikel komplett überarbeitet.

Stattdessen lässt sich das inline CSS des Page Objektes nutzen. Dieses wird automatisch in eine Datei ausgelagert.

CSS dynamisch generieren

page.cssInline {
10 = TEXT
10 {
value =  body {background: red;}
}
}

Headerbild dynamisch einbinden

Möchte man nun Headerbilder und verschiedene Seitenfarben dynamisch wechseln, so kann man den entsprechenden Code dynamisch erzeugen.  Eine Möglichkeit ist, man nutzt entweder vorhandene Felder der “page” Tabelle oder erzeugt per Extension neue Felder. Dann kann man diese Felder zur Generierung von dynamischen CSS nutzen, zum Beispiel um einen dynamischen Header zu Erzeugen.

page.cssInline {
10 = TEXT
10 {
wrap (
#header {
background-image: url(‘uploads/media/|’);
}
)
field: media
}
20 = TEXT
20 {
wrap = .color1 {color:|}
field = tx_myextension_color1
}
}

Exkurs: Data Eigenschaften Alternativwerte (//) und levelfield

Häufig möchte man jedoch nicht für jede Seite ein Headerbild definieren sondern entweder ein defaultbild angeben oder auch das Headerbild aus einer Oberseite verwenden. Dabei kann man sich eine schöne Syntax der data Eigenschaft zu eigen machen, die leider recht wenig bekannt ist. In der .data Eigenschaft lässt sich der doppelte Slash // zur Angabe von Allternativwerten nutzen.

10.data = filed:subtitle // field:title

Würde den Untertitel ausgeben und – sollte dieser leer sein – den Titel als Alternative ausgeben.

Zusätzlich gibt es eine weitere praktische data Eigenschaft: das Levelfield. MIi dem Levelfield kann man automatisch Felder der “page” Tabelle aus der Rootline auslesen. Dies funktioniert aus Performancegründen jedoch nur mit Feldern die dazu vorgesehen wurden (z.B title und media). Man kann jedoch durch einen Eintrag in der localconf.php auch weitere Felder für das levelfield vorsehen:

$TYPO3_CONF_VARS[‘FE’][‘addRootLineFields’] =
‘navtitle, media, tx_myextension_color1’;

Diese Felder lassen sich dann in der .data Eigenschaft per levelfield wie folgt abrufen

# Headerbild der Elternseite
10.data = levelfield: -1, media

# Headerbild der Seite von Level 1
20.data = levelfield: 1, media

# Headerbild in der Rootline nach oben suchen
20.data = levelfield: -1, media, slide

Um sicherzustellen, dass wenn ein Bild angegeben ist dieses auch genutzt wird nutzt man nun das Konzept der Alternativwerte in data.

Das Headerbild dynamisch in der Rootline suchen

page.cssInline {
10 = TEXT
10 {
wrap (
#header {
background-image: url(‘uploads/media/|’);
}
)
data = field:media //   levelfield: -1, media, slide
}
}