Webfibel

Wissenswertes rund um das Internet & der Webentwicklung

TYPO3 – Der Einstieg – Feinschliff

9. März 2015 Martin Hesse 14 Comments

Kommen wir zum letzten Teil der Artikelserie TYPO3 – Der Einstieg. Nachdem wir uns im vorherigen Teil um das Template und der Struktur im Backend gekümmert haben,  wollen wir uns im letzten Teil ein wenig um die Inhalte kümmern, mit dem CSS rumspielen und Gridelemente nutzen.

Gridelements

Neues Gridelement anlegenWir bauen zuerst einmal unsere Gridelemente ein. Ich habe mir überlegt, dass wir uns ein 2-Spalter, 3-Spalter, 4-Spalter und einen Teaser-Block bauen werden.

Zunächst gehen wir in unser Backend und klicken im „Web„-Modul auf die „Liste„-Funktion. Im Seitenbaum wählen wir unseren „System„-Ordner aus.

Hier klicken wir auf „Neuen Datensatz erstellen“ und wählen in der darauf folgenden Auflistung unter „Grid Elements“ das Element „CE Backend Layout“ aus.

Der Aufbau vom Formular ist der selbe, wie beim Backend-Layout, daher ist das ganze für uns nicht unbekannt.

Wir fangen mal mit dem Zwei-Spalter an und hinterlegen als Titel „2-Spalter„. Unter „Configuration“ wählen wir bei „Raster-Konfiguration“ den Assistenten (Icon neben dem Text-Formular) und nehmen dort folgende Konfiguration vor:

Konfiguration für einen 2-Spalter

Ansicht für ein 2-Spalten-Gridelement

Als Name geben wir für die jeweilige Spalte einfach „Spalte #N“ ein. Die Spaltenummer erfolgt in 10er-Schritten.

Wir speichern und schließen das Dokument. Die Konfiguration sollte dann in die „Raster-Konfiguration“ übernommen werden. Hier noch mal das Script dazu:

Wir haben das erste Element fertig gestellt. Das 3- und 4-Spalten-Element könnt ihr auf die gleiche Weise machen. Beim 4-Spalten Grid habt ihr dann nur 4 Spalten mit der jeweiligen Nummerierung und der entsprechenden Spaltennummer. Wieder bei 10 beginnen und im 4-Spalten-Grid bei 40 beenden.

Kommen wir nun zum Teaser-Grid.

Wir machen hier ein Bereich aus Zwei Spalten. Einmal ein Bereich für das Bild (Spaltennummer 10) und der Bereich für den Inhalt (Spaltennummer 20). Eigentlich genau so wie im 2-Spalten-Grid.

Haben wir auch dieses angelegt, sollten wir uns wieder in der Listenansicht vorfinden. Wir sehen nun im Abschnitt „CE Backend Layout“ unsere 4 Grids die wir angelegt haben.

Unsere vier Gridelemente

Unsere vier Gridelemente in der Listenansicht

Wir benötigen nun von jedem Gridelement die UID des Datensatzes. Da wir diese mit dem TypoScript in Verbindung bringen müssen. Um die UID herauszufinden, brauchen wir nur mit der Maus über das erste Icon ganz links gehen, dann wird für den jeweiligen Datensatz die UID angezeigt. In unserem Fall ist dies sehr einfach, da wir vorher keine Grids hatten, beginnt die Nummerierung mit 1 und wird dann immer +1 fortgeführt.

Wir sollten also nun für den 2-Spalter die UID 1 haben, für den 3-Spalter die UID 2, für den 4-Spalter die UID 3 und für den Teaser-Grid die UID 4 haben.

Um permanent die UID für einen Datensatz anzeigen zu lassen, muss man auf das Plus nebem dem Spalten-Kopf anklicken und die Spalte setzen. Danach wird diese Standardmäßig immer für diesen Typ angezeigt.

Stimmt alles, dann können wir zum TypoScript übergehen.

Elemente im TypoScript bekannt machen

Dazu bearbeiten wir unser Haupt-Seiten-Template und gehen in den Bereich „Setup„, wo wir auch schon die Navigation und das Haupt-Template definiert haben.

Das TypoScript ist eigentlich relativ einfach. Zunächst zeige ich euch einmal das TypoScript für den 2-Spalter.

Wenn wir unsere Grids definieren, dann machen wir das immer in dem Scope, den wir in Zeile 1 sehen. In Zeile 3 wird das Element zunächst initialisiert. Dabei steht die „1“ für die UID des Gridelements, welches wir vorher im Backend angelegt haben. Wir haben hier also unseren 2-Spalter definiert.

