Contao (Teil 7): Ein Theme erstellen

Das Ergebnis der bisherigen Einstellungen im Backend ist die Ausgabe der Meldung 'No layout specified'. Das gilt es nun zu ändern. Dazu muss man sich mit den beiden Dingen Themes und Seitenlayouts befassen. Und genau das wird in diesem Tutorial gemacht.

Wir empfehlen:
Contao CMS-Training

Ruft zunächst das Frontend eurer Seite auf.

Das sollte der aktuelle Stand sein. Um statt dieser Meldung nun eine echte Ausgabe im Frontend zu erzielen, muss man dieser ein Seitenlayout zuweisen. Und da jedes Seitenlayout Teil eines Themes ist, wird jetzt ein erstes Theme erstellt.

Themes in Contao

Bei einem Theme handelt es sich in Contao um eine Kombination aus Seitenlayouts, Stylesheets, Templates, Grafiken und Frontend-Modulen. Bevor gezeigt wird, wie sich Themes erstellen lassen, zunächst ein Blick auf zwei wichtige Begrifflichkeiten, die euch im Zusammenhang mit Contao immer wieder begegnen werden: Themes und Frontend-Templates. Ein Theme enthält lediglich das Design der Webseite. Ganz anders sieht das bei Frontend-Templates aus. Dabei handelt es sich um vollständig konfigurierte Webseiten, in denen Seitenstruktur, Artikel, Benutzergruppen usw. bereits vordefiniert sind.

Verzeichnisse erstellen

Für das Theme, das erstellt wird, muss man ein Verzeichnis anlegen. Ruft dazu Layout>Templates auf und klickt auf Neuer Ordner. Klickt anschließend in der Zeile Dateisystem auf den Pfeil.

Als Name könnte man psd-theme eintragen, was mit Speichern und schließen bestätigt wird. Die Theme-Struktur sollte anschließend folgendermaßen aussehen:

Öffnet nun System>Dateiverwaltung. Hier müssen jetzt einige zusätzliche Verzeichnisse erstellt werden. Im Endeffekt bleibt es natürlich euch überlassen, wie ihr die Verzeichnisstruktur für das Theme gestaltet. Ich gehe von folgender Struktur aus:

psd-seite
—images
—downloads
themes
—psd-theme

Wie sich Verzeichnisse in Contao anlegen lassen, wurde im Rahmen dieser Tutorial-Reihe bereits ausführlich beschrieben.

Für die Darstellung der Themes im Backend wird ein Screenshot benötigt. Erstellt einen entsprechenden Screenshot vom Layout der zukünftigen Seite. Speichert diesen Screenshot unter dem Namen screenshot.jpg in einer Größe von 160×120 Pixel. Dieser Screenshot muss anschließend in das Verzeichnis psd-seite>images geladen werden.

Ruft nun Layout>Themes auf. Klickt im oberen Fensterbereich auf Neues Theme. In dem sich öffnenden Dialogfenster werden allgemeine Angaben zum Theme erwartet. Als Theme-Titel könnte man Mein PSD-Theme wählen. Tragt außerdem einen Namen in das Feld Autor ein.

Klickt im Bereich Konfiguration unter Ordner auf Auswahl ändern. In dem sich öffnenden Fenster wird das Verzeichnis themes>psd-themes ausgewählt und mit Anwenden übernommen.

Geht im Bereich Bildschirmfotos genauso vor, klickt dort aber auf das Verzeichnis psd-seite>images und anschließend auf screenshot.jpg. Aktiviert das Kontrollkästchen und bestätigt das wieder mit Anwenden.

Wichtig ist zudem das Auswahlfeld Templates-Ordner. Stellt dort das zuvor erstellte Verzeichnis psd-theme ein.

Mit Speichern und schließen werden die Einstellungen übernommen. Ihr landet daraufhin in der Theme-Übersicht. Hier sollte nun euer zuvor erstelltes Theme zu sehen sein.

In dieser Übersicht sind zahlreiche Symbole aufgeführt, mit denen ihr es im Laufe eurer Arbeit mit Contao bzw. den Themes immer wieder zu tun bekommen werdet. Grund genug also, auf die Wichtigsten von denen einen detaillierteren Blick zu werfen.

