Left Sidebar - eigenes Contao Theme erstellen
Hi! In diesem Abschnitt werden wir ein weiteres Seitenlayout für unser Theme erstellen. In dem Fall handelt es sich um eine linke Spalte, die auf einem großen Monitor neben dem Haupttext steht und mobil über den Haupttext rückt.
Zunächst navigierst du in Layout » Themes » Seitenlayouts für das Theme. Dort sollte bis jetzt das Seitenlayout vorhanden sein, dass wir zusammen in Teil 2 erstellt haben. Ist dem nicht so, hol den Teil bitte nach. Jetzt kannst du auf das grüne Plus bei deinem Seitenlayout klicken, um dies zu duplizieren, klicke dann auf den Pfeil oben rechts, der nun erscheint. Zunächst benennst du das neue Layout - ich trage “Left Sidebar” beim Titel ein. Da wir unser Standard-Layout dupliziert haben, müssen wir in dem Fall auch keine Änderungen vornehmen. Wir fügen lediglich einen “eigenen Layoutbereich” hinzu.
Ich habe ihn left genannt, die ID left-custom vergeben und Position auf “manuelle Ausgabe” gesetzt. Weiter unten im Bereich “eingebundene Module” klickst du bei einem Modul auf das grüne Plus und wählst bei dem neu erzeugten Element den Layoutbereich “left” aus. Das sollte in etwas so aussehen:
Klicke dann auf “speichern und schließen”. Jetzt müssen wir etwas an den dem Grundkonstrukt des Seitenaufbaus verändern und benötigen dazu das Template “fe_page.html5”. Navigiere also zu Layout » Templates und klicke auf “neues Template”. Klicke nun auf den Eintrag unter “Original Template”, es öffnet sich eine Eingabemaske, in der du den Suchbegriff “fe_page” eingeben kannst.
Wähle das Ergebnis aus und speichere es. Nach dem Speichern wirst du automatisch zu der Übersicht aller Templates gebracht, schaue dort nach dem Template und klicke das drittletzte Icon “den Quelltext der Datei bearbeiten”.
Vor dir liegt nun der Aufbau jeder Seite auf deiner Website - Anhand dieses Dokuments, werden alle Seiten geformt - darauf nehmen wir nun Einfluss! Zirka zwischen Zeile 50 und 60 (abhängig der Contao Version) steht irgendwo der Tag “<?php $this->block('main'); ?>” ein PHP-Code, welcher die Hauptspalte der jeweiligen Seite lädt, auf der sich der User gerade befindet. Eine Zeile dort drüber erstelle bitte die PHP-Anweisung: <?php $this->section('left-custom'); ?> WICHTIG: in die einfachen Anführungszeichen muss die entsprechende ID deiner Linken spalte (festgelegt in den Layoutbereichen, Bild 01). Dieser kleine Befehl sorgt dafür, dass der Inhalt (zurzeit noch nicht vorhanden) unserer Linken Spalte geladen wird.
Im letzten Schritt benötigen wir wieder Mal ein wenig CSS-Zauber und dann sind wir auch schon fertig! Zunächst die Definitionen:
#left-custom + #main div.inside {
width: 100% !important;
}
#container {
max-width: 1200px;
margin:auto;
}
#left-custom .inside,
#main .inside,
#footer-custom .inside {
padding:15px;
}
@media (min-width: 800px) {
#main div.inside, #footer-custom div.inside{
width: 75vw;
}
#left-custom {
background-color:blue;
display: inline-grid;
width: calc(25% - 4px);
vertical-align: top;
}
#left-custom + #main {
background-color:red;
display: inline-grid;
width: 75%;
vertical-align: top;
}
}
#main,
#footer-custom {
margin:auto;
max-width:1200px;
}Ich würde dir vorschlagen, die CSS-Datei vom letzten Mal zu leeren und diese Definitionen dafür einzutragen. Wegen eines Denkfehlers musste ich auch Änderungen an den bestehenden CSS-Definitionen vornehmen. Die Einfärbung in #left-custom und #left-custom + #main kannst du am besten wieder rausnehmen, dienen nur der Übersicht.
Nun kannst du auf deine Seite gehen, einen neuen Artikel in den Bereich Left erstellen, in mit Inhalt füllen, dann dürfte deine Seite zirka so aussehen:
