TYPO3

Im dritten und letzten Teil der Artikel-Serie kommen wir zur Konfiguration mit Plesk. Die Grundlegende Schritte sind zwar die gleichen aber es gibt hier und da ein paar kleine Unterschiede.  Zuerst müssen wir auch hier die “PHP.ini” oder besser eine “vhost.conf” anlegen bzw. bearbeiten.

Plesk – PHP.ini Konfiguration

Genau wie in ispCP müssen wir auch hier wieder den open_basedir-Pfad anpassen. Dazu müssen wir zuerst einmal in folgendes Verzeichnis gehen: “/srv/www/vhosts/meine-domain.de/conf“. Ihr solltet dort nun mindestens eine Datei mit Namen “httpd.include” vorfinden. Generell könnten wir diese schon bearbeiten aber wenn ihr etwas in Plesk machen solltet, wird dies wieder von Plesk überschrieben und ist daher nicht sehr ratsam. Deswegen legen wir jetzt eine neue Datei mit Namen “vhost.conf” an. Sollte die Datei bei euch schon vorhanden sein dann bearbeitet diese einfach.

In dieser Datei schreiben wir nun folgenden Eintrag rein:

<Directory "/srv/www/vhosts/meine-domain.de/httpdocs">
 php_admin_value open_basedir "/srv/www/vhosts/meine-domain.de/:/var/software2/typo3_src-4.3.8/:/tmp"
</Directory>

Achtung! Beachtet bitte das ihr den Pfad (/var/software2/typo3_src-4.3.8) an euer Verzeichnis anpasst.

Wir müssen nun jetzt noch Plesk sagen das wir hier eine Änderung getätigt haben, dies machen wir wie folgt (Console (STRG+T)):

/usr/local/psa/admin/bin/websrvmng --reconfigure-vhost --vhost-name=meine-domain.de

Und danach müssen wir auch hier wieder den Webserver neustarten. Der Befehl kann auch hier wieder variieren. Bei mir wäre dies folgender Befehl:

/etc/init.d/apache2 restart

Nachdem wir nun den Webserver neugestartet haben, können wir nun auch das TYPO3-Dummy-Paket anlegen.

Plesk – Dummy-Paket anlegen

Wir gehen nun zuerst in unser Webvereichnis. In Plesk ist das in etwa folgender Pfad: “/srv/www/vhosts/meine-domain.de/httpdocs“. Danach wechseln wir wieder in die Console (STRG+T) und benutzen diesmal WGET um das Dummy-Paket (Version 4.2.8, 05.07.2009) herunterzuladen.

wget http://downloads.sourceforge.net/sourceforge/typo3/dummy-4.2.8.tar.gz?use_mirror=dfn

Jetzt aktualisieren wir wieder das Fenster indem wir die Tastenkombination “STRG+R” benutzen und sollten dann die Datei “dummy-4.2.8.tar.gz” (kann je nach Version variieren) wiederfinden. Diese müssen wir nun auch wieder extrahieren, indem wir, wie oben schon beschrieben, einen Rechtsklick auf die Datei machen und dann “Benutzerdefinierte Befehle” -> “UnTar/GZip…” auswählen. Nachdem wir die Ansicht wieder aktualisiert haben, haben wir nun ein neuen Ordner mit Namen “dummy-4.2.8” im Verzeichnis. Das Archiv “dummy-4.2.8.tar.gz” können wir nun löschen (auswählen und “ENTF”-Taste drücken).

Wir wechseln nun einmal in das “dummy-4.2.8″-Verzeichnis und markieren alle Dateien indem wir “STRG+A” drücken. Danach schieben wir die ganzen Elemente mit gedrückter Maustaste auf den übergeordneten Ordner “..“. Wir bestätigen das Verschieben mit “Ok” und gehen wieder ein Verzeichnis zurück, indem wir nun auf die “..” klicken. Folgende Verzeichnisse sollten wir dann sehen:

Den Ordner “dummy-4.2.8” können wir nun auch wieder löschen. Wir sehen jetzt auch 3 Dateien die sich von den anderen ein bisschen unterscheiden. Ich rede hier speziell von den Dateien “index.php”, “t3lib”, “typo3″ und “typo3_src”. Dies sind jetzt Symlinks die noch keinen richtigen Pfad besitzen bzw. keinen gültigen. Symlinks sind generell nichts anderes als Verknüpfungen auf andere Dateien. Sozusagen eine kleine Umleitung

Was wir jetzt machen müssen, wir müssen den Symlink “typo3_src” den Pfad zu unserer TYPO3-Source geben. Dies geht ganz einfach!

Ein Rechtsklick auf “typo3_src” und dann “Bearbeite Verknüpfung” auswählen. Dort geben wir nun folgenden Pfad ein: “/var/software2/typo3_src-4.2.8“. Bitte denkt wieder daran, das ihr den Pfad an euren anpasst. Nachdem wir den Pfad mit einem Klick auf “Ok” bestätigt haben, sollte sich die Ansicht aktualisieren und die Symlinks sollten nun folgende Gestalt angenommen haben:

Das war alles! Ihr habt nun ein TYPO3-Paket angelegt, ohne ein zusätzliches Source-Paket zu verwenden. So könnt ihr nun mit vielen weiteren Webpaketen verfahren. Ihr könnt natürlich auch mehrere verschiedene Versionen* verwenden und diese dann je nach Wunsch einfach angeben in eurem Symlink. Bei einem Update überschreibt ihr einfach das Sourcepaket und alle anderen Pakete die darauf zugreifen sind auch Up2Date.

* Wenn ihr verschiedene Versionen verwenden wollt, achtet darauf das ihr das neue Verzeichnis dann wieder im “open_basedir”-Parameter angebt. Ihr könnt dort einzelne Verzeichnisse immer mit einem Doppelpunkt “:” trennen.

meine-domain.de

TYPO3

In Teil 2 der Artikel-Serie kommen wir nun zum etwas schwierigeren Teil der Installation. Im zweiten Teil möchte ich euch ein von zwei Szenarien vorstellen. Einmal ein Server mit Plesk und einmal ein Server mit ispCP. Dies hat zum Grund das wir einige Konfigurationen am Webserver vornehmen müssen und dieses je nach Controll-Panel etwas anders ausfallen können.

In Teil 2 von 3 zeige ich euch die Installation mit ispCP.

ispCP – PHP.ini Konfiguration

Bei ispCP haben wir 2 getrennte Ordner für die Konfiguration und für die eigentlichen Daten der angelegten Domain / Webseite. Wir gehen zunächst in die Konfiguration, bei mir ist dies folgender Pfad: “/var/www/fcgi/meine-domain.de/php5“. In diesem Ordner befindet sich eine Datei mit namen “php.ini”. Diese öffnen wir und gehen zu Zeile 217. In dieser Zeile sollte nun in etwa folgendes stehen:

