Screencast Serie Folge 5
Zusätzliches Template aus dem YAML Download-Package einbauen und als default Template verwenden.
YouTube Folge 5 - YAML Template zu TYPO3 hinzufügen und als default Template setzen
In der Folge 5 der Screencast Serie zeige ich wie man ein zusätzliches Template aus dem YAML Download-Package einbaut.
Wenn im YAML Download-Package kein passendes Template vorhanden ist könnt Ihr auch ein Template mit dem YAML Builder erstellen.
Es funktioniert prinzipiell gleich wie im Video - nur ein paar Dateipfade stimmen mit dem YAML Download-Package nicht überein und müssen angepasst werden.
Anleitung: YAML Layout mit YAML Builder erzeugen und in TYPO3 einbauen
In diesem Tutorial erzeuge ich das Layout mit dem online YAML Builder.
YAML Builder: http://builder.yaml.de/
Wenn alle gewünschten Einstellungen gesetzt sind, erhalte ich unter "Get Code" folgende Dateien:
(X)HTML Code -> speichere ich als builder_example.html
my_layout.css -> speichere ich als builder_example.css
basemod.css -> speichere ich als basemod_builder_example.css
patch_my_layout.css -> speichere ich als patch_builder_example.css
weiters erstelle ich noch ein .gif Bildchen im Format 43px mal 54 px für den TYPO3 Template Selector mit der Bezeichnung builder_example.gif. die Bezeichnung der .gif Datei ist gleich wie die Bezeichnung der .html Datei - bis auf die Dateiendung.
In der Datei builder_example.html ändere ich in Zeile 8 und 10 ebenfalls die Dateinamen.
Alle Vorkommen von ../yaml/ ändere ich auf ../../../yaml/
In der Datei builder_example.css ändere ich in Zeile 18 die Beziechnung basemod.css in basemod_builder_example.css.
In der Datei patch_builder_example.css ändere ich in Zeile 19 ../../yaml/ in ../../../../yaml/
Ich füge zusätzlich noch die Zeile
@import url(screen/typo3-RTE.css);
ein.
Dies hat folgenden Grund: Alle css Stile die nicht nur im Frontend, sondern auch im Rich Text Editor (im TYPO3 Backend) geladen werden, befinden sich in der Datei typo3-RTE.css.
Dateien Kopieren
Die Dateien builder_example.html und builder_example.gif kopiere ich auf dem Webserver direkt in den Ordner fileadmin/template/.
Die Datei builder_example.css kommt in den Ordner fileadmin/template/css/.
Die Datei basemod_builder_example.css kommt in den Ordner fileadmin/template/screen/.
Die Datei patch_builder_example.css kommt in den Ordner fileadmin/template/patches/.
Fertig!
Im Backend steht nun unter Page Properties -> Extended das neue Template zur Verfügung.
Das Template auswählen, speichern - fertig.
Wenn das neue YAML-Template das default YAML-Template für alle Seiten sein soll, kann dies im TypoScript-Template auf root Seite eingestellt werden.
Die Zeile
defaultTemplateFileNameMain = template_3col_1-3-2.html
ändern in
defaultTemplateFileNameMain = builder_example.html