Wie binde ich ein CSS Stylesheet in TYPO3 ein?

[daniel]

Ein Stylesheet kann man mit

page.stylesheet = pfad/zum/stylesheet.css

im TypoScript Template eingebunden werden.

© daniel

[gigasol]

Man könnte das ganze auch mit einer Browserabfrage anlegen:

Ins Setup:


page.headerData = COA
page.headerData {
10 = TEXT
10.value = {$temp.CSS}
}


unter Constants:


// default css einbinden
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" />
// auf Version 7 abfragen
[version = >6] AND [browser = msie]
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" /><link rel="stylesheet" href="ie7.css" type="text/css" />
// Mozilla und Netscape
[browser = netscape]
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" /><link rel="stylesheet" href="mozilla.css" type="text/css" />
// auf Version 4 abfragen
[version = <5] AND [browser= netscape]
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" /><link rel="stylesheet" href="mozilla4.css" type="text/css" /
// Opera
[browser = opera]
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" /><link rel="stylesheet" href="opera.css" type="text/css" />
// MAC
[system = mac]
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" /><link rel="stylesheet" href="mac_ie.css" type="text/css" />
[system = mac][browser = netscape]
temp.CSS = <link rel="stylesheet" href="default.css" type="text/css" /><link rel="stylesheet" href="mac_mozilla.css" type="text/css" />
[global]

[Schmidti159]

Wenn mann mehrere Stylesheets einbindn will, bzw. weitere optionen setzten will ist es sinnvoller includeCSS zu nutzen.

page.includeCSS {
file1 = pfad/zum/stylesheet_1.css
file1.title = main_stylesheet
file2 = pfad/zum/stylesheet_2.css
file2.title = print_stylesheet
file2.media = print
}

[FraGiLe]

mit includeCSS kann man übrigens auch CSS wieder überschreiben, z.b. wenn eine weitere Subsektion ein anderes Layout braucht, css-styled-content aber die Page-Elemente gleich benennt. Dazu einfach in der Untersektion das unter z.b. includeCSS.file1 angehängte CSS mit dem neuen ersetzen (also includeCSS.file1 = neuesCSS-File)

[olliwan]

Hallo! Ich versuche gerade ein CSS in Typo3 einzubinden, werde aber aus den ganzen Tipps nicht schlau. Kann mir jemand eine Schritt-für-Schritt-Anleitung geben? Ich bin neu auf dem Typo3-Sektor. Danke im Voraus :-)

[Martin Terber]

@olliwan:

Die Frage ist, wie weit du bereits bist.
Wenn du eine ganz neue Seite erstellen musst und keine Ahnung hast, solltest du erstmal die Grundlagen zur Template-Entwicklung durcharbeiten, zB. das Quickstart Tutorial.

Das mit dem CSS geht dann so:
Den oben genannten Code musst du in dein Seitentemplate einbinden.
Das heisst, im Backend das Modul Web > Template wählen, dann das Template bearbeiten, dass deiner Seite zugrunde liegt.

Den oben genannten Code musst du dann in den Setup-Teil des Templates einfügen, siehe Screenshot.



Natürlich muss sich das CSS auch an dem angegebenen Pfad auf dem Server befinden, also vorher per FTP oder über den Typo3 Filemanager hochladen.

Es reicht natürlich für den Anfang, nur ein CSS einzubinden:

page.includeCSS {
file1 = pfad/zum/stylesheet.css
}

[TheLapeno]

Hey Daniel,

ich bin grad neu hier in diesem Forum und muss sogar leider sagen in dem ersten Forum in dem ich mich angemeldet habe.

Also ich bin grad dabei meine eigene Seite zu machen und ich hab das Problem das ich viele JavaScript und Css Datein in meine Seite integrieren muss (duch jquery classen etc).

Ich hab mir um die sache ein bisschen zu vereinfachen 2 kleine JavaScript-Funktionen geschrieben die jeweis in einer datei liegen die ich dann via typoscript integriert habe. Und damit ist es sehr einfach Datein auch ohne Typoscript einzubinden.

Und hier nun meine 2 Scripte

loadInFunction('fileadmin/source/template/js/jquery/jquery.fancybox-1.2.6.js');

loadInCss('fileadmin/source/template/css/jquery.fancybox-1.2.6.css');

function loadInFunction(pfad){
document.write('<'+'script src=' +pfad+ ' type="text/javascript"><'+'/script>');
}

function loadInCss(pfad){
document.write('<'+'link media="screen" href=' +pfad+ ' type="text/css" rel="stylesheet">');
}



Hier vielleicht hilft dir das bzw findest es besser als die (doofe) typoscript einbindung.

Beste Grüße

TheLapeno :)

[gygax]

Hier vielleicht hilft dir das bzw findest es besser als die (doofe) typoscript einbindung.

Also ich finde die Einbindung von Css mittels Javasript nicht sehr optimal und auch recht unflexibel.
Mit typosript bin ich wesentlich flexipler in der Einbindung mit diversen scripten und CSS als durch ein starres JavaScript und dann stellt sich natürlich auch die Frage, warum arbeitest du mit typo3???

Lg

Christopher

[Martin Terber]

Also ich finde die Einbindung von Css mittels Javasript nicht sehr optimal und auch recht unflexibel.

Sehe ich auch so - das o.g. Javascript-Beispiel verkompliziert die Sache doch nur unnötig. Typoscript mag am Anfang etwas sperrig und undurchsichtig erscheinen. Aber es ist leicht erlernbar und erleichtert es, sein Projekt klar und strukturiert zu konfigurieren.

[unusualplayer]

Hallo,

ich hab mal ne frage, und zwar müsste ich morgen für eine präsentation eine website mithilfe von typo3 erstellen, ich hab bisher nur die testversion heruntergeladen und hab auch keine webspace.!
ist das möglich, aussehen is völlig egal, einfach nur eine website dass was da is!
erste frage, ist das in dieser zeit und mit meinen mitteln möglich?

danke schonmal

lg