open_basedir = "/var/www/virtual/meine-domain.de/:/usr/share/php/"

Dies ändern wir wie folgt ab:

open_basedir = "/var/www/virtual/meine-domain.de/:/var/software2/typo3_src-4.3.8:/usr/share/php/"

Achtung! Beachtet bitte das ihr den neu eingefügten Teil (/var/software2/typo3_src-4.3.8) an euer Verzeichnis anpasst.

Mit dem neu hinzugefügten Pfad erlauben wir der Domain bzw. dem Projekt auf dieses Verzeichnis zugreifen zu können.

Wir müssen nun jetzt noch den Webserver neustarten und danach sollte diese Änderung in Kraft getreten sein. Den Webserver starten wir jetzt wieder über die Console (STRG+T) neu. Der Befehl kann auch hier wieder variieren. Bei mir wäre dies folgender Befehl:

/etc/init.d/apache2 restart

Nachdem wir nun den Server neugestartet haben, können wir nun das TYPO3-Dummy-Paket anlegen.

ispCP – Dummy-Paket anlegen

Wir gehen nun zuerst in unser Webvereichnis. Bei mir  wäre dies folgender Pfad: “/var/www/virtual/meine-domain.de/htdocs“. Danach wechseln wir wieder in die Console (STRG+T) und benutzen diesmal WGET um das Dummy-Paket (Version 4.2.8, 05.07.2009) herunterzuladen.

wget http://downloads.sourceforge.net/sourceforge/typo3/dummy-4.2.8.tar.gz?use_mirror=dfn

Jetzt aktualisieren wir wieder das Fenster indem wir die Tastenkombination “STRG+R” benutzen und sollten dann die Datei “dummy-4.2.8.tar.gz” (kann je nach Version variieren) wiederfinden. Diese müssen wir nun auch wieder extrahieren, indem wir, wie oben schon beschrieben, einen Rechtsklick auf die Datei machen und dann “Benutzerdefinierte Befehle” -> “UnTar/GZip…” auswählen. Nachdem wir die Ansicht wieder aktualisiert haben, haben wir nun ein neuen Ordner mit Namen “dummy-4.2.8” im Verzeichnis. Das Archiv “dummy-4.2.8.tar.gz” können wir nun löschen (auswählen und “ENTF”-Taste drücken).

Wir wechseln nun einmal in das “dummy-4.2.8″-Verzeichnis und markieren alle Dateien indem wir “STRG+A” drücken. Danach schieben wir die ganzen Elemente mit gedrückter Maustaste auf den übergeordneten Ordner “..“. Wir bestätigen das Verschieben mit “Ok” und gehen wieder ein Verzeichnis zurück, indem wir nun auf die “..” klicken. Folgende Verzeichnisse sollten wir dann sehen:

Den Ordner “dummy-4.2.8” können wir nun auch wieder löschen. Wir sehen jetzt auch 3 Dateien die sich von den anderen ein bisschen unterscheiden. Ich rede hier speziell von den Dateien “index.php”, “t3lib”, “typo3″ und “typo3_src”. Dies sind jetzt Symlinks die noch keinen richtigen Pfad besitzen bzw. keinen gültigen. Symlinks sind generell nichts anderes als Verknüpfungen auf andere Dateien. Sozusagen eine kleine Umleitung

Was wir jetzt machen müssen, wir müssen den Symlink “typo3_src” den Pfad zu unserer TYPO3-Source geben. Dies geht ganz einfach!

Ein Rechtsklick auf “typo3_src” und dann “Bearbeite Verknüpfung” auswählen. Dort geben wir nun folgenden Pfad ein: “/var/software2/typo3_src-4.2.8“. Bitte denkt wieder daran, das ihr den Pfad an euren anpasst. Nachdem wir den Pfad mit einem Klick auf “Ok” bestätigt haben, sollte sich die Ansicht aktualisieren und die Symlinks sollten nun folgende Gestalt angenommen haben:

Herzlichen Glückwunsch! Ihr habt nun ein TYPO3-Paket angelegt, ohne ein zusätzliches Source-Paket zu verwenden. So könnt ihr nun mit vielen weiteren Webpaketen verfahren. Ihr könnt natürlich auch mehrere verschiedene Versionen verwenden und diese dann je nach Wunsch einfach angeben in eurem Symlink. Bei einem Update überschreibt ihr einfach das Sourcepaket und alle anderen Pakete die darauf zugreifen sind auch Up2Date.

In Teil 3 zeige ich euch, wie ihr das ganze mit Plesk hinbekommt.

TYPO3

Jeder der ein eigenen Server hat und dort mehrere TYPO3-Seiten hostet, kennt das Problem. Jedesmal muss man das Source- und Dummy-Paket auf den Webspace hochladen. Auch bei Updates ist es dann ziemlich nervig jedes einzelne Paket zu updaten. Ich möchte euch hier, in dieser 3-teiligen Artikel-Serie, zeigen, wie ihr mit einer zentralen TYPO3-Installation (Source-Paket), alle eure TYPO3-Webseiten darauf zugreifen lassen könnt.

Wir brauchen für das ganze die kostenlose Software WinSCP.

Was ist WinSCP?

WinSCP ist ein grafischer Open Source-SFTP-Client für Windows, der sowohl SSH wie auch das alte SCP-Protokoll unterstützt. SSH bietet einen geschützten Daten- und Dateitransfer zwischen verschiedenen Rechnern und ermöglicht die Nutzung geschützter “Tunnel”.

Nachdem wir WinSCP installiert haben, legen wir zunächst ein neues Profil für unseren Server an.

WinSCP Profil anlegen

Nachdem wir WinSCP gestartet haben, sollten wir folgendes sehen:

WinSCP - Start

Wie ihr seht sind bei mir bereits ein paar Profile bzw. Ordner vorhanden. Bei euch sollte die Liste leer sein und mit einem Klick auf “Neu” erstellen wir uns erstmal ein neues Profil.

WinSCP - Neue Sitzung

Wir tippen hier zuerst den Rechnernamen ein, dies kann eine Domain oder IP sein, danach geben wir den Benutzrnamen ein (Root-Zugang für die Shell) und das dazugehörige Kennwort. Danach klicken wir auf “Speichern“, können dann noch ein Profilname vergeben und klicken anschließend auf “Okay“.

Das soeben erstellte Profil sollte nun in unserer Liste auftauchen. Mit einem Doppelklick darauf verbindet sich WinSCP mit unseren Server.

