Dynamisches CSS lässt sich bei TYPO3 unter Nutzung des &type=xx Typenkonzepts erzeugen. Dabei wird neben der Grundseite page = PAGE eine zweite Seite erzeugt (css=PAGE). Diese zweite Seite wird von der Hauptseite durch anhängen des type parameters unterschieden.Per Pageconfig muss der Typ der dynamischen CSS Datei dann noch korrekt auf Content-type: text/css gesetzt werden.

CSS dynamisch generieren

 

css = PAGE
css {
 typeNum = 22
 config{
 additionalHeaders = Content-type: text/css
 disableAllHeaderCode = 1
 } 
 1 = TEXT
 1 {
 body {background: red;}
 }
}

Dynamische CSS einbinden

Eingebunden muss die CSS natürlich auch noch werden.

page.headerData.775 = TEXT
page.headerData.775.value ( 
 <link rel="stylesheet" type="text/css" 
 href="index.php?id={field:uid}&type=22" />
)
page.headerData.775.insertData = 1 

Headerbild dynamisch einbinden

Möchte mann 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.

css.300 = TEXT
css.300.data =  field: tx_lopagedesign_headerimg 
css.300.wrap (
    #header {
      background-image: url('uploads/tx_lopagedesign/|');
    }
  ) 
}

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, tx_lopagedesign_headerimg'; 

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

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

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

# Headerbild in der Rootline nach oben suchen
20.data = levelfield: -1, tx_lopagedesign_headerimg, 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

css.300 = TEXT
css.300.data =  field: tx_lopagedesign_headerimg // 
 levelfield : -1, tx_lopagedesign_headerimg , slide 
css.300.wrap (
    #header {
      background-image: url('uploads/tx_lopagedesign/|');
    }
  ) 
}