CSS in Typo3 Site einbinden

 

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.

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:

media	Zielmedium
all	für alle Medien geeignet
screen	für normale PC-Monitore
projection	für Beamer/Projektoren
print	für Drucker
handheld	für Handheld-Geräte mit kleinem Display
tv	für Fernseher
tty	für nicht-grafische Ausgabemedien mit fixer Zeichenbreite z.B. text-orientierte Browser wie Lynx
braille	für "Braille-Zeile". Der Text wird in eine veränderbare Oberflächenstruktur der Braille-Zeile umgewandelt und über Abtasten lesbar
embossed	für Braille-Drucker. Dabei wird Text in Form von abtastbaren Oberflächenstrukturen in Papier oder ein vergleichbares Material gestanzt
aural	für synthetische Sprachausgabe

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.