TYPO3-Source installieren

Nun müssen wir zuerst ein Platz für unser TYPO3-Source finden. Bei mir habe ich ein Ordner unter “/var” erstellt mit namen “software“. Da bei mir alles schon installiert ist, erstelle ich einen neuen Order unter “/var” mit namen “software2“. Ihr könnt diesen wie ihr möchtet benennen.

Um in WinSCP einen Ordner anzulegen, gehen wir zuerst in das Verzeichnis wo der Ordner erstellt werden soll und klicken dann oben auf “Dateien” -> “Neu” -> “Verzeichnis” oder wir drücken “F7” auf der Tastatur und geben dann ein Name für das Verzeichnis ein.

Ist unser Ordner angelegt, klicken wir doppelt auf ihn drauf sodass wir uns in dem Order nun befinden. Als nächsten Schritt müssen wir uns zuerst das Source-Paket (Version 4.2.8, 05.07.2009) von TYPO3 herunterladen. Dies machen wir einfach mit dem “WGET“-Befehl.

Damit wir den Befehl ausführen können, müssen wir zuerst in die Console. Dies geschieht indem wir oben auf “Befehle” -> “Terminal öffnen” klicken oder auf der Tastatur “CTRL+T” drücken. In der nun erscheinenden Console geben wir folgenden Befehl ein und klicken anschließend auf “Ausführen“:

wget http://downloads.sourceforge.net/sourceforge/typo3/typo3_src-4.2.8.tar.gz?use_mirror=dfn

WinSCP - Console

Es kann vorkommen, das nachdem das Paket heruntergeladen wurde, eine überdimensionales Fenster erscheint mit komischen Meldungen. Dies können wir ignoieren und einfach auf “Okay” klicken. Die Console können wir nun schließen und uns wieder dem Hauptfenster widmen. Dort betätigen wir die Tastenkombination “CTRL-R” um die Ansicht zu aktualisieren und dann sollten wir auch das so eben heruntergeladene Paket sehen.

Nun müssen wir das Paket nur noch extrahieren. Dies geschieht indem wir einen Rechtsklick auf die Datei machen und dann “Benutzerdefinierte Befehle” -> “UnTar/GZip…” auswählen. Die darauf folgende Meldung bestätigen wir wieder mit “Okay“.

WinSCP - Extrahieren

Wir haben jetzt einen Ordner mit namen “typo3_src-4.2.8” (variiert je nach Version), dieser stellt nun unser Source dar welches wir für alle unsere Webpakete verwenden wollen.

Ihr habt jetzt schon einmal den Grundstein gelegt für eure TYPO3-Verwaltung. Im zweiten Teil zeige ich euch wie ihr mit einem TYPO3-Dummy dann auf dieses Paket zugreifen könnt.

MH-Dev. - Webentwicklung

Ich habe eben eine kleine Extension gebastelt (mh_phpinclude), mit der es möglich ist PHP-Dateien in TYPO3 einzubinden. Der Unterschied hier wie zum Beispiel zu der Extension lumophpinclude ist, dass es hier ausschließlich über TypoScript funktioniert. Eine Funktion die in lumophpinclude gefehlt hat.

Hier der TypoScript der dafür nötig ist:

lib.your_marker < plugin.tx_mhphpinclude_pi1
lib.your_marker.file = path/to/file.php

Die Extension müsste in den nächsten Minuten/Stunden im TER erscheinen. Vielleicht kann es ja noch ein anderer gebrauchen. Vielleicht kann man es auch mit T3-Boardmitteln lösen aber ich hab auf die Schnelle nichts gefunden und daher die kleine Extension gebastelt.

EDIT:

Dank der Kommentare (Danke an Icke!) sind nun auch die T3-Boardmittel aufgetaucht. Und zwar ist es möglich via PHP_SCRIPT, PHP_SCRIPT_INT und PHP_SCRIPT_EXT PHP-Dateien einzubinden. Ein genauen Link zur Docu findet ihr hier:

http://typo3.org/documentation/document-library/references/doc_core_tsref/4.2.0/view/1/8/#id4292763

MH-Dev. - Webentwicklung

Für einen Kunden habe ich ein kleinen Webshop gebastelt, den ich euch hier einmal kurz vorstellen möchte.

Der Kunde wollte auf seiner Webseite DVDs präsentieren und verkaufen. Ich habe schon Erfahrungen mit den anderen “Top”-Reiter in der TYPO3-Shopszene gesammelt und finde das diese meist “too much” sind und ich ehrlich gesagt auch keine Lust hatte, diese ganzen Templates etc. alles anzupassen. Daher habe ich eine kleine, simple Shop-Extension gebastelt, die leicht erweitert werden kann.

Shop in der Übersicht

Den Anfang macht die Kategorieübersicht. Man kann wahlweise natürlich auch sofort bestimmte Kategorien anzeigen lassen, wie man möchte.

DVD-Shop Kategorien

Nach einem Klick auf die Kategorie (Produktion 2009) gelangt man in die Übersicht aller vorhandenen Artikel in dieser Kategorie.

DVD-Shop Übersicht

Jede einzelne Ansicht kann individuell gestaltet werden, das Template selber ist klein und sehr gut überschaubar. Die Preise werden automatisch berechnet mit MwSt.. Man kann Global ein MwSt.-Satz festlegen oder zusätzlich jedem Produkt einzeln ein bestimmten MwSt.-Satz zuweisen. Auch für Kleinunternehmer die keine MwSt. ausweisen wollen/dürfen, haben hier die Möglichkeit den Nettopreis jederzeit anzuzeigen und dementsprechend den Hinweis auf die MwSt. einfach entfernen.

Für jedes Produkt gibt es natürlich auch eine Detailansicht.

DVD-Shop Produktdetails

Wenn man mehr als ein Bild einem Produkt zugewiesen hat, erscheinen hier die restlichen Bilder.

Mit einem Klick auf “Zum Warenkorb hinzufügen” gelangen wir auf eine Bestätigungsseite:

DVD-Shop Warenkorb Bestätigung

Der Warenkorb selber sieht letztendlich so aus:

DVD-Shop Warenkorb

Sehr Simpel und übersichtlich gehalten. Wie man eventuell rauslesen kann, kann man die Stückzahl der Produkte noch ändern oder Produkte aus dem Warenkorb entfernen, indem man als Stückzahl “0″ eingibt.

Als letzte (momentane) Schritt ist die Kasse:

DVD-Shop Kasse

