3 Wege CSS in Contao einzubinden

Um CSS in ein Contao-Webprojekt einzubinden, gibt es verschiedene Lösungsansätze. Neben dem internen und externen Weg, stellen wir am Ende des Artikels mit unserem kostenfreien Contao CSS Modul zum Download eine weitere Lösung zur Verfügung.

CSS in Contao einbinden + CSS Modul Theme

(Anmerkung: Die Lösungen sind für Contao Versionen 3 und 4 gleichermaßen anwendbar.) 

Moderne Websites sollen ansprechend gestaltet und responsiv sein. Ansprüche, die sich über das Cascading Style Sheet, kurz CSS, erreichen lassen.
In Contao gibt es nun mehrere Möglichkeiten das CSS mit dem Webprojekt zu verknüpfen: Intern, extern oder auch - seitenweise - über ein Modul. Auch die Kombination dieser Herangehensweisen ist möglich - wenn auch zwangsläufig nicht immer sinnvoll.

Im Allgemeinen werden die CSS Dateien über das Seitenlayout angegeben. Der Hintergedanke ist natürlich, dass der Redakteur nur noch die Art der Seite, die er anlegen möchte auswählt und die Inhalte direkt im richtigen Design angezeigt werden. Bei vielen Projekten zeigt sich dabei, dass die Seite um Elemente erweitert werden muss, die im Vorfeld nicht vorgesehen waren und schon benötigen wir Erweiterungen im CSS.
Natürlich lässt sich die CSS Datei dann entsprechend erweitern, allerdings werden diese "neuen" Anweisungen meist nicht überall gebraucht. Das bedeutet, wir schicken Anweisungen an Webseiten raus, die diese Anweisungen nicht benötigen. Damit hätten wir entsprechend Overhead erzeugt.

Diesem Overhead lässt sich mit unterschiedlichen Lösungen beikommen, wir stellen am Ende dieses Artikels eine davon zum kostenfreien Download zur Verfügung: Unser Contao CSS Modul.

Zunächst beleuchten wir jedoch 2 Wege zur allgemeinen Handhabung und Einbindung von CSS-Dateien in Contao: 

1. Der interne Weg

Contao kommt standardmäßig mit einem Stylesheet-Modul daher, mit dem sich Formatdefinitionen erstellen und modifizieren lassen. Diese werden über das Backend verwaltet. Dieses Modul findet sich innerhalb des Contao Backends unter Layout -> Themes.
Voraussetzung, um das Stylesheet-Modul zu verwenden ist ein bereits erstelltes Theme. An diesem wählen wir nun das CSS-Icon. Im nächsten Dialog vergeben wir einen Namen und den Medientyp unseres Stylesheets. Nach dem Speichern und Schließen können wir unsere benötigten Formatdefinitionen festlegen.

Haben wir bereits ein externes Stylesheet (also eine .css-Datei) und möchten dieses zukünftig über das Contao Stylesheet-Modul editieren und verwalten, können wir dieses über den CSS-Import innerhalb des Contao Backends integrieren.
Hierzu navigieren wir uns erneut zu Layout -> Themes und wählen das CSS-Icon des gewünschten Themes. Unter CSS-Import können wir nun den Upload starten. Der korrekte Upload wird uns anschließend von Contao bestätigt (oder es wird - im ungünstigeren Fall - ein Fehler angezeigt).
Wenn alle Deklarationen von Contao erkannt wurden, werden diese im Einzelnen nun aufgelistet und können editiert werden.

Damit sich die Definitionen - ob intern angelegt oder importiert - auf unsere Seite auswirken, müssen wir das Stylesheet nun noch im Seitenlayout unseres Themes einklinken. Hierzu navigieren wir uns ebenfalls unter Layout zu den Themes und wählen das Seitenlayout-Icon unseres Themes. Im nachfolgenden Dialog wählen wir das Stift-Icon des gewünschten Layouts und finden nun unter dem Reiter Stylesheets -> Interne Stylesheets unser soeben angelegtes CSS. Mit Klick auf die Check-Box und anschließendem Speichern ist das CSS nun eingebunden.

Achtung!

Beim Überprüfen in der Frontend-Vorschau nicht vergessen, das den Seiten ggf. unterschiedliche Seitenlayouts zugewiesen sind. Welches Layout, welcher Seite zugeordnet ist, kann man innerhalb der Seitenstruktur erkennen. Hierzu unter Layouts -> Seitenstruktur die gewünschte Seite mit dem Stift-Icon auswählen und den Reiter Layout-Einstellungen auswählen. Wenn hier kein Layout ausgewählt ist, erbt diese Seite das Layout der übergeordneten Seite, bzw. des Startpunktes. 

