Typo3 und CSS: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(externe CSS Dateien erzeugen)
 
Zeile 1: Zeile 1:
 +
== Inline Styles ==
 +
=== Alle Inline Styles in eine externe Datei auslagern ===
 +
automatisch alle inline CSS Stile in eine temporäre Datei auslagern:
 +
config.inlineStyle2TempFile = 1
 +
 +
=== Inline Styles aus cron_cssstyledimgtext entfernen ===
 +
'''Im Setup'''
 +
 +
plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE =
 +
 +
setzen und dafür sorgen daß die benötigten Stile im Stylesheet stehen.
 +
 
== Eine externe CSS Datei dynamisch anlegen ==
 
== Eine externe CSS Datei dynamisch anlegen ==
 
Dynamisch eine CSS-Datei erstellen
 
Dynamisch eine CSS-Datei erstellen

Version vom 16. Februar 2006, 13:19 Uhr

Inline Styles

Alle Inline Styles in eine externe Datei auslagern

automatisch alle inline CSS Stile in eine temporäre Datei auslagern:

config.inlineStyle2TempFile = 1

Inline Styles aus cron_cssstyledimgtext entfernen

Im Setup

plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE =

setzen und dafür sorgen daß die benötigten Stile im Stylesheet stehen.

Eine externe CSS Datei dynamisch anlegen

Dynamisch eine CSS-Datei erstellen

Wenn Sie seitenabhängig CSS-Definitionen brauchen und diese allerdings nicht im Head-Bereich, sondern in einer seperaten Datei stehen sollen, können Sie sich mit einem Trick helfen.


Sie müssen dazu nur die Ausgabe einer Seite wie im folgenden Beispiel definieren:

TypoScript (Setup)

 css = PAGE
 css {
    typeNum = 22
    config{
       additionalHeaders = Content-type: text/css
       disableAllHeaderCode = 1
    }
    10 = TEXT
    10.value (
       body {
           margin: 0px;
           padding: 0px;
       }
       h5 {
         text-decoration: none;
         font-weight: bold;
         font-size: 40px;
         color: red;
         background-color: silver;
         display: box;
      }
    )
 }
 page.headerData.775 = TEXT
 page.headerData.775.dataWrap =  <link rel="stylesheet" type="text/css" 
      href="index.php?id={field:uid}&type=22" />| 
 

TypoScript-Erläuterung Von Zeile 1-23 wird die Ausgabe der CSS-"Datei" konfiguriert. Damit die Ausgabe auch als Text ausgeliefert wird, wird in Zeile 5 die Headerinformation modifiziert.

Die CSS-Datei darf natürlich nicht den Head- und Body-Bereich einer normalen Webseite haben. Aus di esem Grund wird der Header-Code in Zeile 6 komplett gelöscht.

In Zeile 8-22 wird die Ausgabe noch relativ starr (hier mit Beispieldaten) angegeben - allerdings können Sie die CSS-Daten ja auch aus einem zuvor mit dem Kickstarter ergänzten Datenbankfeld der pages-Tabelle auslesen und hier dynamisch einfügen lassen.

Zeile 24 und 25 fügt jetzt in der normalen Webseite noch den Link zur Stylesheet-"Datei" ein.

Die TypeNum-Angabe ist überigens nicht zwingend 22. Sie müssen nur eine freie typeNum verwenden.