Hier sieht man noch einmal eine kleine Übersicht des Warenkorbs und man kann die Bestellung letzt endlich tätigen. Der Kunde wollte hier auf eine Registrierung verzichten und so habe ich mich für ein kleines Formular entschieden, welches die wichtigsten Felder beinhaltet.  Nach dem Klick auf “Bestellung aufgeben”, wird eine Bestellnummer generiert und nochmals zur Bestätigung dem Kunden per E-Mail übermittelt (inklusive Warenkorb in HTML-Form) und eine Kopie an einen eingetragenen Administrator geschickt.

Das war so eine kleine Übersicht jetzt. Ich werde den Shop eventuell noch weiter aufbohren. Features die mir noch so im Kopf rumschwirren:

• Ein Benutzersystem hinzufügen
  (dabei sind weiterhin natürlich auch als Gast Bestellungen möglich)
• Bestellungen in TYPO3 verwalten
• Paypal integrieren
• Verschiedene Versandmöglichkeiten
• Kundenkonto

Wer den Shop live sehen möchte, besucht einfach www.tb-medienservice.de.

TYPO3

Am 23. März 2009 hat das TYPO3 Core-Team die dritte Alpha von TYPO3 4.3 veröffentlicht. Neu hinzugekommen ist die Integration von Extbase und Fluid, welche anderen eventuell aus FLOW3 bereits ein Name ist. Diese bringen ein MVC-System und eine flexible Template-Engine mit ins Haus. Neben dieser – meiner Ansicht nach – tollen Erweiterung, gibt es aber auch noch fortschritte in Sachen RSA authentication service, Autoloading for PHP classes, Image rendering and GIFBUILDER und vieles weitere mehr …

Wer sich alle Neuerungen genau durchlesen möchte, besucht einfach mal die TYPO3.org Homepage.

Der Release von TYPO3 4.3 wird wohl allem anschein nach im Juli 2009 sein.

Ich möchte nun diesen Artikel dazu nutzen, um Ideen zu sammeln. Ihr könnt hier in den Kommentaren eure Ideen mit einbringen und Wünsche äußern. Eventuell habt ihr ja auch Punkte auf  die ich achten sollte oder was ich unbedingt nicht vergessen sollte.

Hier mal meine geplante Reihenfolge:

1. Wir starten mit einem fertigen Layout auf Basis von TemplaVoila
2. Wir installieren alle benötigten Extensions
3. Allgemeins zur Benutzerverwaltung
4. Registrierung für Benutzer im FE anlegen
5. Forum einrichten
6. News / Blog einrichten (mit Kommentarfunktion)
7. ???

Ich freue mich auf euer Feedback!

Anmerkung: Dieses Layout habe ich für einer meiner Extensions verwendet und brauche es nicht mehr. Deswegen nicht über die Kopfgrafik und so wundern. Ich war zu faul das ganze jetzt „neutraler“ zu gestalten.

Entpackt alles und kopiert es einfach in euer TYPO3-Verzeichnis. Ihr solltet dann folgenden Verzeichnisbaum vorfinden:

+TYPO3
+-fileadmin
++-templates
++-css
++-grafik
++-typoscript
++ index.html

Nachdem unsere Verzeichnisse alle vorhanden sind, können wir uns jetzt im TYPO3-Backend einloggen.

TYPO3 vorkonfigurieren

Ich gehe von einer frischen TYPO3-Installation aus. Von daher haben wir noch keine Extension installiert und noch keine Seiten (etc.) angelegt.

Backend auf Deutsch stellen

Der erste Schritt führt uns direkt in den Extension Manager (Admin tools -> Ext. Manager). Dort angekommen, wählen wir im Dropdown-Menü “Translation handling” aus. Wir wählen “German” aus und klicken auf “Save selection“. Danach ein weiterer Klick auf “Update from repository” und wir haben TYPO3 erst einmal Deutsch beigebracht. Nun müssen wir TYPO3 nur noch auf Deutsch stellen, dies tun wir indem wir auf den Menüpunkt User settings (User tools -> User settings) klicken. Dort wählen wir unter “Language” nun German aus. Mit einem Klick auf “Save Configuration” sollte TYPO3 jetzt auf Deutsch gestellt sein.

Seitenstruktur anlegen

Im nächsten Schritt wollen wir unseren Seitenbaum anlegen. Der Seitenbaum spiegelt die Webseiten im Frontend wieder. Wir klicken zuerst auf Funktionen (Web -> Funktionen) im Menü und machen dann ein Rechtsklick auf den einzigen Eintrag im mittleren Frame (“New TYPO3 site“). In dem dann erscheinenden Context-Menü wählen wir “Neu” aus, klicken dann im rechten Frame unter Neuer Datensatz auf “Seite (in)” und füllen das nun folgende Formular wie folgt aus.

Tipp: Wählt man im Gegenzug den Assistent aus, kann man im nächsten Schritt die Seitenposition bestimmen. Das ist besonders hilfreich, wenn man viele Seiten bereits angelegt hat.

Als Typ wählen wir “Verweis” aus und bestätigen mit “Ok”. Das Häkchen bei “Seite verbergen” nehmen wir raus, schließlich soll unsere Webseite ja sichtbar sein. Unter Seitentitel könnt ihr euch selber etwas ausdenken, ich habe “TYPO3 Webseite” genommen. Mit einem Klick oben auf die Diskette () speichern wir die Seite ab und gehen zurück zur letzten Seite.

Da wir uns immer noch im Funktionen-Modul befinden, klicken wir jetzt auf die eben erstellte Seite im Seitenbaum. Wir sehen jetzt 9 Eingabe-Felder, die nur darauf warten, ausgefüllt zu werden. Dies tun wir jetzt auch und legen somit unseren kleinen Seitenbaum in sekundenschnelle an. Ich habe mich für folgende Struktur entschieden. Ich empfehle euch für dieses Tutorial erst einmal die gleiche zu nehmen.

Unsere vorläufige Seitenstruktur

Haben wir die Felder ausgefüllt, klicken wir nun auf “Seiten anlegen” und bestätigen wieder mit “Ok”. Im mittleren Frame klicken wir nun auf das Plus neben unserem Seitenbaum, um die so eben erstellten Unterseiten anzuzeigen.

