Das Contaobuch und Contao 3.2

Websites erstellen mit Contao 3 (Cover)

In diesem Beitrag beschreibe ich Neuerungen in Contao 3.2, die beim Durcharbeiten des Buches relevant sind. In nicht erwähnten Kapiteln hat sich nichts Wichtiges geändert.

Wer also »Websites erstellen mit Contao 3« gerne mit Contao 3.2 durcharbeiten möchte, sollte diesen Artikel gründlich studieren und die Frontend-Templates für V3.2 herunterladen.

Auf contao.org gibt es bei Bedarf den kompletten Changelog für V3.1 und V3.2 zum detaillierten Studium. Letzte Änderung an diesem Artikel: 04. März 2014 (siehe Kommentar). 

Kapitel 4 - Installation

Die Installation verläuft mehr oder weniger genauso wie in Kapitel 4 beschrieben, auch wenn immer mal wieder ein paar Details geändert werden und das Checktool mittlerweile ein paar Versionen weiter ist. Aufgefallen sind mir folgende Änderungen 

Seite 84: In Abbildung 4.5 gibt es ein neues Feld namens “Socket-Datei” (#5181). 

Seite 86: In Abbildung 4.6 wird die lange Liste der SQL-Statements jetzt in einem scrollbaren DIV präsentiert, was die gesamte Installation sehr viel übersichtlicher macht.

Seite 87: In Abbildung 4.7 gibt es eine neue Option beim Importieren des Templates namens "Die Repository-Tabellen überschreiben" (#6470). 

Bei Benutzernamen wird ab Contao 3.2 zwischen Groß- und Kleinschreibung unterschieden. 

Kapitel 5 - Backend

Seite 114: In Abbildung 5.1 gibt es oben einen rot hinterlegten Hinweis bezüglich des internen Cache von Contao und daneben die Schaltfläche “Den Cache aufbauen”. Die Schaltfläche kann man ruhig anklicken. 

Seite 115: In Abbildung 5.3 sind in den persönlichen Daten die Google+-Einstellungen hinzugekommen, mit denen man seineProfil-ID oder die Vanity URL von  Google+ hinterlegen kann (#4914 und #6454).

Seite 119: In Abbildung 5.5 steht die "Titel der Webseite" jetzt oben alleine. Die "E-Mail-Adresse des Systemadministrators" ist in den Bereich "Globale Einstellungen" gerutscht.

Seite 122: In Abbildung 5.8 gibt es im Dateimanager neben den Ordnernamen ganz rechts außen zwei neue Symbole. Ein grüner Kreis mit weißem Kreuz vereinfacht den Datei-Upload (#3432) und ein blauer Kreis mit weißem "i" zeigt Infos zum Ordner bzw. zur Datei (#6262).

Seite 124/5: Man kann Ordner auch von der Synchronisierung ausschließen, und zwar in “Einstellungen - Backendeinstellungen - Nicht zu synchronisierende Ordner". 

Kapitel 6 - Die erste Website

Seite 130: In Abbildung 6.2 ist die Meldung "No root page found" wesentlich informativer als früher. 

Seite 136: In Abbildung 6.7 ist die Meldung "No layout found" ebenfalls wesentlich informativer. 

Seite 141: Das Element <hgroup> ist momentan nicht in der W3C-Spec von HTML5 enthalten. Wer es nicht benutzen möchte, kann stattdessen einfach <div class="hgroup"> schreiben und ändert im CSS den Selektor hgroup zu .hgroup (siehe auch "Flexible Boxes", Seite 108/109). 

Kapitel 7 - Das erste Stylesheet

Seite 168: In Abbildung 7.5 gibt es im CSS-Editor unter "Abstand und Ausrichtung" eine neue Option "white-space" für die gleichnamige CSS-Eigenschaft.

Seite 171: In Abbildung 7.8 gibt es im CSS-Editor im Bereich "Schrift" die Option "Automatischen Zeilenumbruch ausschalten" nicht mehr. 

Seite 173: In Abbildung 7.10 gibt es eine von mir lang ersehnte Option namens "CSS3Pie deaktivieren". 

Seite 177, oberhalb von Abbildung 7.11. CSS3Pie kann jetzt deaktiviert werden. Die Anweisungen (behaviour:...) erscheinen zwar trotzdem im Stylesheet, aber die PIE.htc wird nicht eingebunden.

Seite 177: In Abbildung 7.11 haben sich gleich zwei Dinge geändert. Ganz oben ist "Filtern/Suchen" jetzt zweizeilig. Die neue Option  "Unsichtbar" filtert per Augenklick ausgeblendete Styles. Neben den Styles gibt es ganz rechts außen ein Symbol mit drei grünen Linien zum Verschieben von Styles. Das ging früher einfach mit einem Klick irgendwo auf dem Style.

Seite 178: In Tabelle 7.1 fehlt das neue Symbol "drei grüne Linien" zum Verschieben von Formatdefinitionen.

Seite 180: In Kapitel 7.3.7 sollte der CSS-Reset im Seitenlayout vor dem Layout-Builder stehen, damit es etwa so aussieht wie in Abbildung 7.13. 

Seite 192: In den Abbildung 7.19 und 7.20 sind die Filteroptionen im Kopfbereich jetzt zweizeilig (siehe oben, Seite 177). Die neue Filteroption “Unsichtbar” ist sehr praktisch, denn damit lassen sich z. B. nur ausgeblendete Styles anzeigen. 

Kapitel 8 - Das CSS-Framework

Seite 203: In Tabelle 8.1 wurde das "Responsive Grid" in "12-Spalten-Grid" umbenannt und das entsprechende Stylesheet heißt einfach nur noch "grid.css". Die alten Bezeichnungen hatten für ziemlich viel Verwirrung und noch mehr Missverständnisse gesorgt, da viele Benutzer dachten, dass man das "Responsive Grid" aktivieren muss, um eine Website "responsive" zu machen (#5475). 

Seite 215 unten: In Listing 8.12 ist in der layout.css, Teil 3, die Anweisung #header, #footer { height: auto; } raus (#5368). 

Seite 216 unten: In Listing 8.13 sind die Styles für "Flexible images" inhaltlich gleich geblieben, werden aber jetzt anders (und deutlicher) geschrieben (#5789). 

Seite 218: In Listing 8.15 werden in der layout.css die "custom layout sections" jetzt mit dem Micro-Clearfix-Hack gecleart (#6203).

Seite 220/221, Listing 8.18. In der reset.css hat es auch Änderungen gegeben. Für body wird line-height auf 1 gesetzt (12px/1) und die Verblockung der HTML5-Elemente aus layout.css wird hier wiederholt (#6151). 

Seite 224 Mitte: Das Stylesheet heißt jetzt grid.css (siehe auch Seite 203). 

Seite 225: In Listing 8.22 haben sich die Selektoren geändert und ein Style für News/Events wurde komplett neu hinzugefügt, siehe aktuelle Version von grid.css auf Github.

Seite 227: In Listing 8.26 ist der Reset für die Gridklassen ist jetzt mit !important

Seite 230: CSS3Pie kann man jetzt deaktivieren (siehe auch Seite 173 und 177). 

Kapitel 9 - Navigation

Seite 250ff: Für die "Individuelle Navigation" kann die Reihenfolge der Navigationspunkte jetzt bequem per Drag & Drop geändert werden. Es gibt im Backend dazu aber auch einen nicht zu übersehenden Hinweis.

Seite 261: Die "Breadcrumb-Navigation" ist eine ungeordnete Liste und kann recht leicht gestaltet werden. Listenelemente nebeneinander stellen geht per display:inline, display:inline-block oder float:left. Und für die Trennzeichen zwischen den Elementen nimmt man am einfachsten die Pseudoklasse :after (oder ändert das HTML im Template mod_breadcrumb).

Das folgende Listing ist als (ungetestete) Anregung gedacht: 

/* Listenelemente nebeneinander stellen */ 
.mod_breadcrumb li { display: inline-block; } 

/* Nach einem Listenelement das Trennzeichen einfügen */ 
.mod_breadcrumb li:after { content: " > "; }

/* Nach dem letzten Listenelement kein Trennzeichen */ 
.mod_breadcrumb li.active:after { content:""; }

Siehe auch auf Github - Contao Core: #1258 Breadcrumb Template auf den neuesten Stand bringen. Wer gerne schickere Breadcrumbs mit CSS3-Dreiecken hätte, muss einfach nach "Breadcrumb CSS" googlen.

Kapitel 10 - Inhaltselemente

Seite 273: In Abbildung 10.6 werden die Contao-Seiten und Contao-Dateien jetzt durch zwei kleine Icons rechts neben dem Feld "Adresse" dargestellt.

Seite 291: In Abbildung 10.17 erscheint jetzt ganz oben ein Hinweis, dass ein Template für die Galerie im Seitenlayout eingebunden sein muss. Außerdem steht neben den Bildern, dass die Reihenfolge per Drag & Drop geändert werden kann.

Seite Contao 3.1 gibt es ein neues Inhaltselement namens Content-Slider, das auf swipe.js basiert und somit auch auf Touchscreens funktioniert (#4600). 

Kapitel 11 - Weitere Inhaltselemente

Seite 314: Ganz oben erscheint ein Hinweis, das im Seitenlayout ein Template für ein Akkordeon eingebunden sein muss. Außerdem erfolgt die Wahl der Betriebsart direkt bei der Auswahl des Elementtyp Akkordeon. 

Seite 316: In Listing 11.5 gibt es eine zusätzliche Klasse mit einem Hinweis auf die gewählte Betriebsart, z. B. <section class="ce_accordionSingle ce_accordion block">

Kapitel 12 - Formulare

Seite 337: Beim Formulargenerator gibt es im Bereich "Experten-Einstellungen" eine neue Option namens "HTML5-Validierung deaktivieren", die dem Formular das Attribut novalidate zuweist. 

Seite 350: Die Erweiterung [moretags] wird anscheinend nicht mehr gepflegt. Die Erweiterungen [inputvar] und der Klassiker [efg] aka "Extended Formular Generator" erfreuen sich hingegen bester Gesundheit. Da der [efg] für die Ausgabe einiger Variablen auf einer "Vielen-Dank-Seite" etwas überkandidelt ist, würde ich den Einsatz von [inputvar] empfehlen. Dazu müssen Sie nach der Installation der Erweiterung in den Insert-Tags der Tabelle 12.1 einfach form durch post ersetzen: { {post::name} } etc.  (natürlich ohne die Leerstelle zwischen den geschweiften Klammern). 

Kapitel 21 - Mitglieder

Seite 570: In Abbildung 21.8 ist ein Schloss-Symbol zu sehen, dass es nicht mehr gibt. Jetzt findet man diese Funktion nach einem Klick auf den "Bleistift" als Option "Geschützt". 

Kapitel 23 - Wartung

Seite 596: In Abbildung 23.3 gibt es eine zusätzliche Option namens "Suchcache leeren", die die Dateien aus dem Ordner system/cache/search entfernt.

Es gibt einen neuen Wartungsmodus, bei dem im Frontend anstatt der Webseite ein 503er-Header gesendet und eine neutrale Wartungsseite angezeigt (#4561). Der Wartungsmodus wird automatisch aktiviert, wenn Erweiterungen über das Extension Repository installiert, aktualisiert oder entfernt werden. Wenn ein Benutzer im Backend eingeloggt ist, bleibt der Wartungsmodus inaktiv (#6353). 

Kapitel 25 - Tipps und Tricks

Seite 640: Eigene Layoutbereiche werden nicht mehr im in den Systemeinstellungen definiert, sondern im Seitenlayout. Außerdem gibt es zwei neue mögliche Layoutbereiche:

  • top: vor dem #wrapper-Element
  • bottom: nach dem #wrapper-Element

Mehr dazu gibt's im Ticket auf Github: #2885.

Seite 651: Beim Insert-Tag file kann man jetzt UUIDs benutzen (Forumsbeitrag dazu).

Seite 652: Die Syntax für den Insert-Tag iflng wurde vereinfacht (#6291), sodass der Ende-Tag nur ganz am Ende stehen muss:
{ {iflng::de} }Hallo{ {iflng::en} }Hello{ {iflng} }

Die Insert-Tags auf dieser Seite enthalten eine Leerstelle zwischen den doppelten geschweiften Klammern, damit sie hier dargestellt und nicht von Contao ausgeführt werden. 

Noch was vergessen?

Falls Ihnen beim Durcharbeiten des Buches noch weitere Änderungen auffallen, immer her damit. Ich sammle sowas Zwinkernd

Kommentar von Carolina |

Lieber Peter,

> Seite 141: Das Element <hgroup> ist momentan nicht in der W3C-Spec
> von HTML5 enthalten, funktioniert aber trotzdem (siehe auch
> "Flexible Boxes", Seite 108/109).

Vielleicht solltest Du darauf hinweisen, dass <hgroup> zwar zur Zeit noch funktioniert, aber letztlich obsolet ist und nicht mehr verwendet werden sollte. Mich ärgert's auch ... ;-)

LG, Carolina.

Antwort von Peter Müller

Ich wollte <hgroup> erst ganz rausschmeißen, aber solange es im CSS zum Block-Element befördert wird, kann ja eigentlich nicht viel schiefgehen. Und jetzt wo der Outline-Algorithmus in der Spec von HTML 5.1 gelandet ist, wird das ja vielleicht doch noch mal was mit <hgroup>. Ich lasse es erstmal noch ein bisschen drin, habe oben aber eine Alternative dazu geschrieben ;) 

Kommentar von Jochen Kubik |

Hallo Peter,
Im Kapitel 9.9.2 fehlt die Formatierung daß die breadcrumb Navi auch schön hintereinander kommt satt als Liste.

Grüße aus Ludwigsburg
Jochen Kubik

Antwort von Peter Müller

Danke für den Hinweis. Beim Nachdruck konnte ich nur den Hinweis unterbringen, dass es jetzt eine Liste ist. Für das HTML/CSS war kein Platz, weil die Seitenumbrüche sich nicht ändern dürfen. Ich habe es oben mal ergänzt. 

Kommentar von Norman Wienberg |

Hallo!

Erstmal herzlichen Dank für das tolle und vor allem hilfreiche Buch.
Auf der Seite 248 (Kapitel 9) hat sich ein kleiner Fehler eingeschlichen - zumindest hat die Vorgabe bei mir nicht hingehauen.

Es geht um den Farbverlauf für den Hintergrund des Hover-Menüs. Ich musste den Farbverlaufswinkel mit "to bottom" definieren, um den gewünschten Erfolg zu erreichen (internes Stylesheet).

MfG, Norman

Antwort von Peter Müller

Danke für das Kompliment zum Buch ;)

Das mit dem Farbverlauf stimmt, hat aber nichts mit Contao 3.2 zu tun und steht schon in den Errata:

Die Syntax für lineare Farbverläufe hat sich für die meisten Browser etwas geändert. Statt des Beginnpunktes top wird jetzt die Richtung angegeben: to bottom. Einige Browser benötigen noch top und die entsprechenden Browser-Prefixes, aber das macht der Contao-CSS-Editor von selbst (MDN zu linear gradients).

Kommentar von Bernhard |

Hallo!
Habe soeben bemerkt, dass in Kapitel 9.5, Schritt 3, ziemlich am Ende, Seite 248 von einem Verlaufswinkel TOP die Rede ist.
Hier müsste man eigentlich korrekter Weise "to top" oder in dem Fall "to bottom" schreiben - zumindest ist es auch so in der Beispielwebsite aufgeführt.

Antwort von Peter Müller

Stimmt absolut: 

Die Syntax für lineare Farbverläufe hat sich für die meisten Browser etwas geändert. Statt des Beginnpunktes top wird jetzt die Richtung angegeben: to bottom

Steht so für Seite 248 auch in den Errata Zwinkernd 

Kommentar von Marion |

Hallo Peter,

weißt Du schon, wann die neue Ausgabe Deines Buches erscheinen wird? Bei Thalia hieß es, im Laufe des September...?

LG Marion

Antwort von Peter Müller

Soweit ich weiß am 29. September 2014. So steht es auf der Verlagsseite zum Buch, und ich habe noch nichts Gegenteiliges gehört. 

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.