von Joomla zu TYPOlight: das Layout

Als ich mich die ersten Male mit TYPOlight beschäftigt habe, hatte ich noch ziemlich die “Joomla Denke” drin. Es war ziemlich gewöhnungsbedürftig. Unter anderem die Erstellung eines Seitenlayouts, das in Joomla das Template ist.

Ich werde daher nun mal einiges unter die Lupe nehmen, es geht los mit der Frage zum Seitenlayout aus Sicht einer ehemaligen Joomla Benutzerin.Das Prinzip hinter den TYPOlight Seitenlayouts (dahinter verbirgt sich, was die Joomlaianer als Template kennen) ist im Prinzip ganz einfach, nur eben anders als man es von Joomla kennt.
Da es einige TYPOlight User gibt, die aus der Joomla Ecke kommen und es zwar eine Reihe von Anleitungen gibt, die aber nur Teile de Ganzen beschreiben, hier eine Anleitung zum Layoutbau allgemein und vielleicht ein bisschen aus Joomla Sicht.
Die Anleitung beschreibt nicht, wie man über das Backend ein neues Seitenlayout anlegt. Dies ist oft genug beschrieben.
Vielmehr kann man hier nachlesen, wie das “from the scratch” funktioniert, - total händisch.
Ich gehe davon aus, dass das Anlegen eines Seitenlayouts grundsätzlich bekannt ist.

Für alle Joomla Benutzer ein bisschen Terminologie

Wenn hier von Seitenlayout oder Layout die Rede ist, so ist damit das eigentliche Joomla Template gemeint,
wenn hier von Templates die Rede ist, so meine ich damit kleine Template-Elemente, die das HTML von Seitenelementen oder auch der Gesamtseite bestimmen.
Das Modul ist in Joomla eine sehr eingegrenzte “Spezies”: dazu gehören Navigationselemente und einiges andere, meistens kleine Snippets, die mit Komponenten zusammenarbeiten (die neuesten Bilder einer Bildergalerie).
Das Modul in TYPOlight ist mehr. Man kann eigentlich aus fast allem ein Modul erstellen und erhält damit ein Layoutelement mit (nahezu) beliebigem Inhalt oder Funktionalität.
Damit wird auch der View auf das, was in Joomla Komponenten genannt wird, zum Teil bzw. optional über Module gesteuert.

Die Zutaten für ein TYPOlight Layout bestehen aus folgenden Komponenten

• einem Ordner /meineLayoutDateien, der im Ordner /tl_files abgelegt wird ,also [typolight_root]/tl_files/meineLayoutDateien
• einem oder mehreren CSS Dateien
• Template Dateien für das Seitengrundgerüst und einzelne “Seiten Snippets”, zu finden in [typolight_root]/system/modules/frontend/templates bzw. im jeweiligen Modul Ordner unter [typolight_root]/system/modules

Die Template Dateien bestehen aus mindestens einer Seite fe_page.tpl, die das Seitengrundgerüst beschreibt.
Dies ist die Basis - damit sollte als begonnen werden.

Wer sich den Templates Ordner genauer ansieht, wird feststellen: fast einzelne Element hat sein eigenes Template.
Wer, wie später beschrieben, die Administrationsoberfläche näher in Augenschein nimmt, wird feststellen, dass man für jede Seite und für jedes einzelne Element ein eigenes Template erstellen kann.
Alles in Allem zeigt sich TYPOlight damit außerordentlich flexibel, was die Seitengestaltung betrifft. In wie weit man dies ausreizen muss, hängt natürlich stark von den eigenen Anforderungen an einen Internetauftritt ab. Möglich ist es jedenfalls, für jede Seite einen komplett anderen Aufbau zu kreiieren und vor allem Elemente wieder zu verwenden. Die Steuerung funktioniert hier in meinen Augen wesentlich flexibler als in Joomla.
Ein echter Spaß also für CSS und HTML Fans.

Tipp:
aus meiner Sicht gibt es hinsichtlich der Layoutgestaltung durchaus einige Gedanken, die man sich vorab machen sollte.

Erste Schritte

