magnify

Variable CSS-File

Armin Bartsch, Dienstag, 10. März 2009

Angaben im CSS-File dynamisch mit Variablen oder Konstanten füllen

Eine "CSS-Vorlage" wird mittels TEMPLATE eingelesen, Marker werden ersetzt und ein  CSS-File wird von TYPO3 gesendet. So kann z.B. zur Laufzeit eine BG-Farbe vergeben werden, oder einen Rahmen bestimmt werden. Es stehen sämtliche stdWarp-Funktionen und cObjecte zur Verfügung um die Maker zu füllen.

CSS

In dem CSS-File werden neben den "normalen" Angaben Marker angegeben, die Marker werden beim Aufruf mit Werten gefüllt.

  1. div.bg {
  2.   background-color:###bg_color###
  3. }

TEMPLATE

Als erstes wird ein neues cObject PAGE erstellt. Diesem Object wird eine typeNum zugeordnet damit ein eindeutiger Aufruf mittels type möglich ist. Mit dem cObject TEMPLATE wird der Aufruf einer Datei und die Zuweisung von Markern ermöglicht.

  1. css_file = PAGE
  2. css_file {
  3.   typeNum = 107
  4.   config {
  5.     disableAllHeaderCode = 1
  6.     additionalHeaders = Content-Type:text/css
  7.   }
  8.   10 = TEMPLATE
  9.   10 {
  10.     template = FILE
  11.     template.file = fileadmin/css.css
  12.     marks.bg_color = TEXT
  13.     marks.bg_color.dataWrap = {$css.bg_color}
  14.   }
  15. }

Einbinden CSS-File

Jetzt wird nur noch der von TYPO3 generierte CSS-File eingebunden.

  1. seite.headerData = COA
  2. seite.headerData.857 = TEXT
  3. seite.headerData.857.value = <link rel="stylesheet" type="text/css" href="./index.php?type=107" />

Es wird nun beim Aufruf der index.php mit dem type=107 eine CSS-Datei zurückgegeben

magnify

Kommentare

Ins Gästebuch eintragen
  • “ dies färbt dann aber leider die css-Validierung von grün auf rot! :'-( ”
    von Kurt am Mittwoch, 24-03-10 10:30, http://www.kupix.de
  • “ Bitte die Zeile marks.bg_color.dataWrap = {$css.bg_color} beachten! Entweder muss eine Constants eingetragen oder der Wert gefüllt werden!

    Armin ”
    von Armin am Montag, 05-04-10 19:15, ###GUESTBOOK_HOMEPAGE###

Snippets

MERKLISTE

Login

Anmelden

Sponsored by:

ideenwerft webhosting

Wunschzettel