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.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 diesem 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.
Kommentare von registrierten Benutzern:
Da muss ich den Kollegen Helger leider ein klein wenig korrigieren. ;-)
Wir GENERIEREN eine Css-Datei, daher muss keine CSS Datei im Fileadmin vorhanden sein.
Und der obenstehende Code kommt in's SETUP (bzw. auf deutsch "Konfiguration") des Templates.
(Ob du dafür ein neues +ext Template anlegst oder es in dein Haupttemplate schreibst, bleibt dabei dir überlassen. Das ist im Endeffekt dann nur eine Frage der Übersichtlichkeit..)
Ein viel wichtigeres (und aktuelleres) Thema ist: CoolURI Anpassungen!!
Habe dafür etwas rätseln müssen, daher poste ich es mal hier her.
Zunächst bearbeiten wir unsere .htaccess Datei:
In der Zeile erweitern wir das Ganze hinter "robots.txt":
| Php: | Zeilennummerierung: An / Aus |
- RewriteRule ^(typo3|t3lib|tslib|...|cgi-bin|robots.txt|index.php(.+)type=22)/ - [L]
Tun wir dies nicht, dann kann die Seite "index.php?id=XX&type=22" nicht aufgerufen werden.
(CoolURI versucht nämlich, einen simulierten Pfad zu finden, der für diese CSS-Seite nicht existiert.)
Diese "Erweiterung" gilt natürlich dann nur für die CSS-Seite (type=22). Das müsst Ihr dann entsprechend anpassen, wenn Ihr einen anderen typeNum für die CSS Datei (Zeile 3) verwendet.
Hinzu kommt noch eine kleine Änderung im Typoscript (Zeile 25).
Aus
| Typoscript: | Zeilennummerierung: An / Aus |
- page.headerData.775.dataWrap = <link rel="stylesheet" type="text/css" href="index.php?id={field:uid}&type=22" />|
| Typoscript: | Zeilennummerierung: An / Aus |
- page.headerData.775.dataWrap = <link rel="stylesheet" type="text/css" href="/index.php?id={field:uid}&type=22" />|
(Ein Slash (/) kommt vor das "index.php?...", sonst versucht Euer Typo3 die index.php in den simulierten Unterpfaden zu finden.)
hth - fabian.
In den Seiteneigenschaften unter TS
Oder du erstellst ein +extensions Template und bindest dort die CSS Datei ein, welche als externe Datei im Fileadmin liegt.
Wo genau muss ich denn das TypoScript eintragen? In die Seiteneigenschaften der Seite, dessen CSS-Definition unterschiedlich sein soll?
Oder in eine neue Seite?
Oder als neues Template?
