Erstelle dein eigenes Theme
Hier geht's zum YouTube-Video.
Hi hast du Interesse dein eigenes Theme für Contao zu erstellen? Dann bist du hier genau richtig. Ich erstelle eine kostenlose Videoreihe, in der jede zweite Woche Sonntags ein Video zu diesem Thema auf meinem YouTube-Kanal erscheint. Du hast du Möglichkeit entweder das Video dazu zu gucken oder den entsprechenden Beitrag zu lesen. Viel Spaß!
Um dein eigenes Theme zu erstellen, navigiere zunächst auf Layout » Theme und klicke auf Neu. Daraufhin erhältst du eine Eingabemaske, in der zunächst den Theme-Titel und Autor festlegst - mehr Eingaben sind zunächst nicht erforderlich. Allerdings könntest du bereits einen Ordner in der Datenverwaltung, ein Bildschirmfoto für das Theme und einen Templates-Ordner zuordnen.
Das Bildschirmfoto ist ein rein kosmetischer Aspekt, welcher dein Theme professioneller erscheinen lässt, wobei die beiden Ordner bei größeren Projekten, welche verschiedene Ressourcen (Templates, Bilder, CSS-Dateien) benötigen essenziell sind, allerdings zu diesem Zeitpunkt vernachlässigt werden können. Klickst du nun auf “Speichern und Schließen”, hast du erfolgreich dein Theme angelegt und siehst nun den Namen deines Themes mit einigen Icons recht daneben
Lass uns nun deine Einstellungsmöglichkeiten durchsprechen: Klickst du auf den Bleistift, rufst du erneut die Eingabemaske von gerade wieder auf und kannst Änderungen vornehmen. Das rote Kreuz tut genau das, was du denkst: es löscht das Theme. Das eingerahmte “i” gibt dir Auskunft über das Theme - für uns gerade nicht interessant. Spannender wird es da schon bei dem vierten Icon.
CSS-Stylsheet im Theme anlegen
Klicke bitte auf das weiße Blatt, auf dem CSS steht. Provisorisch möchte ich mit dir schonmal ein Stylesheet anlegen, das wir später im Seitenlayout verknüpfen. Hier werden wir keine Definitionen für das Theme reinschreiben - allein schon, weil der CSS-Editor mit Contao 5 Version komplett entfernt wird. Trotzdem solltest du wissen, mit der Funktion umzugehen, solange sie noch existiert.
Klicke auf Neu und fülle lediglich das Feld “Name” aus. Ich habe mich für “custom” entschieden, da in diesem Stylesheet primär andere User Einstellungen treffen werden. Bestätige den Vorgang mit “Speichern und schließen”, kehre dann über ein klick auf “zurück” zur ursprünglichen Übersicht zurück. Das fünfte Icon, es zeigt zwei Zahnräder, steht für die Front-End Module, welcher ein wichtiger Bestandteil des Themes ist - dort werden wir häufig zurückkehren. Das nächste Icon “Seitenlayouts” wird Thema des zweiten und dritten Tutorial-Abschnittes, in welchem wir ein Seitenlayout mit und eines ohne Sidebar erstellen werden. In dem Seitenlayout werden die Bestandteile der Seite definiert, welche dem User im Front-End angezeigt werden.
Bildgrößen im Contao Theme festlegen
Das vorletzte Icon - die Bildgrößen - können sehr nützlich werden, um sich später mehrfach Aufwand zu ersparen. Klicke auf das Icon, damit ich dir zeigen kann, was es damit auf sich hat. Klicke erneut auf das Plus-Icon mit dem Titel “neu” und definiere zunächst einen Namen. Mein Beispiel: “News-Thumbnail” - meint das Vorschaubild auf der Startseite, welche das entsprechende Bild einer News darstellt. Ich definiere die Breite auf 400, lasse die Höhe frei und stelle den Größenänderungsmodus auf “Proportional”, wodurch sich Contao automatisch zweite Version des jeweiligen Bildes mit der Breite von 400 Pixeln und proportionaler Höhe speichert und verwendet. Bei den Bildquellen-Einstellungen ist aktuell nur der Pixeldichte / Skalierungsfaktor interessant, welcher die Möglichkeit bietet das Bild mit verschiedenen Pixeldichten zu erstellen. Neuere Smartphones haben mehr Pixel auf einen Zoll als alte Monitore. Daher ist es ratsam diese Einstellung beispielsweise auf die vorgeschlagenen “1x, 1,5x, 2x” zu definieren - so hat Contao die Möglichkeit individuell nach Device des Users eine passende Bilddatei auszugeben. Die OptionLazy-Loading würde ich immer aktivieren, dabei wird ein Bild nur geladen, wenn es im Viewport des Betrachters liegt und spart somit beim Aufrufen der Website Zeit und Daten. Unter “Experteneinstellungen” wird dir außerdem die Möglichkeit geboten Bildformate automatisch in WEBP zu konvertieren. Dies ist ein attraktives Bildformat, welches allerdings zurzeit nicht von vielen Browsern anerkannt wird. Daher würde ich eher zu richtig dimensionierten und gut komprimierten .jpg-Datein raten. Klicke auf “Speichern und schließen”. Nun hast du noch die Möglichkeit Media Queries für verschiedene Bildschirmgrößen einzustellen. Ich denke, das wird dann aber doch ein wenig viel, daher schließen wir nun mit dem Kapitel Bildgrößen ab. Das letzte Icon auf unserer Übersicht steht, gibt dir die Möglichkeit das Theme zu exportieren - eine Option die uns zurzeit noch nicht interessiert, weshalb wir damit das erste Kapitel der Anleitung “Wie erstelle ich mein eigenes Contao Theme” abschließen.