Des Weiteren verfügt Contao bereits über eine Grundausstattung an vordefinierten CSS Frameworks:

- Layout-Builder
- Responsives Layout
- 12-Spalten Grid
- CSS-Reset
- Formulare
- TinyMCE-Stylesheet

Diese können im Seitenlayout direkt ausgewählt und eingeschaltet werden.

Allgemein, sollte man sich vor der Projekterstellung Gedanken machen, welche CSS Anweisungen benötigt werden und auf welches Framework man aufbauen möchte.
Die Contao internen CSS Dateien sind bereits seit Jahren im Einsatz und bieten dem auch nicht so geübten Benutzer alles an Formatierungen die benötigt werden um eine ansprechende Website zu gestalten. Anderseits muss man sich auch sehr intensiv mit ihnen beschäftigen, um alle Fallstricke zu umschiffen die derweilen auftauchen.

2. Der externe Weg

Wollen wir unser CSS direkt über den Server einbinden und editieren, wählen wir den Upload via FTP. Hierfür bietet es sich an, im files-Verzeichnis von Contao einen Ordner mit dem Namen "css" zu erstellen und unser neues externes Stylesheet entweder direkt hier zu erstellen oder ein bestehendes hochzuladen. Mit einem Texteditor lassen sich die Dateien nun hier einfach und schnell editieren.
Um das CSS nun auch in unsere Seite zu integrieren, navigieren wir uns im Contao Backend ebenfalls zu Layout -> Themes -> Seitenlayouts und wählen das gewünschte Seitenlayout. Im nachfolgenden Dialog findet sich unter dem Reiter Stylesheets -> Externe Stylesheets nun der Auswahl-Button. Innerhalb der sich öffnenden Dateiverwaltung findet sich nun auch unser css-Ordner mitsamt der hochgeladenen Dateien wieder. Wir wählen nun alle benötigten aus und haben nach dem Speichern am Ende des Layout-Dialogs unsere CSS-Dateien eingebunden.

3. Die seitenbezogene Einbindung

[Kostenloses Contao CSS Modul zum Download]

Um unnötigen Overhead auf der Website zu vermeiden und die Ladezeiten schön niedrig zu halten, sollte man sein CSS also im Blick behalten. Nicht auf jeder Seite benötigt man jede einzelne CSS-Datei und manche tatsächlich auch nur auf einer einzigen Seite eines Projekts. So sind zum Beispiel CSS Anweisungen, die für Formularfelder notwendig sind, auf den meisten Standard-Seiten nicht notwendig. Deshalb kann es sinnvoll sein diese Anweisungen in eine eigene CSS-Datei auszulagern und diese nur dann einzubinden, wenn sie benötigt werden.

Damit eine bestimmte CSS-Datei nur auf einer bestimmten Seite eingebunden wird, könnte man für diese Seite ein neues Seitenlayout anlegen und das CSS nur in diesem Layout einbinden und das Layout anschließend der entsprechenden Seite zuweisen.
Dieser Weg ist funktional, kann bei größeren Projekten aber auch schnell unübersichtlich werden, da wir dann für jeden Sonderfall ein eigenes Seitenlayout anlegen müssen.
Für diesen bestimmten Fall haben wir ein Content-CSS-Modul entwickelt, welches über den Artikel einer Seite eingebunden werden kann und die Auswahl einer externen CSS-Datei über die Dateiverwaltung erlaubt. Das Modul ist für Contao 3 Versionen entwickelt, auch unter Contao 4 funktionsfähig und steht am Ende des Artikels zum kostenfreien und unverbindlichen Download zur Verfügung.

Das Modul "LOAD CSS" wird zur Installation via FTP in das Modulverzeichnis von Contao kopiert. Anschließend kann dieses wie jedes andere Content Element im Artikel ausgewählt werden. Dabei ist es egal, an welcher Stelle das Element eingefügt wird. Die gewählte CSS Datei (über die Dateiauswahl in Element auswählen) wird im "head" der Seite eingebunden und steht dann allen Elementen die auf der Seite eingetragen sind zur Verfügung.

zur Blogübersicht

Online Website Check

Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.

Hilfe & Support

Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.  

Cookie- & Analyse Einstellungen

Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.

Verweigern
Akzeptieren
Mehr