Der erste Schritt sollte sein, die mitgelieferte fe_page.tpl etwas näher unter die Lupe zu nehmen.
Dies entspricht übrigens im weitesten Sinn der index.php eines Joomla Templates. Dort wird das grundlegende Seitenlayout definiert sowie die Positionen, an denen später Inhalte, Menüs und andere Module stehen werden.
TYPOlight kommt in der Grundausstattung nur mit einigen Layoutbereichen: links, Kopfbereich, Fußzeile und natürlich dem Hauptbereich main.
Diese sind in die Basisversion bereits integriert und werden über
[name_des_bereichs]; ?>
eingebunden, also wirklich ganz simpel.
Ich empfehle, hier wirklich mal klein anzufangen.
Um ein bisschen Ordnung zu halten und den Überblick nicht zu verlieren, mein Tipp: dem neuen Template einen neuen, eigenen Namen geben.
Wie die Benennung der Templates sein muss, ist im Backend, wie auch der TYPOlight Website eingehend beschrieben.

Das neue Template für den Seitenaufbau muss per FTP auf den Server geladen werden.
Nun wird über das Backend ein neues Seitenlayout angelegt und dafür die neue Vorlage (beispielsweise fe_page_test.tpl) als Basis gewählt.
Es ist nun fürs Erste lediglich noch nötig, die gewünschten Module ins Seitenlayout einzubinden.
D.h. es ist nicht nötig, Angaben zur Anzahl der Spalten zu machen, ebenso ist keine Angabe von Höhen und Breiten nötig.
Warum ich davon nicht so überzeugt bin, liegt klar auf der Hand:
diese Informationen werden dem Seitenlayout über interne Styles hinzugefügt.
Für alle anderen eine Frage des Geschmacks.
Ach ja: und man muss natürlich mindestens eine bereits angelegte CSS Datei mit dieser Layoutvorlage assoziieren, damit das Ganze auch schön aussieht.

Eigene Layoutbereiche

TYPOlight kommt in der Grundausstattung nur mit einigen Layoutbereichen: links, Kopfbereich, Fußzeile und natürlich dem Hauptbereich main.
Wer wirklich ganz autarg und unabhängig von Automatismen sein möchte, wird alles andere, das nicht über left, die Kopfzeile und main abzudecken ist, über eigene Layoutbereiche definieren.
Für die Nutzung eigener Layoutbereiche sind folgende Schritte nötig:

1. Definition dieses Layoutbereichs unter “Einstellungen”, dies entspricht im Wesentlichen der Erstellung eigener Modulpositionen in Joomla
2. Integrieren dieser Layoutbereiche in die TYPOlight fe_page.tpl über getCustomSection(’[name_meiner_Layoutposition]‘); ?>
   Achtung: wer das Seitenlayout in HTML sehr konsequent über IDs und Classes definiert, sollte bei der Benennung aufpassen, um CSS Validierungsprobleme zu vermeiden. Auch für die CustomSections werden anhand des Namens dieses Layoutbereichs IDs vergeben, die Benennung sollte daher nicht identisch sein mit einer anderen ID der fe_page.tpl.
3. Anlegen eines neuen Seitenlayouts und Integration des neuen, individuellen Layoutbereichs, siehe auch die
   

   Sollte man eigene Elemente einfügen wollen, werden diese mit diesem Code in das Template eingefügt: Wichtig! Diese müssen im Backend explizit angegeben werden, damit sie zur Verfügung stehen.

Der HTML Header

Die Anpassung des Headers ist äußerst flexibel, denn TYPOlight sieht dafür eine Reihe an Variablen vor, die beliebig integriert werden können:
Eine Übersicht findet man beispielsweise hier:

Für die ersten Schritte reicht eine Anpassung oder das simple Übernehmen des Headers der Vorlage.
Ebenso nutzbar im Layout wie auch in jedem Inhaltselement: die , die auf der Typolight Seite dokumentiert sind.
Übrigens können zusätzliche Headertags auch direkt im Backend bei der Layouterstellung eingegeben werden. Ich bin da eher ein Fan der händischen Methode.

Anders bei TYPOlight

