Suche
Teilen
startseite » forum » HowTos » FAQs & Tutorials » Dynamisch eine CSS-Datei erstellen

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)

TypoScript
Sourcecode herunterladen Sourcecode anzeigen 
  1. css = PAGE
  2. css {
  3. 	typeNum = 22
  4. 	config{
  5. 		additionalHeaders = Content-type: text/css
  6. 		disableAllHeaderCode = 1
  7. 	}
  8. 	10 = TEXT
  9. 	10.value (
  10. 		body {
  11. 			margin: 0px;
  12. 			padding: 0px;
  13. 		}
  14. 		h5 {
  15. 			text-decoration: none;
  16. 			font-weight: bold;
  17. 			font-size: 40px;
  18. 			color: red;
  19. 			background-color: silver;
  20. 			display: box;
  21. 		}
  22. 	)
  23. }
  24. page.headerData.775 = TEXT
  25. 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.

Präsentiert von