Left Sidebar - eigenes Contao Theme erstellen
Seitenlayout erstellen und konfigurieren
Wir navigieren also zunächst auf den Bereich: Layout » Theme und klicken auf das Icon “Seitenlayouts bearbeiten”. Nun erstellst du mit einem Klick auf “Neu” ein neues Seitenlayout in deinem Theme. Logischerweise vergibst du als Erstes einen Titel für dieses Layout, in meinem Fall ist das “Home”. Bei den Zeilen und Spalten kannst du je das komplett weiße Papier links anklicken, da wir den Header und den Footer im Bereich “Eigene Layoutbereiche” selbst anlegen werden. Der Header und Footer (mit je beliebiger ID) positionieren wir: unterhalb der Kopfzeile (Header) und oberhalb der Fußzeile (Footer). Die Eingabemaske dürfte bis jetzt so aussehen:
Danach können wir die meisten Felder leer lassen: Webfonts und Bildgrößen müssen nicht definiert werden. Beim Punkt Stylesheets können alle haken bei CSS-Framework entfernt werden, bei interne Stylesheets kannst du das, in der letzten Episode erstellte, Stylesheet “custom” auswählen - falls vorhanden. Bei der Ladereihenfolge behalte “Externe Stylesheets zuerst laden” bei, damit unsere individuellen Angaben andere Definitionen überschreiben würden und setze den Haken bei “Skripte zusammenfassen” für eine Ladezeitverringerung.
Eigene Layoutbereiche zuweisen
Beim Punkt “eingebundene Module” werden wir nun die beiden Bereiche “Header” und “Footer” an ihrem Platz zuweisen. Klicke dazu bei dem Modul “Artikel” in der Hauptspalte zwei Mal auf das Plus. Nun musst du nur noch bei einem der drei Elemente den Layoutbereich auf Header und einen anderen auf Footer stellen. Die Sortierung ist irrelevant und wird sich nach dem Speichern automatisch korrigieren.
Die restlichen Einstellungen der Eingabemaske sind sehr schnell erklärt: abgesehen von dem Punkt Experteneinstellungen » Markup komprimieren, kannst du jede Eingabe leer lassen und alle Haken entfernen. Dadurch kann es sein, dass bspw. der Contao Content Slider nicht mehr funktioniert. Kehre in dem Fall zu dieser Eingabemaske zurück und mache den Haken bei JavaScript » js_slider wieder rein.
Damit haben wir das Seitenlayout konfiguriert.
Seitenlayout in neuer Seite einbinden
Im nächsten Schritt möchten wir nun unsere Seite stylen. Daher ist es nun an der Zeit das Seitenlayout einzubinden, damit wir unsere Veränderungen auf direkt im Browser sehen. Klicke auf Layout » Seitenstruktur und erstelle entweder eine neue Seite oder direkt einen neuen Seitenbaum mit Startseite. Klicke dann auf den Bleistift beim Seitenbaum oder der Seite und scrolle runter bis zum Bereich “Layout-Eigenschaften”. Dort klickst du auf den Punkt ”Ein Layout zuweisen” und wählst das, gerade erstelle, Seitenlayout.
Inhalte einfügen
Navigiere nun auf den Bereich Inhalte » Artikel und erstelle drei Artikel in der entsprechenden Seite. Achte dabei darauf, dass je ein Artikel bei der Erstellung “Anzeigen in” Hauptspalte, Footer, Header ausgewählt hat und lege je ein Text-Element in die Artikel ab, um sie zu unterscheiden. Der Artikel Bereich sieht nun so aus:
Die Ausgabe auf der Startseite so:
Die CSS-Magie
Hier geht es zu einem CSS Crashkurs, falls du eine Auffrischung benötigst. https://youtu.be/E2dOKtukskc
Nun müssen wir den Bereichen nur noch mitgeben, wie sie sich im Browser darstellen sollen. Erstelle dazu ein CSS-Dokument und binde es in dein Seitenlayout ein. Die CSS-Definitionen sehen folgendermaßen aus:
@media (min-width:800px) {
#main div.inside, #footer-custom div.inside{
width:75vw;
}
}
#main div.inside, #footer-custom div.inside {
margin: auto;
max-width: 1200px;
padding: 15px;
}Wichtig ist dabei, dass du die IDs eventuell anpassen musst - je nachdem wie dein Layoutbereich benannt ist, den du am Anfang selbst erstellt hast. Aber was passiert hier nun? Sofern der Browser mindestens 800px breit “geöffnet” ist, dann wird sowohl der Main-Bereich, als auch der Footer-Bereich auf eine Breite von 75% des Browserfensters angezeigt. Unabhängig davon werden beide Bereich durch den Margin: auto zentriert, erhalten eine maximale Breite von 1200 Pixel und einen Innenabstand von 15 px. Nun sollte der Output in deinem Browserfenster so aussehen:
Wie du siehst, haben wir noch einen weiten Weg vor uns! Bis zum nächsten Mal!