CSS in Typo3 Site einbinden

3 Kommentare | Rubrik: Allgemein

Viele Wege führen nach Rom, so auch beim Einbau von einer CSS-Datei in die Seite. Möglich ist das ganze über TemplaVoilà, über die Einbindung per TS oder über die Einbindung von HTML-Code.

CSS-Einbau über Templavoila

Um die Typo3 Site mit CSS zu gestalten gibt es mehrere Möglichkeiten dieses einzubauen.

Wer TemplaVoilà benutzt, baut das CSS einfach wie gewohnt in das HTML-Template ein. Nach Vergabe der Datenstruktur und dem Mappen kann man im TemplaVoilà-Modul einfach im Tab "Header Teile" (EN: "Header parts") die gewünschten CSS je Template auswählen. Diese werden über die beiden Buttons "Set" und "Save" hinzufügen.

Die zweite Möglichkeit bietet der direkte Einbau des HTML-Codes über TS in den Header der Seite.

page.headerData.10 = TEXT
page.headerData.10.value = <link href="Pfad/zum/CSS.css" rel="stylesheet" type="text/css" media="all" />
page.headerData.20 = TEXT
page.headerData.20.value = <link href="Pfad/zum/CSS2.css" rel="stylesheet" type="text/css" media="all" />

Dieser Code baut das CSS in den Header aller HTML-Seiten an Position 10 ein.

Eine weitere Möglichkeit das komplette HTML durch TS generieren zu lassen ist folgende Variante:

page.includeCSS {
  file1=Pfad/zum/CSS.css
  file1 {
      title=MainStyle
      media=screen
  }
  file2=Pfad/zum/CSS.css
  file2 {
      title = MainStyle
      media = print
  }
}

CSS-Ausflug

Es gibt folgende Optionen, um dem CSS bestimmte Ausgabegeräte zuzuweisen:

Wichtig

Beim Einbau der CSS oder der Kombination mehrerer der oben genannten Möglichkeiten kann es unter Umständen vorkommen, dass sich CSS-Werte aus den eingebunden CSS Überschreiben, oder vererben.