Wir müssen jetzt noch einmal die erste Seite bearbeiten um die Struktur der Seite zu vervollständigen. Wir machen also einen Rechtsklick auf die Seite “TYPO3 Webseite” (ggf. bei euch anders) und wählen im Context-Menü “Seiteneigenschaften bearbeiten” aus. Da wir den Seitentyp als Verweis festgelegt haben, brauchen wir selbigen, sonst führt die Seite ins Nirvana. Wir gehen also oben auf den Reiter “Verweis” und klicken Rechts neben der Box auf den Ordner (). Wir sehen nun noch einmal unseren Seitenbaum und können jetzt eine Einstiegsseite festlegen. Da dies bei uns die Startseite ist, wählen wir diese mit einem Klick aus. Jeder der jetzt auf unsere Webseite geht, gelangt sofort auf den Menüpunkt “Startseite”.
Nun müssen wir noch zum Reiter “Optionen” und klicken dort unter “Allgemeine Datensatzsammlung” auf den Ordner () neben dem Eingabe-Feld. Wir wählen dann im Pop-Up die Seite “Template” aus. Dies ist nötig, damit die Seite weiß, wo sie später das Seiten-Template findet. Wir speichern jetzt wieder die Seite über die Diskette () ab und haben damit unsere Struktur festgelegt.

Wie schon angesprochen, wird die Unterseite “Template” später unsere Seiten-Vorlage beherbergen. Bevor sie das aber kann, müssen wir diese Seite noch einmal bearbeiten. Wir machen also einen Rechtsklick auf die Seite “Template” und klicken auf “Seiteneigenschaften bearbeiten“. Hier müssen wir nur den Typ der Seite auf “SysOrdner” stellen und dies mit “Ok” bestätigen.

Info: SysOrdner sind bestimmte Seitentypen in dem unterschiedliche Typen von Datensätzen abgespeichert werden können.

Kommen wir nun zum Seiten-Template!

Template mit TemplaVoilá erstellen

Ich gehe extra nicht auf die “normale” Template-Erstellung ein, sondern zeige euch direkt den Weg über TemplaVoilà (im weiteren Verlauf mit TV abgekürzt). Dies ist zwar der etwas längere (und vielleicht auch schwierigere) Weg aber auch der in meinen Augen effektivste Weg. Ihr werdet früher oder später alle bei TemplaVoilà landen, also warum nicht gleich damit anfangen und richtig lernen.

TV installieren

Zuerst müssen wir natürlich TV installieren. Dazu gehen wir auf den Erweiterungs-Manger (Admin-Werkzeuge -> Erw-Manager) und wählen oben im Dropdown-Menü “Import extension” aus. Ein Klick auf “Retrieve/Update” speichert die Extension-Liste auf den Server und ermöglicht ein schnelleres abrufen der Extensions im späteren Verlauf. Im Suchfeld tippen wir nun “TemplaVoila” ein und klicken auf “Look up“. In der Liste sollte nun die Extension (Version 1.3.7, Stand: 28.12.08) erscheinen. Mit einem Klick auf das Icon mit der weißen Seite und dem Pfeil (), installieren wir die Extension. Im nächsten Bildschirm wird uns mitgeteilt, dass die Extension erfolgreich heruntergeladen wurde und kann nun in TYPO3 aktiviert werden. Dies machen wir mit einem einfachen Klick auf “Install extension“.

Der Extension-Manager müsste uns nun darauf aufmerksam machen, dass einige Abhängigkeiten fehlen. In diesem Fall wird die Extension “static_info_tables” benötigt. Wir installieren diese also mit einem Klick auf “Import now“. Nach der Bestätigung klicken wir nun noch einmal auf “Install extension” und uns wird angezeigt, dass die Extension noch ein paar Datenbanktabellen anlegt. Wir scrollen nun ganz nach unten und segnen dies mit einem Klick auf “Make updates” ab. Dieses Fenster kann nun über “Close window and recheck dependencies” geschlossen werden.

TV will nun natürlich auch noch ein paar Tabellen anlegen und bereits vorhandene bearbeiten. Dies wird uns nun mitgeteilt und wartet darauf bestätigt zu werden. Wir scrollen wieder runter und klicken auf “Make updates” um den ganzen Prozess abzuschließen.

Der aufmerksame Beobachter wird nun mitgekriegt haben, das sich in unserer Backend-Navigation das Icons von “Seite” grafisch geändert hat und ein neues mit Namen “TemplaVoilà” hinzugekommen ist.

TV-Template erstellen

Wir gehen nun in das “Liste“-Modul (Web -> Liste) und wählen im Seitenbaum die Seite “Template” aus. Mit einem Klick auf das Icon im oberen Bereich (), erstellen wir einen neuen Datensatz. Wir wählen dann in der Liste “TemplaVoilà Datenstruktur” aus. Im nächsten Schritt füllen wir das Feld “Titel” mit “Template (Datenstruktur)“, stellen die Kategorie auf “Seiten Vorlage” und speichern dies wieder mit einem Klick auf die Diskette () ab.

Nun klicken wir erneut auf das Icon () um einen neuen Datensatz zu erstellen (das ganz obere) und wählen diesmal “TemplaVoilà Template Objekt” aus. Als Titel vergeben wir “Template” und unter Dateireferenz fügen wir “fileadmin/templates/index.html” ein. Als Datenstruktur wählen wir die eben erstellte aus. Das ganze speichern wir jetzt ab und haben schon einmal das Gerüst für unser Seiten-Template erstellt.

Wir müssen jetzt das Template in einzelne Bereiche aufteilen und TV sagen, wo die einzelnen Inhalte erscheinen sollen. Dazu klicken wir jetzt auf “TemplaVoilà” (Web -> TemplaVoilà), stellen sicher das wir immer noch die Seite “Template”ausgewählt haben und sollten dann folgenden Inhalt sehen:

Unser fertig angelegtes Template-Objekt

Wir klicken nun auf “Review” und danach auf “Modify DS / TO“. Mit einem Klick auf “Clear all” sollte jetzt ein neuer Eintrag mit Namen “Root” erscheinen. Wir klicken jetzt bei dem Eintrag unter Action auf “Map”, wählen danach unter “Mapping Window” HTML Source aus und klicken im HTML-Code ganz oben auf dem schwarz hinterlegten “<body>“. Mit einem Klick auf “Set” bestätigen wir die Auswahl und haben TV gesagt, dass sich die Seiten-Elemente alle innerhalb dieses Body-Tags befinden.

Wir müssen nun 4 weitere Elemente anlegen. Dies habe ich jetzt in ein Video gepackt, welches die erforderlichen Schritte kurz zeigt. Ich gehe gleich näher auf jedes Element ein.

Das Video einfach über folgenden Link über euren Browser anschauen: Video aufrufen!

Die Elemente “Inhalte” und “Rechte Spalte” sind so genannte “Content Elements”, in diesen kann man über das “Seite”-Modul dynamisch Inhalte eingefügt werden. “Hauptmenü” und “Untermenü” sind dagegen “TypoScript Object Path“. Wie man sich vielleicht schon denken kann, kann man diese über TypoScript ansteuern.

