Jan
12

Theme2Go goes Contao 4

Im Theme Store gibt es nun das erste Contao 4 kompatible Theme - Unser Theme2Go #1 – Health-Navigator

Jan
12

Theme2Go goes Contao 4

Im Theme Store gibt es nun das erste Contao 4 kompatible Theme - Unser Theme2Go #1 – Health-Navigator

Unsere Entwickler arbeiten bereits fleissig an den ersten Contao 4 Modulen. Leider gibt es aktuell noch kein Contao 4 Theme. Nichtmals die Offizielle Demo steht für Contao 4 zur Verfügung, obwohl das Kern System im Juni letzten Jahres Gold gegangen ist.

Um unsere Module im Frontend besser testen zu können, aber auch um die ersten Erfahrungen in der Frontend Entwicklung für Contao 4 zu machen, entschieden wir uns kurzerhand, das erste Theme unserer Theme2Go Reihe auf den aktuellsten stable Release zu portieren.

Das Theme2Go #1 – Health-Navigator findet ihr weiterhin im Contao Store. Seit heute auch mit Contao 4 Support! Die Erfahrungen, die wir bei der Migration gemacht haben, wollen wir euch nicht vorenthalten und im folgenden darüber berichten.

Seit Juli 2015 ist unser Theme - Theme2Go #1 - Health-Navigator - im Contao Theme Store verfügbar. Dank der tollen Resonanz und dem Feedback der User haben wir es regelmäßig mit Updates versehen und erweitert.

Da wir im Dezember ein größeres Contao 4 Projekt gestartet haben, zu der u.a. auch ein individual Theme gehört, wollten wir vorab schon mal ein paar Erfahrungen sammeln und haben die ersten Portierungstests von unserem Theme2Go #1 gemacht.

Wie erwartet, funktionierte das Theme nach einem Contao Update von 3.5 auf 4 nicht out of the box. Erfreulicherweise war es aber kein allzu großer Aufwand bis wir das Frontend halbwegs lauffähig hatten. Danach stand nur noch Feintuning an.

Zu Beginn haben wir unser Theme in ein frisches Contao 3.5 System installiert und dieses dann auf Contao 4 aktualisiert. Das ist wichtig für die Portierung eines Themes, da sich ein Contao 3.5 Theme sonst nicht korrekt in ein Contao 4 installieren lässt.

Bilder fehlen... ...oder auch nicht.

Als erstes fiel uns auf, dass alle Bilder, Icons und einige Assets nicht geladen wurden.

Das ließ mich (den Designer im Haus) erst mal ratlos. Alle Pfade waren korrekt – es hatte sich nichts geändert. Die Lösung war dann viel zu einfach und zum Glück hatte Daniel bereits bei seinen ersten Tests vor dem selben Problem gestanden, so dass es nicht allzu viel Zeit gekostet hat.

Ab Contao 4 sind die Ordner in der Dateiverwaltung nicht mehr standardmäßig auf öffentlich eingestellt. Es fehlte nur ein Häckchen zu setzen...

...und schon war alles wieder da. Wir haben unsere Theme-Ordner auf öffentlich gesetzt und alle darunter liegenden Ordner erben diese Einstellung.

CSS, Icons und Templates

Wesentliche Anpassungen betreffen CSS Selektoren. Ab Contao 4 haben sich einige Klassennamen verändert. Ein Beispiel: In Formularen war der Submit Button vorher ein <div>-Container mit der Klasse .submit-container. In Contao 4 heisst die Klasse nun .widget-submit. Durch diese Änderung fehlte das gesamte Styling unserer Submit Buttons und sie erscheinten so nur noch im langweiligen, grauen Default Look des Browsers.

Zum Glück gibt es bereits einen offiziellen Migrations Guide in dem viele der nötigen Anpassungen bereits aufgeführt sind. So auch alle neuen / geänderten CSS Selektoren.