Auf jeden Fall komfortabler als bei Joomla: das Editieren der Stylesheets im Backend, dafür allerdings auch gewöhnungsbedürftiger (was sich mit TYPOlight 2.6 ändern soll).
Stylesheets können entweder importiert oder neu angelegt werden. Der Editor ist eigentlich so komfortabel, dass man sich zumindest über die Syntax von CSS keine Gedanken machen muss. Ein bisschen Ahnung sollte man allerdings trotzdem mitbringen.
Für den versierten CSS Coder alles in allem etwas umständlich und zeitintensiv.
Hier bietet es sich an, erst mit einem bereits halbwegs vollständigen CSS nach TYPOlight zu gehen.
Hinweis:
wenn ein Stylesheet erstmal angelegt oder importiert wurde, wird es im Rootverzeichnis der Installation abgelegt.
Diese im Rootverzeichnis liegenden Dateien unterliegen der Kontrolle von TYPOlight und damit auch der Versionierung.
Wird also eine CSS Datei neu importiert, ist alles überschrieben.
Lädt man ein neues CSS einfach ins Rootverzeichnis, so kollidiert dies mit der Versionierung und hat keinen Effekt (außer etwas Verwirrung).
Es ist daher geschickter, das CSS aus Root per FTP zu holen, lokal zu bearbeiten, dann nach /tl_files oder in ein Unterverzeichnis zu laden und von dort aus neu zu importieren, womit die alte Version überschrieben wird, trotzdem aber die Versionierung korrekt funktioniert.

Umzug eines Joomla Templates zur Nutzung in TYPOlight

Ganz schnell und ziemlich einfach kann ein Joomla Template nach TYPOlight umgezogen werden.
Dazu kopiert man lediglich die “Innenstruktur” des BODY Tags aus der index.php des Joomla Templates in die fe_page.tpl Datei bzw. ersetzt diese mit dem “Innenleben” des TYPOlight Templates

Tipp:
man sollte, wenn man noch nicht so erfahren ist, auf jeden Fall die anweisungen für mootools etc zunächst nicht mit dem Ersetzen löschen.
Ggf. macht es auch Sinn, die Joomla Anweisungen gleich nach dem BODY Tag einzufügen und die Anweisungen der fe_page erst im allerletzten Schritt zu löschen.

Nun müssen die Joomla Anweisungen zur Moduleinbindung durch die der TYPOlight Syntax ersetzt werden.
Falls es dabei Joomla Modulpositionen gibt, die TYPOlight nicht kennt, müssen diese -wie oben beschrieben- definiert und später ins Layout mit integriert werden.
Weiter geht es dann wie oben bereits beschrieben.
Als nächstes müssen natürlich die Joomla CSS Dateien importiert und mit dem Layout assoziiert werden. Wie das geht, ist ebenfalls oben beschrieben.

Wer nun das Frontend aufruft, wird hoffentlich zunächst schon mal eine “nicht zerrissene” Grundseite vorfinden, denn die CSS Anweisungen wurden samt der IDs und Klassen für DIV (ich gehe mal davon aus, hier arbeitet keiner mit Tabellen…) übernommen.
Nun geht es noch ans Finetuning und das ist dann doch noch etwas Fleißarbeit.
Einige Joomla sepzifischen Styles werden schlicht wegfallen.
Andere müssen gemappt werden, auf das TYPOlight Pendant. Dies betrifft vor allem die Menüs.

Tipp:
Für die ersten Arbeiten empfiehlt sich die Webdeveloper Extension des Firefox und die Nutzung von “CSS –> view style information”

So, geschafft… und nun könnte man noch ausmisten ;-)
Außerdem wird vielleicht der ein oder andere plötzlich feststellen, dass das Design und Layout Konzept hinter TYPOlight wirklich flexibler ist, plötzlich Sachen funktionieren, die in Joomla immer ein Problem waren und dann doch beschließen, dass ein Relaunch die bessere und spannendere Variante ist…

Vorschlag: die ersten Schritte

Ich habe mir für möglichst wenige Klicks folgende Vorgehensweise überlegt, die allerdings auch erfordert, dass man vorab einiges an Konzeption erledigt hat.

Zunächst benötigt man eine wenigstens rudimentäre Seitenstruktur.

Im nächsten Schritt werden die Module erstellt.

Im nächsten Schritt lädt man bei Bedarf neue Vorlagen per FTP in das /templates Verzeichnis des Frontends bzw. anderer Module.

Falls vorhanden, lädt man eine mindestens rudimentäre CSS Datei per FTP in das tl_files Verzeichnis und importiert dieses über Layout –> Stylesheets.

Erst im letzten Schritt erstellt man das neue Seitenlayout.

Man muss dann nur ggf noch einmal in die Seitenstruktur, falls es sich nicht um das Standardlayout handelt, aber man hat bereits alle Vorarbeiten geleistet und kann alle Stylesheets, Module und Templates einbinden und zuweisen. Spart mindestens 4-5 Klicks.

Dann kommt das Finetuning…