Wir müssen nun noch das Template unserer Hauptseite, “TYPO3 Webseite” zuordnen. Alle Unterseiten erben automatisch dieses Template. Wir klicken nun also mit der rechten Maustaste auf die Seite im Seitenbaum und wählen “Seiteneigenschaften bearbeiten“. Unter dem Reiter “Erweitert” wählen wir nun in den zwei Dropdown-Menüs unser angelegtes TV-Template aus. Es sollte dann in etwa so bei euch aussehen:

So sollte es bei euch jetzt ausschauen

Seiten-Template für das TypoScript anlegen

Nachdem wir alle Elemente in TV festgelegt haben, kommen wir zum TypoScript. Wir klicken im Seitenbaum auf die Seite “TYPO3 Webseite” und wählen das Modul “Template” (Web -> Template) aus. Ein weiterer Klick auf “Create template for a new site” erstellt uns nun ein Seiten-Template für diese Seite. In dem Dropdown-Menü oben wählen wir jetzt “Info/Modify” aus und klicken ganz unten auf “Click here to edit whole template record“.

Das Formular füllen wir nun wie folgt aus. “Template-Titel” kann so bleiben. In “Web-Site-Titel” können wir ein Titel für die Webseite eingeben, welcher im Browser dann immer oben angezeigt wird. Hier geben wir einfach mal “Unsere TYPO3-Seite” ein. Unter “Konfiguration” löschen wir zuerst den Inhalt und fügen dann diese Zeilen hinzu:

# CLEANING
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/cleaning.txt">
# CONFIGURATION
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/config.txt">

Dies bewirkt einfach, dass der Code aus den angegebenen Dateien ausgelesen wird.

Als nächstes widmen wir uns dem Reiter “Enthält“. Dort wählen wir unter “Statische einschließen” die Elemente “content (default)” und “cSet (default)” aus. Unter “Statische einschließen (aus Erweiterungen)” wählen wir “CSS Styled Content” aus. Wir speichern den Datensatz mit einem Klick auf die Diskette () und schauen uns mal die Dateien an, die wir oben im TypoScript angegeben haben.

Cleaning.txt
Diese Datei räumt erstmal gewaltig den HTML-Code auf den TYPO3 produziert. Es sorgt dafür das überflüssige Kommentare, die sonst im HTML auftauchen, verschwinden und optimiert den HTML-Code dahingehend, dass die Seite weites gehend Barrierefrei und “valide” gestaltet werden kann.

Config.txt
Diese Datei ist das eigentliche Herz der Seite. Hier werden die in TV angelegten Platzhalter zugewiesen. Öffnet die Datei einfach mal mit einem Editor, die Zeilen sind dokumentiert. Ab hier sind dann Kenntnisse in TypoScript nötig. Es lässt sich aber alles relativ einfach nachvollziehen und mit ein bisschen ausprobieren steigt man wirklich sehr schnell dahinter. Am Ende dieses Artikels habe ich weiterführende Links eingefügt, die mehr Beispiele für TypoScript zeigen.

Jetzt wird es Zeit für die ersten Inhalte.

Inhalte einpflegen

Wir gehen jetzt im Seitenbaum auf unsere “Startseite” und wählen das Modul “Seite” aus (Web -> Seite). Ihr solltet dann in etwa folgendes sehen:

Unser erster Inhalt

Wir sehen hier eine genaue Abbildung von unserem TV-Template. Wir haben hier zwei Spalten, “Inhalte” und “Rechts“. In meiner Abbildung seht ihr bereits, dass ich in der “Inhalte”-Spalte Text mit Bild habe. Das ganze wollen wir jetzt natürlich nachholen. Ihr klickt einfach in der “Inhalte”-Spalte auf das Icon mit dem Plus () und wählt im nächsten Schritt “Text mit Bild” aus. Wenn ihr euch jetzt mal 5 Minute nehmt und das folgende Formular ein wenig studiert, könnt ihr sehen wie simpel es ist, Inhalte ein zu pflegen.

Im Reiter “Allgemein” vergeben wir zuerst eine Überschrift für unseren “Artikel”.

Info: Scrollt nach ganz unten und setzt ein Häkchen in “Zweite Optionspalette anzeigen“. Dies ermöglicht euch, individueller euren Inhalt zu gestalten. Ihr habt dann mehr Optionen. Zum Beispiel könnt ihr dann bei den Überschriften zwischen verschiedenen Layouts wählen (<h1>,<h2>,<h3> etc.).

Danach wechseln wir auf den Reiter “Text” und schreiben unsere Information in den WYSIWYG-Editor. Jetzt wechseln wir auf “Medien” und können ein Bild auswählen, welches wir in den Artikel stellen wollen. Dazu können wir entweder die Festplatte durchsuchen oder wir klicken Rechts auf den Ordner () bei dem Auswahlfeld und wählen ein bereits hoch geladenes Bild aus.

Info: Alles was ihr irgendwann mal wieder auf der Seite verwenden wollt, solltet ihr immer in den „fileadmin“-Ordner innerhalb von TYPO3 speichern. In TYPO3 kann jederzeit darauf zugegriffen werden und in eure Inhalte eingepflegt werden.

Der “Medien”-Bereich setzt sich aus mehreren “Ebenen” zusammen. Ganz oben ist die Bilder-Ebene, in der wir unser Bild ausgesucht haben. Darunter befindet sich die “Position“-Ebene, zu der wir jetzt kommen. In der “Position“-Ebene können wir die Position vom Bild wählen. Außerdem können wir einen Bilderrahmen hinzufügen oder (sofern vorhanden) mehrere Bilder Spaltenweise aufteilen. Direkt unter der “Position”-Ebene befindet sich die “Bildmaße“-Ebene. In dieser können wir die Größe des Bildes festlegen. Man kann entweder die Höhe und Breite fest angeben oder wir geben nur eine Höhe an und lassen das Bild proportional dann von der Breite anpassen, vollkommen automatisch. Das ganze geht natürlich auch anders herum. In der “Bild-Links”-Ebene können wir das Bild intern oder extern verlinken. Darüber hinaus können wir auch das Bild sich mit einem klick vergrößern lassen. Die restlichen Felder sind selbsterklärend und können ausprobiert werden!

Mit einem Klick auf die Diskette () speichern wir den Datensatz ab und haben unseren ersten Inhalt in unsere Seite eingepflegt. Herzlichen Glückwunsch!

Wenn wir uns die Seite mal im Frontend anschauen, können wir uns das Ergebnis betrachten. Es sollte in etwa wie bei mir ausschauen:

So sollte die "fertige" Webseite ausschauen