Bei genauerem hinsehen haben wir die Mime Icons vermisst - z.B. bei dem Download Content Element. Diese sind von allen Templates entfernt worden. Stattdessen gibt es ein neues Stylesheet: icons.css, welches über die Layouts-Sektion eingebunden wird. Das heißt die Icons werden als background-image mit CSS dargestellt. Bei unserem Theme mussten wir deswegen das Styling anpassen, damit die Icons als Hintergrundbild nicht von Text überlagert werden.

Knifflig wurde es wo sich Pfade zu Dateien geändert haben. Das betrifft z.B. die colorbox.min.js, die über unser angepasstes Template j_colorbox abgerufen wird. Damit wir nicht unterschiedliche Templates für die verschiedenen Contao Versionen pflegen müssen haben wir an dieser Stelle eine if Bedingung in das Template eingebaut. Sie überprüft ganz einfach die Contao Version und setzt den entsprechend korrekten Pfad.

j_colorbox.html5

<?php if(version_compare(VERSION, '4', '<')) : ?>
  <script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo COLORBOX; ?>/js/colorbox.min.js"></script>
<?php else: ?>
  <script src="<?= TL_ASSETS_URL ?>assets/colorbox/js/colorbox.min.js"></script>
<?php endif; ?>

Neues Markup - Umdenken erforderlich

Da unser Health-Navigator Theme eigene Templates verwendet wurde es von Markup-Veränderungen nicht betroffen. In einem anderen Projekt bin ich dennoch darauf gestoßen und finde es erwähnenswert. Zwei Beispiele möchte ich hervorheben:

  1. In der Navigation wird der aktive Menu-Punkt nun mit <strong> anstatt <span> definiert. Das ist für das Styling mit CSS eine kleine Umstellung die etwas umdenken erfordert (z.B. muss die font-weight explizit für das <strong> Tag an diese Stelle definiert werden damit sie nicht in Fettschrift dargestellt wird).
  2. In dem fe_page Template wird nun das Tag <main> für den Main-Container verwendet. Da das <main> Tag nur bedingt vom Internet Explorer unterstützt wird kann es Darstellungsprobleme geben. Abhilfe gibt es, in dem man darauf achtet, dass das main Tag im CSS mit "display: block" versehen wird.

Sonstiges

Wenn man ein Contao 3.5 cto- File installiert gibt es die Meldung, dass ein paar SQL Felder nicht existieren.

Zum Beispiel:

  • tl_style_sheet.disablePie
  • tl_module.tableless
  • tl_module.space

Diese werden nicht mit importiert. Nach dem Import einfach einen neuen Export machen, dann fehlen die Felder automatisch und es gibt keine Meldungen mehr.

Fazit

Bis auf ein paar Kleinigkeiten lassen sich bestehende Themes, die ohne Fremdextensions auskommen, ohne große Probleme auf Contao 4 portieren.

Fast alle Probleme auf die wir gestossen sind, sind bereits im Migrations Guide dokumentiert. Auch das Arbeiten allgemein mit Contao 4 gestaltet sich relativ problemlos. Die meisten Kinderkrankheiten scheinen laut unseren Entwicklern in 4.1 behoben worden zu sein. Nur noch ein paar Hürden beim Caching in Verbindung mit automatischen Deploys und mit dem Developer Modus auf FCGI Systemen.

Unser Theme2Go #1 - Health Navigator ist bereits Contao 4 kompatibel. Unser erstes großes Contao 4 Projekt startet voraussichtlich noch im Januar. Die ersten closed Source Module befinden sich bereits im Testing und auch bei unserem aktuellen Open Source Projekt, der Contao - phpBB - Bridge, welche zuerst exklusiv für Contao 4 erscheinen wird, schreiten die Arbeiten gut voran.

Wie schaut es bei euch aus? Habt ihr bereits Erfahrung mit der Contao 4 Theme Entwicklung oder Allgemein gesammelt? Wie sind eure Eindrücke?

Dieser Artikel teilen

Autor

Zurück

Kommentare

comments powered by Disqus