Hallo!
Ich suche nach einer guten Lösung zur übersichtlichen Einbindung von css-Files. Für mein Projekt habe ich verschiedene css-Files erstellt, etwa für jede der eingesetzten Erweiterungen ein eigenes File, eine css-Datei zur Formatierung des grundlegenden Seitenlayouts ...
Diese Files habe ich via page.includeCSS in den verschiedenen Templates und Subtemplates eingefügt. Dabei geht leider die Übersicht verloren, allein zu wissen die wie vielte Datei eingebunden wird ist schwierig, weil ich dazu wissen muss, in welchem Template ich zuletzt eine css-Datei eingebunden habe, um das Fragezeichen im Typoscript richtig ersetzen zu können:
page.includeCSS {
file? = fileadmin/templates/styles.css
Wahrscheinlich ist meine Lösung ziemlich stümperhaft. Vielleicht könnt Ihr mir ein wenig auf die Sprünge helfen.
Besten Dank
Christoph
Hi Christoph
ich weiss zwar nicht ob es dein Problem löst, aber ich versuche es über die Extension "Page StyleSheet Selector" (Key: css_select).
Damit kannst du pro Seite ein CSS einfügen und reduzierst die Anzahl drastisch.
Viele Grüsse
Bebbi
Vielen Dank für Deine Antwort.
Allerdings würde ich lieber auf die Installation einer Erweiterung für diesen Zweck verzichten. Es geht mir ja eigentlich nicht darum, weniger css-Files laden zu müssen, sondern eher darum eine Struktur zu finden, bei der ich bei der Entwicklung des Projekts die Übersicht behalten kann.
In jedem Fall werde ich die css_select im Hinterkopf behalten, sofern sich keine andere Lösung ergibt.
Gruß
Christoph
Wieso bindest du nicht alle im Root-Template ein? Ich trenne mein TS zwar auch auf aber so etwas würde ich immer zusammenhängend an einer Stelle platzieren. Kannst ja auch ein extra Template "CSS" erstellen und im Root einbinden.
Sinnvoller wäre aber 1 CSS, damit reduzierst du die Anzahl der HTTP-Requests.
page.includeCSS {
file? = fileadmin/templates/styles.css
Gegen diese Lösung spricht nichts. Ins Root TS Setup. Dann kannst Du bei Bedarf auf Unterseiten über ein Ext. Template weitere CSS hinzufügen oder ggf. überschreiben.
Wenns denn mal viele CSS Files werden sollen (kann auch zur Übersichtlichkeit dienen) kann eine Extension wie z.B. scriptmerger, die alle nötigen CSS Files in eine zusammenfasst helfen - aber kein Muss.
Gruß
Michael
Verzichte doch auf einfach auf die Durchnummerierung und wähle eine individuelle Bezeichnung:
page.includeCSS {
seitenlayout = fileadmin/templates/styles.css
Hallo Christoph,
ich möchte die Antwort von Benjamecho noch ergänzen.
Ich mache es immer so:
page.includeCSS {
NameDerExtension = fileadmin/templates/DomainName/ext/NameDerExtension/NameDerExtension.css
#Bsp.:
chgallery = fileadmin/templates/habex/chgallery/chgallery.css
}
Somit habe ich immer alle Dateien einer Extension in einem Ordner und sehe auf der Homepage auch direkt, welche CSS-Datei für welche Extension verantwortlich ist.
Gruss
Theis