Dies war der dritte Teil meiner kleinen Serie. Ich hoffe es ist verständlich rüber gekommen und bitte um Feedback! Ihr könnt jetzt weitere Seiten-Elemente hinzufügen und so ein bisschen rumspielen, für Fragen ab in die Kommentare.

Weiterführende Links für TypoScript:

• Wie man verschiedene Menüs via TypoScript anlegt
• TypoScript-Referenz

Was ich euch noch empfehlen kann sind folgende Bücher, die ich auch gelesen habe und mir sehr geholfen haben (Amazon-Partner-Link):

TYPO3

Im zweiten Teil der Serie, zeige ich euch, wie das Backend von TYPO3 aufgebaut ist und was für Funktionen es verbirgt.

Das Backend von TYPO3 erreicht man normalerweise über den Unterordner “typo3” im Hauptverzeichnis. Beispiel: “http://www.example.com/typo3“.

Nach dem erfolgreichen Login stehen einem eine Vielzahl an Modulen zur Verfügung. Die in TYPO3 integrierten Module sind den Kategorien Web, Datei, User Tools, Admin Tools und Hilfe untergeordnet.

Anmerkung zum Screenshot:
Die abgebildeten Module können von euren abweichen. Je nach installierter Extension, können neue Module oder Kategorien hinzukommen.

Web

In der Kategorie Web sind alle Module die zur Bearbeitung der Seite nötig sind. Darunter stehen einem auch Hilfsfunktionen bzw. Module zur Verfügung, die das erstellen bzw. bearbeiten von Seiten und/oder Inhalten vereinfachen.

Seite

An erster Stelle sitzt das “Seite”-Modul. Über dieses Modul können Inhalte gepflegt werden. Auf meinem Screenshot seht ihr in dem Icon ein kleines “TV” stehen, dies bedeutet das ich TemplaVoilà benutzte. Im normalen “Seite”-Modul ist das Icon ein wenig anders.

In der normalen Ansicht gibt es standardmäßig 4 Spalten. Diese Spalten teilen sich in den einzelnen Regionen der Seite auf und können frei im Template belegt und mit Inhalten befüllt werden.

"Seite"-Modul

Um die Bereiche Links, Normal, Rechts und Rand dem Template zuzuweisen, bedarf es ein wenig TypoScript.

seite = PAGE
seite.typeNum = 0
# DocType
seite.config.doctype = xhtml_trans
# Pfad zru CSS-Datei
seite.stylesheet = fileadmin/templates/stylesheet.css

seite.1 = TEMPLATE
seite.1 {
    template = FILE
    template.file = fileadmin/templates/index.html
    workOnSubpart = DOKUMENT

    # Linke Spalte
    marks.LINKS < styles.content.getLeft
    # Inhalt (mittlere Spalte)
    marks.INHALT < styles.content.get
    # Header (In TYPO3 "Border" genannt)
    marks.HEADER < styles.content.getBorder
    # Rechte Spalte
    marks.RECHTS < styles.content.getRight
}

In dem einfachen Beispiel werden die Marker einfach über “marks._name_ < styles.content.get_Spalte_” definiert. Im Template selber werden die Bereiche dann einfach via “###NAME###” zugeteilt.

<div id="wrap">
    <p id="header">###HEADER###</p>
    <div id="left">###LINKS###</div>
    <div id="right">###RECHTS###</div>
    <div id="content">###INHALT###</div>
</div>

Hat man TemplaVoilà im Einsatz, dann orientiert sich die Ansicht des “Seite”-Modul an das Template bzw. der Konfiguration in der Datenstruktur vom Template.

Ansicht des "Seite"-Modul mit TemplaVoilá

So kann man einfach und schnell Bereiche für sein Template einrichten und individuell mit Inhalten bestücken. Eines der großen Vorteile von TemplaVoilà. Auch verschachtelte Boxen sind möglich, Flexible-Content-Elements (FCE) genannt.

Mit FCE lassen sich verschachelte Blöcke in das Template einbauen.

Anzeigen

Das “Anzeigen”-Modul beinhaltet eine Vorschau der Webseite. Mit einem Klick auf das Modul erscheint wie gewohnt der Seitenbaum und man kann dann auf eine Seite klicken um sich diese dann direkt anzuschauen.

Wer genauer hinschaut, dem fallen die kleinen Stifte auf. Mit einem klick auf diese, kann man die Inhalte zusätzlich bearbeiten. Das ganze funktioniert auch wenn man die Webseite normal aufruft und gleichzeitig im Backend angemeldet ist.

Liste

Über das Listen-Modul kann man sich alle Inhalte einer ausgewählten Seite übersichtlicht anzeigen lassen. Wenn man die erweiterte Listenansicht, über die am Seitenende befindliche Checkbox, aktiviert hat, kann man schnell und einfach seine Inhalte verwalten.

Normale Listenansicht

Erweiterte Listenansicht

Auch ein Clipboard, für schnelles Kopieren oder Verschieben von mehreren Seiten, steht einem zur Verfügung.

Info

Das Info-Modul beherbergt Funktionen wie etwa eine Seitenbaum-Übersicht, eine Übersetzungs-Übersicht (für mehrsprachige Webseiten) und ein ausführliches Log (wer hat wann, welche Seite geändert).

Viel gibt es hier nicht zu erklären, da heißt es eher … einfach mal reinschauen und durchklicken.

Der aufmerksame Leser wird jetzt sagen, da gibt es aber noch ein paar Reiter mehr. Das ist korrekt aber die anderen Module gehen schon etwas weiter in die Materie und da dies ein Einsteiger-Tutorial ist, brauchen wir diese nicht und sind für uns lange Zeit erst einmal uninteressant.

Zugriff

Über das Zugriff-Modul kann man einzelnen Seiten/Sysfolder (etc.) bestimmte Gruppen und/oder Benutzer zuweisen. Dies macht dann Sinn, wenn man mehrere “normale” (das heißt, nicht Admin-User) Backendbenutzer hat und diesen bestimmte Seiten zum verwalten zuweisen möchte. Der Backendbenutzer, sofern kein “Admin”-User, kann ausschließlich die Seiten verwalten, die ihm zugewiesen sind.

Das Zugriff-Modul im Überblick. Im Moment besitzt ausschließlich der Benutzer "admin" die Rechte an den jeweiligen Seiten.

In diesem Fenster können wir die Zugriffe der Seiten verwalten. Hier geben wir dem Benutzer "backendbenutzer" und der Benutzergruppe "Backend-Benutzergruppe" Rechte auf allen Seiten (siehe Rekursiv anwenden).

Benutzer mit Admin-Zugriff können natürlich weiterhin diese Seiten verwalten.

Unser Ergebnis nach der Bearbeitung

Funktionen