In Zeile 5 beginnt der Teil, in welchem wir die Spalte festlegen können. Hier kommen jetzt die Spaltennummern ins Spiel. Wir haben für unseren 2-Spalter einmal die Spaltennummer 10 für die linke Spalte und die 20 für die rechte Spalte. Wie man in Zeile 6 + 7 sieht, haben wir beide Spaltenummern bekannt gemacht und der „Standard“-Ausgabe zugewiesen.

Damit das ganze auch vernünftig dargestellt wird, habe ich für beide Spalten ein Wrap definiert, den man in Zeile 8 sehen kann. Hier wird auf das Bootstrap-Grid zurückgegriffen. In Zeile 9 wird das selbe für die rechte Spalte kopiert.

Abschließend kommt um den gesamten Kontainer noch ein Div drumherum, welches wir in der Spalte 11 definieren. Damit haben wir einen geschlossenen Bereich.

Ihr seht, für einen einfachen Aufbau benötigt es nicht viel Code.

Das TypoScript für den 3- und 4-Spalter ist nun ganz einfach fortzuführen … anbei der Code.

Es gibt noch eine andere Art, wie ihr die Grids definieren könnt. Klar auch hier muss wieder etwas TypoScript geschrieben werden. Dies zeige ich euch, anhand unseres Grids. Dazu fügt ihr folgenden TypoScript unterhalb des 4-Spalten-Grids ein:

Ihr seht hier in Zeile 5, das wir ein Fluidtemplate-Objekt zuweisen. In Zeile 7 geben wir auch ein Pfad zum Template an. Das bedeutet, dass dieses Grid auf dieses Template aufbaut. Also schnell den FTP öffnen und die Datei im angegebenen Pfad hinterlegen.

Der Inhalt des Templates sieht dann wie folgt aus:

Auch hier greifen wir wieder auf die Spaltennummern zurück. Siehe dazu den Code in Zeile 5 und 6. Im oberen Teil des Templates, Zeile 2-4 setzen wir eine H2-Überschrift, sofern diese vorhanden ist.

Das war der ganze Spuk was die Gridelemente betreffen.

Inhalte hinzufügen

Bevor wir nun fleißig Inhalte in die Webseite einfügen, füllen wir zunächst unsere CSS-Datei mit ein wenig Inhalt. Damit die Seite nicht mehr ganz so langweilig daherkommt.

CSS

Übernehmt dazu folgende Stylesheet-Angaben:

Natürlich wollen wir direkt mal unsere Gridelemente in Aktion sehen. Daher bauen wir erstmal eines davon ein.

2-Spalten-Element auf einer Seite hinzufügen

Jetzt gehen wir im „Web„-Modul auf die „Seite„-Funktion und klicken im Seitenbaum die „Startseite“ an.

Hier können wir nun unsere Inhalte einpflegen. Wir suchen uns zunächst ein Bereich aus, bei mir ist es zuerst der Teaser-Bereich. Dort möchte ich jetzt ein 2-Spalten-Grid einbauen.

Dazu klicke ich in diesem Bereich auf das Icon um ein neuen Datensatz einzubauen.

Neues Inhaltselement anlegen

Neuen Datensatz an diesem Ort hinzufügen

In dem folgenden Formular wechsel ich auf den Reiter „Raster-Elemente„. Dort müsste uns dann folgende Auswahl zur Verfügung stehen:

Hier stehen die Gridelemente zur Auswahl

Hier stehen die Gridelemente zur Auswahl

Ich wähle also hier den 2-Spalter und klicke direkt dann wieder oben auf „Dokument speichern und schließen„.

Wir sollten dann folgende Ansicht im Teaserbereich vorfinden:

Ansicht des Teaser-Bereichs, nachdem der 2-Spalter hinzugefügt wurde

Ansicht des Teaser-Bereichs, nachdem der 2-Spalter hinzugefügt wurde

Diesen Bereich nun etwas mit Inhalt füllen und schon haben wir ein erstes Ergebnis im Frontend.

Voilá:

Unser Seiten-Teaser

Unser Seiten-Teaser

Das ganze können wir nun so weiter führen. Ein bisschen was in die Sidebar packen, hier und da ein wenig mit den anderen Gridelementen rum spielen und schon habt ihr die Seite mit Inhalt gefüllt.

Unsere Startseite mit Inhalt gefüllt

Unsere Startseite mit Inhalt gefüllt

Das ist doch schon mal ein Anfang, oder?

Lasst uns jetzt noch mal die Navigation ausbauen und ein Dropdown-Menü hinzufügen.

Dropdown-Menü hinzufügen

Was wir dafür zuerst benötigen sind ein paar Unterseiten. Das ganze funktioniert genau so, wie wir die normalen Seiten angelegt haben. Ihr klickt im „Web„-Modul auf die „Funktionen„-Seite und wählt im Seitenbaum eine Seite aus. Ich habe mich für „Über uns“ entschieden.

