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.

Backend Ansicht "Extended"

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