CSS-Datei über CSS Klasse laden

[Slind]

Guten Tag,

ich hab es langsam satt für jede Seite die etwas anders ist (Kalender/Formulare..) ein extra Theme erstellen zu müssen, und dann bei Änderungen gleich 10 Stück aktualisieren zu müssen, klar es gibt Überschreiben aber dennoch.
Kann ich das Laden der CSS-Dateien nicht irgendwie über CSSs Klassen wählen ? Also ich hab z.B. die Basic.css die wird bei allen Seiten geladen und dann noch die Default.css. Wenn ich jetzt bei einer Seite die CSS-Klasse "kalender" hinzufüge, hätte ich gerne das er zusätzlich noch die CSS-Klasse extra.css oder kalender.css lädt. Geht das irgendwie ? Mit der Sidebar mache ich es bereits so ähnlich, ich geb der Seite einfach nen CSS-Klasse "no-sidebar" und spreche darüber dann extra "left" über die CSS an und setzte es auf display:none;. Ich hab aber halt auch keinen Bock das er das ganze nicht benötigte CSS mit lädt. Ich brauch ja nirgendswo das CSS für den Kalender wo kein Kalender ist.

[fabil]

Hallo Slind,

wüsste nicht, dass dies ohne ein eigenes Layout möglich wäre.

Beachte aber: Normalerweise legt Contao alle CSS-Dateien zu einer Datei zusammen. Dies legt der Browser im Cache ab, sodass dies nicht jedesmal neu geladen werden muss. Wenn du jetzt jedoch für jede Seite eine andere CSS-Datei hinzufügst, muss der Browser jedesmal bei solchen Seiten mit anderem Layout die CSS-Datei (mit vielen Zeilen aus der vorherigen CSS-Datei ) dort auch wieder neu laden.

Da ist es doch sinnvoller, dass er am Anfang beim ersten Seitenaufruf die komplette CSS-Datei herunterläd und zwischenspeichert. Dadurch sparst du dann letztendlich sicherlich Traffic. Und normalerweise sind die CSS-Dateien auch mit sehr vielen Zeilen noch relativ klein. Da würde ich mir lieber Sorgen um Bilder machen:-)

Viele Grüße
fabi

[fabil]

Guten Tag,

ich hab es langsam satt für jede Seite die etwas anders ist (Kalender/Formulare..) ein extra Theme erstellen zu müssen

Info dazu: Da brauchst du nicht ein neues Theme. Es reicht ein neues Layout in diesem Theme, welches du der jeweiligen Seite hinzufügst. :-)

[Spooky]

Oder du verwendest Theme+, damit kannst du CSS und JS Dateien auch pro einzelnen Seiten (und deren Unterseiten) einbinden lassen, ohne ein eigenes Seitenlayout anlegen zu müssen. Theme+ ist aber nicht ganz einfach in der Handhabung und Installation.

[Slind]

Gibt es Theme+ mittlerweile für 3.1.x ?

An das Cachen hatte ich noch gar nicht gedacht, da würde ja auch Theme+ dann keinen Sinn mehr machen, außer der lädt die Datei extra und merged sie nicht.

[Spooky]

Gibt es Theme+ mittlerweile für 3.1.x ?

Eh schon länger. Also Theme+ 4 gibt es auch in der (halbwegs?) aktuellsten Version im normalen Extension Repository. Allerdings fehlt für Assetic die englische Übersetzung und wenn du minified CSS files haben willst, musst du die CSS min Klasse manuell hinzufügen (siehe zB https://community.contao.org/de/show...l=1#post276265 ). Generell fehlen einfach viele (oder alle) Assetic Filter Komponenten (die werden normalerweise über Composer automatisch geladen).

An das Cachen hatte ich noch gar nicht gedacht, da würde ja auch Theme+ dann keinen Sinn mehr machen, außer der lädt die Datei extra und merged sie nicht.

Nein, Theme+ erstellt dann für die jeweiligen Seiten einfach eine eigene CSS Collection. Also wenn du zB folgenden Seitenbaum hast:

• Seite 1
• Seite 2
  
  • Unterseite 1
  • Unterseite 2
• Seite 3
• Seite 4

und du definierst für Seite 2 zusätzliche CSS Dateien (auf dieser und allen Unterseiten) über die Seiteneigenschaften, dann werden insgesamt zwei CSS Collections erzeugt. Eine mit den CSS Dateien aus dem normalen Seitenlayout und eine weitere Collection mit den CSS Dateien aus dem Seitenlayout, plus den weiteren CSS Dateien die du über die Seiteneigenschaften definiert hast. Auf Seite 1, Seite 3 und Seite 4 wird dann die erste Collection eingebunden auf Seite 2, Unterseite 1 und Unterseite 2 die andere.