Hier erstellen wir wieder mehrere Seiten auf einmal. Dazu füllen wir einfach die Textfelder aus und klicken unten dann auf „Seiten anlegen„.

Unterseiten anlegen

Unterseiten anlegen

Wir müssen nun noch etwas JavaScript hinzufügen, da Bootstrap die Eigenart hat, Dropdown-Menüs erst nach einem Klick auf den Link auszuklappen.

JavaScript hinzufügen

Wir öffnen dazu unsere „Script.js“ und fügen folgenden Inhalt hinzu:

Wir prüfen hier mit der Funktion „toggleNavbarMethod“ zunächst ob die Fensterbreite über 768 liegt, sonst wird ja auch das mobile Menü angezeigt. Ist dies der Fall und man befindet sich mit der Maus über ein „LI“-Element, welches Unterpunkte besitzt. Dann wird das Untermenü ein- bzw. ausgefadet, wenn man den Bereich mit der Maus verlässt.

In der Zeile 14-16 sorgen wir dafür, das ein Klick auf den Menüpunkt vom Dropdown-Toggle auch wieder ganz normal als Link wahr genommen wird.

Wenn wir jetzt mal das Frontend aufrufen und die Maus über den Menüpunkt führen, müsste das Submenü sich entsprechend ein- bzw ausblenden.

Das Submenü wird beim Hover ausgeklappt

Das Submenü wird beim Hover ausgeklappt

Wir können jetzt weiter Inhalte pflegen und unsere Seite nach und nach weiter ausbauen. Mit den gelernten Techniken könnt ihr noch viele weitere Seiten-Elemente einbauen um noch speziellere Anforderungen realisieren zu können. Spielt einfach mal ein wenig  damit rum.

Das Ergebnis könnt ihr euch auch auf unserer Demo-Seite anschauen.

Gerne nehme ich euer Feedback entgegen. Schreibt dazu einfach in die Kommentare. Ich würde mich besonders um Anregungen bezüglich neuer Artikel freuen. Was würdet ihr euch wünschen?

Alle benötigten Dateien und der Export der kompletten Seite als .t3d gibt es auch zum Download:

Achtung, es wurden Änderungen im Haupt-Template vorgenommen, schaut dazu bitte an den Fuß des Artikels TYPO3, Der Einstieg – das Template.

#6.2#6+#Artikelserie#CSS#Der Einstieg#Dropdown-Menü#GridElements#Inhalte#TYPO3

Previous Post

Next Post

Hinterlasse einen Kommentar

14 Kommentare auf "TYPO3 – Der Einstieg – Feinschliff"

Benachrichtige mich zu:
avatar
Sortiert nach:   neuste | älteste | beste Bewertung
Yake Oner
Gast

Sehr schöner Artikel, dank dir hab ichs ruckzuck gepeilt!

john
Gast

Hallo,
vielen Dank für die ausführliche Erklärung.
ich habe mit Typo3 Lts 6.2.17 versucht alles wie beschrieben umzusetzen (localhost über Xampp) (das Template mit css und js habe ich hier downloaded) d.h. genau die Versionen, die bei seiner Zeit angewendet wurden. Die Navigation funktioniert leider nicht, nur eine horizontale Balken sieht man!! , für jegliche Hilfe wäre ich dankbar!
Gruß John

Marco
Gast

Ich bin die Anleitung Schritt für Schritt durchgegangen (6.2.14) und habe das Projekt auch importiert, nachdem mir einfach keine formatiertes CSS Menü angezeigt wurde. Selbst der import des Projektes zeigt immer noch einen normalen … Aufbau ohne Formatierungen, ich habe die Verzeichnis kontrolliert und Schreibweisen der CSS Datei. Ich komme leider nicht weiter, hast du eine Idee?

Marc
Gast

Super Arbeit! Danke!

Stef
Gast

Super Anleitung. Vielen Dank!

Leider kommt bei mir folgender Fehler: ERROR: Content Element type „gridelements_pi1“ has no rendering definition!

Woran könnte das liegen?
http://beyond-imagination.de/index.php?id=74

Tim Wessel
Gast

Hi, auf der neuen Typo3 Version funktioniert das ganze nicht. Zumindest der Datensammler wurde entfernt.

Roman
Gast

Hallo Martin,

schönen Dank für die Artikelserie. Sie hat mir den Umstieg von TYPO3 4.5 auf 7.6 sehr erleichtert.
Ich vermisse leider die lib-search. Ist sie in dem Download enthalten?

Gruß
Roman

wpDiscuz