Hier findet ihr ein paar Hilfsfunktionen die euch TYPO3 bereitstellt. So könnt ihr über den Punkt “Mehrere Seiten erzeugen” bis zu 9 Seiten auf einmal anlegen. Ein weiterer Hilfspunkt ist die Funktion “Seiten sortieren“. Mit dieser könnt ihr Seiten nach bestimmten Kriterien (Erstellungszeit, Name etc.) einfach und schnell sortieren.

Versionierung

In TYPO3 gibt es von Haus aus 2 “Arbeitsebenen”. Einmal die “LIVE-Arbeitsumgebung” (diese ist Standardmäßig aktiviert) und die “Entwurfsarbeitsumgebung”. Über den Menüpunkt Versionierung kann man jetzt alle Änderungen innerhalb der Arbeitsumgebungen koordinieren und publizieren. Besonders dann interessant wenn viele Personen an einer Webseite arbeiten.

Die Arbeitsebene kann jederzeit im Backend oben Rechts geändert werden

Template

In diesem Abschnitt könnt ihr Seiten ein “Template” zuweisen. Dies hat jetzt aber nicht unbedingt viel mit einem Seitentemplate, sprich einer HTML-Vorlage zu tun. Ihr könnt hier vielmehr diverse Einstellungen über TypoScript tätigen und bestimmte Dinge, wie zum Beispiel CSS-Angaben, JS-Angaben, DocType etc., koordinieren.

Ich gehe davon aus, dass ihr bereits eine funktionstüchtige Seite mit TemplaVoilá zum laufen gebracht habt. Auf Wunsch kann ich dazu natürlich auch nochmal ein kleines Tutorial schreiben.

FCE-Template erstellen

Was wir als erstes brauchen, ist eine HTML-Datei, die als FCE dient. Dazu erstellen wir jetzt einfach eine HTML-Datei und nennen sie “2-Spalten.html“.

Hier der Inhalt:

<div class="col_wrap">
  <div class="col1"></div>
  <div class="col2"></div>
  <br style="clear:both;" />
</div>

Diese Datei speichern wir und schieben sie dann in den Ordner “fileadmin” -> “templates“.

Dies war schon im groben der erste Teil. Nun müssen wir das FCE in TYPO3 einrichten.

FCE in TYPO3 einrichten

Liste-Ansicht des Template-Ordner

In TYPO3 wechseln wir zunächst in die “Liste“-Ansicht und klicken dann den Sysfolder an, in welchen unser TemplaVoilá-Template installiert ist.

Dort fügen wir dann unter “TemplaVoilá-Datenstruktur” ein neuen Datensatz hinzu, indem wir auf das Icon mit dem Plus klicken.

In dem nun erscheinenden Formular geben wir als Titel “2-Spalter” ein, unter Kategorie wählen wir “Flexibles Inhaltselement” aus und lassen den Rest leer. Wir speichern nun das Formular ab und kehren zur Listen-Ansicht zurück.

Nun fügen wir noch ein “TemplaVoilá-Datenobjekt” hinzu. Dazu geben wir als Titel wieder “2-Spalter” ein, unter Dateireferenz klicken wir auf die Weltkugel, wählen dann im PopUp den Reiter “Datei” aus und Browsen uns durch die Ordner “fileadmin” -> “templates“. Dort wählen wir dann die Datei “2-Spalter.html” aus. Der Pfad sollte dann übernommen werden und im Formular stehen. Als nächstes wählen wir bei Datenstruktur die eben angelegte aus. Der Name müsste “2-Spalter” sein. Den Rest können wir leer lassen und unser Formular abspeichern.

So sollte das Formular dann in etwa bei euch ausschauen

Als nächstes gehen wir auf das Modul “TemplaVoilá” und wählen danach unser Template aus. Danch sollten wir oben den Reiter “Flexible CE” auswählen und ein Eintrag mit namen “2-Spalter” vorfinden. Dort klicken wir auf “remap” und dann auf “Modify DS / TO“.

Dieser Teil sollte einen eigentlich bekannt sein, ich reiße ihn trotzdem nochmal kurz an.

Template Mappen

Zunächst müssen wir den “Root“-Punkt mappen. Dazu klicken wir in dem “Root“-Objekt ganz rechts auf “Map” und wählen dann das erste DIV aus unserem Template aus. Als Mode setzen wir es als “INNER” und klicken dann auf “Set“.

Mapping der ersten Spalte

Nun fehlen noch 2 Elemente. Für jede Spalte ein Element. Deshalb legen wir nun erstmal 2-Elemente an. Das erste Element nennen wir “field_col1” und das zweite Element einfach “field_col2“. Als Titel jeweils “Spalte 1″ und “Spalte 2″. Unter Editing Type wählen wir “Content Elements” aus.

Natürlich müssen wir die 2 Felder dann auch Mappen. Dazu klicken wir jeweils nachdem wir eines angelegt haben auf “Map” und dort wählen wir dann das jeweilige DIV aus. Für Spalte 1 das DIV mit der Class “col1” und für die zweite Spalte das DIV mit der Class “col2“. Den Mode dabei wieder auf “INNER“.

So sollte dann die Übersicht ausschauen

Sollte alles passen, klicken wir nun auf “Save as“, wählen danach unter “Update existing Data Structure / Template Object” das Element “Template/2-Spalter” aus und klicken auf “Update TO (and DS)“.

2-Spalter als Inhalt einfügen

Wir gehen nun normal auf unser “Web“-Modul und wählen eine Seite aus, in welcher wir unseren 2-Spalter platzieren möchten. Wir legen nun ein neues Element an und wählen in der Liste unter “Flexibler Inhalt” unseren “2-Spalter” aus.

Eine Überschrift können wir, müssen wir aber nicht vergeben. Einfach das Element speichern und zurück in die Übersicht des “Web“-Moduls gehen.

So sollte es dann in etwa ausschauen

Ihr solltet nun ein 2-Spalter in eurer Übersicht sehen (siehe Screenshot).

Ihr könnt nun dort gewohnt beliebig Inhalte hinzufügen und verwalten. Egal ob es Extensions sind oder normale Texte.

Das einzige was jetzt noch fehlt ist, dass ihr in eurer CSS-Datei die Klassen “col_wrap“, “col1” und “col2” definieren müsst.

In dieser fügen wir einfach folgendes hinzu:

.col_wrap {
  border:1px solid #ddd;
  padding:5px;
}

.col1 { float:left; width:48%; padding:5px; }
.col2 { float:left; width:48%; padding:5px; }

Nun sollten unsere Spalten nebeneinander sein. Das ganze könnt ihr natürlich noch weiter verschönern oder es so lassen

Viel Spaß damit!