Über das Symbol Stylesheets erstellen und bearbeiten lassen sich Stylesheets für das Theme definieren.

Das ist für das Aussehen der Seite natürlich enorm wichtig. Selbstverständlich wird darauf in dieser Tutorial-Reihe noch ausführlich eingegangen.

Interessant ist darüber hinaus auch das Symbol Frontend-Module erstellen und bearbeiten.

Denn diese Module sind es letztendlich, die für die gewünschte Ausgabe im Frontend stehen. Auch dieses Thema ist – ihr ahnt es schon – noch einmal recht komplex und wird daher in einem eigenen Tutorial behandelt.

Ganz entscheidend ist in diesem Dialogfenster aber vor allem das Symbol Seitenlayouts erstellen und bearbeiten. Denn die Seitenlayouts steuern das Design der Seite im Frontend. Was es mit den Seitenlayouts auf sich hat, wird im folgenden Abschnitt gezeigt.

Ein Seitenlayout erstellen

Nachdem das Theme steht, geht es nun mit der Definition eines Seitenlayouts weiter. Ich gehe hier von einem typischen Layout aus, das in einer Breite von 960 Pixel daherkommt, drei Spalten und einen Kopf- und einen Fußbereich besitzt. Das neue Seitenlayout wird unter Layout>Themes angelegt. Klickt dort in der Zeile des zuvor erstellten Themes auf das Symbol Die Seitenlayouts des Theme ID xx bearbeiten.

In dem sich daraufhin öffnenden Dialogfenster wird auf Neues Layout geklickt. Als Titel kann Standard-PSD-Layout eingetragen werden.

Da sich das Layout aus einem Kopf- und einen Fußbereich zusammensetzen soll, wird im Bereich Zeilen auf das Symbol geklickt, das ganz rechts zu sehen ist.

Zu Kopf- und Fußzeile können jeweils Größenangaben gemacht werden, worauf ich an dieser Stelle jedoch verzichte. Die beiden Felder bleiben also leer.

Im Bereich Spalten legt man letztendlich fest, aus wie vielen Spalten das Layout bestehen soll. Ich wähle – wie eingangs beschrieben – einen Dreispalter, klicke also auf die ganz rechts angezeigte Option. Anders als bei Kopf- und Fußbereich wird nun allerdings eine Größenangabe gemacht. Bei der linken Spalte wird 200 eingetragen, im Feld daneben px eingestellt. Somit wird die Breite der linken Spalte also auf 200 Pixel festgelegt.

Weiter geht es im Bereich Stylesheets. Hier sollte in der Gruppe CSS-Frameworks der Eintrag Layout-Builder aktiviert sein.

Öffnet nun den Bereich Experten-Einstellungen und kontrolliert, ob tatsächlich das Seitentemplate fe_page und HTML als Ausgabeformat aktiviert sind.

Und nun muss noch im Bereich Statisches Layout eine Gesamtbreite von 960 Pixel angegeben und das Kontrollkästchen Ausrichtung zentriert aktiviert werden.

Mit Speichern und schließen werden die Einstellungen übernommen.

Das Seitenlayout zuweisen

Nachdem das Seitenlayout erstellt wurde, muss man nun noch festlegen, für welche Seiten es gelten soll. Ich gehe zunächst einmal vom einfachsten Fall aus, bei dem das Layout allen Seiten zugewiesen wird.

Ruft dazu Layout>Seitenstruktur auf und klickt auf das Stiftsymbol bei Startpunkt von PSD-Tutorials.de. In dem sich öffnenden Fenster ist der Bereich Layout-Einstellungen interessant. Aktiviert dort die Option Ein Layout zuweisen und stellt in dem Auswahlfeld das entsprechende Seitenlayout ein.

Mit Speichern und schließen übernimmt man die Einstellungen. Wenn man jetzt das Frontend der Seite aufruft, wird es keine Fehlermeldung mehr geben.

Ansonsten wird man aber lediglich von einer leeren Seiten begrüßt. Leer ist sie allerdings nur scheinbar. Denn wirft man einen Blick in den Frontend-Quellcode, kann man sehr gut erkennen, dass jetzt bereits das HTML-Grundgerüst vorhanden ist.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training