Seitentemplate mit Typo3 6.2

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche

Im Web findet man an vielen Stellen vorgefertigte Templates aus HTML und CSS, die man für eigene Projekte nutzen kann. Eine Recherche mit den Stichworten free css template führt schnell zu einer Reihe von Ergebnissen. Unter http://www.cmsmadesimple.de/dokumentation/cmsms-templates/freie-templates.html findet sich eine Übersicht über mehrere derartige Angebote.

Interessant ist auch das Angebot von http://freietemplates.de/, konkret das Template 37 von der Seite http://freietemplates.de/templates.php . Die einzige Einschränkung bei der Nutzung dieser Templates besteht darin, dass der Backlink im Footer erhalten bleiben muss. Ansonsten darf die Vorlage auch verändert bzw. angepasst werden.


Die Vorlage

Die folgende Beschreibung geht von einem selbst erstellten Template auf Basis von Twitter Bootstrap aus, die folgendes Aussehen hat.

Typo3-62-vorlage3.png

Unter

kann man online mit der Vorlage experimentieren.

Die Farben folgen keinen künstlerischen Ansprüchen, sondern sollen nur das Auffinden der einzelnen Elemente in der CSS-Datei erleichtern und damit auch die individuelle Anpassung. Das Paket ist frei unter http://debacher.eu/downloads/bootstrap.zip herunter ladbar.

Typo3-62-vorlage1.png

Das Archiv beinhaltet einige Unterordner, drei HTML-Dateien, jeweils als Vorlagen für unterschiedliche Spaltenzahlen und die Datei anpassung.css, über die die individuellen Layout-Anpassungen vorgenommen werden. Dazu kommen dann noch ein paar Javascript-Dateien für unterschiedliche Zwecke.

Das ZIP-Archiv wird in den Ordner fileadmin/templates entpackt, wobei der Unterordner templates noch erstellt werden muss.

Typo3-62-vorlage2.png

Einbinden der Vorlage

Beim Erstellen des Vorlagenobjektes vermeide ich gern den Assistenten. Daher gehe ich über die Menü-Funktion Liste auf die Seite TemplaVoila Template. Dort klickt man das grüne Pluszeichen oben auf der Seite an, worauf eine Reihe von Datensatztypen angeboten wird, hier wählt man dann TemplaVoila Data Stucture.

Typo3-62-vorlage4.png

Es öffnet sich ein neues Formular in das man vor allem einen Titel angeben muss und als Category die Auswahl Page Template.

Typo3-62-vorlage5.png


Die XML Datastructure

Den Inhalt des Feldes Datastructure XML kann man entweder später interaktiv erarbeiten, oder man kopiert die folgenden Zeilen mit meinen Einstellungen in das Fenster.

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <T3DataStructure>
	<meta type="array">
		<langDisable>1</langDisable>
	</meta>
	<ROOT type="array">
		<tx_templavoila type="array">
			<title>ROOT</title>
			<description>Select the HTML element on the page which you want to be the overall container element for the template.</description>
		</tx_templavoila>
		<type>array</type>
		<el type="array">
			<field_headerimage type="array">
				<tx_templavoila type="array">
					<title>Header-Image</title>
					<description>Mappen an DIV Header</description>
					<sample_data type="array">
						<numIndex index="0">[ Header - Image ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<TypoScriptObjPath>lib.field_headerimage</TypoScriptObjPath>
				</tx_templavoila>
			</field_headerimage>
			<field_nav type="array">
				<tx_templavoila type="array">
					<title>Menue Oben</title>
					<description>Mappen an DIV id navbar</description>
					<sample_data type="array">
						<numIndex index="0">[ Menue Oben ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<TypoScriptObjPath>lib.field_nav</TypoScriptObjPath>
				</tx_templavoila>
			</field_nav>
			<field_impressum type="array">
				<tx_templavoila type="array">
					<title>Impressum</title>
					<description>Mappen an DIV service</description>
					<sample_data type="array">
						<numIndex index="0">[ Impressum ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<TypoScriptObjPath>lib.field_impressum</TypoScriptObjPath>
				</tx_templavoila>
			</field_impressum>
			<field_rootline type="array">
				<tx_templavoila type="array">
					<title>Klickpfad / Rootline</title>
					<description>Mappen an DIV rootline</description>
					<sample_data type="array">
						<numIndex index="0">[ Rootline ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>DIV</tags>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<TypoScriptObjPath>lib.field_rootline</TypoScriptObjPath>
				</tx_templavoila>
			</field_rootline>
			<field_submenu type="array">
				<tx_templavoila type="array">
					<title>Untermenue links</title>
					<description>Mappen an DIV menuLinks</description>
					<sample_data type="array">
						<numIndex index="0">[ Submenu ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<TypoScriptObjPath>lib.field_submenu</TypoScriptObjPath>
				</tx_templavoila>
			</field_submenu>
			<field_menucontent type="array">
				<tx_templavoila type="array">
					<title>Inhalt unter dem linken Menue</title>
					<description>Mappen an DIV textBelowMenu</description>
					<sample_data type="array">
						<numIndex index="0">[ Below Menu ]</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>div</tags>
					<TypoScript><![CDATA[10 < lib.field_menucontent
]]></TypoScript>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<oldStyleColumnNumber>1</oldStyleColumnNumber>
					<enableDragDrop>1</enableDragDrop>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Inhalt unter dem linken Menue</label>
					<config type="array">
						<type>group</type>
						<internal_type>db</internal_type>
						<allowed>tt_content</allowed>
						<size>5</size>
						<maxitems>200</maxitems>
						<minitems>0</minitems>
						<multiple>1</multiple>
						<show_thumbs>1</show_thumbs>
					</config>
				</TCEforms>
			</field_menucontent>
			<field_maincontent type="array">
				<tx_templavoila type="array">
					<title>Haupt Inhalt</title>
					<description>Mappen an das innerste DIV von content </description>
					<sample_data type="array">
						<numIndex index="0">[ Hauptinhalt ]</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>div</tags>
					<TypoScript><![CDATA[10 < lib.field_maincontent
]]></TypoScript>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<oldStyleColumnNumber>0</oldStyleColumnNumber>
					<enableDragDrop>1</enableDragDrop>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Haupt Inhalt</label>
					<config type="array">
						<type>group</type>
						<internal_type>db</internal_type>
						<allowed>tt_content</allowed>
						<size>5</size>
						<maxitems>200</maxitems>
						<minitems>0</minitems>
						<multiple>1</multiple>
						<show_thumbs>1</show_thumbs>
					</config>
				</TCEforms>
			</field_maincontent>
			<field_contentright type="array">
				<tx_templavoila type="array">
					<title>Inhalt rechte Spalte</title>
					<description>Mappen an innerstes DIV in rechter Spalte</description>
					<sample_data type="array">
						<numIndex index="0">[ rechte Spalte ]</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>div</tags>
					<preview></preview>
					<eType_EXTRA type="array">
					</eType_EXTRA>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<TypoScript><![CDATA[10 < lib.field_contentright					 ]]></TypoScript>
					<oldStyleColumnNumber>2</oldStyleColumnNumber>
					<enableDragDrop>1</enableDragDrop>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Inhalt rechte Spalte</label>
					<config type="array">
						<type>group</type>
						<internal_type>db</internal_type>
						<allowed>tt_content</allowed>
						<size>5</size>
						<maxitems>200</maxitems>
						<minitems>0</minitems>
						<multiple>1</multiple>
						<show_thumbs>1</show_thumbs>
					</config>
				</TCEforms>
			</field_contentright>
			<field_footer type="array">
				<tx_templavoila type="array">
					<title>Footer</title>
					<description>Mappen and div footer</description>
					<sample_data type="array">
						<numIndex index="0">[ Footer ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<proc type="array">
						<int>0</int>
						<HSC>0</HSC>
						<stdWrap></stdWrap>
					</proc>
					<preview></preview>
					<TypoScriptObjPath>lib.field_footer</TypoScriptObjPath>
				</tx_templavoila>
			</field_footer>
		</el>
	</ROOT>
 </T3DataStructure>

Die Vorlagenobjekte

Mit dem Speichern ist die Data structure erstellt und wir können an die drei Vorlagenobjekte gehen, die innerhalb dieser Struktur liegen werden. Dazu gehen wir jetzt über den Menüpunkt TemplaVoila auf die Seite TemplaVoila Template und erhalten folgende Ansicht.

Typo3-62-vorlage6.png

Hier wählen wir Neues Vorlagenobjekt erstellen.

Typo3-62-vorlage7.png

Hier muss man den Titel und die Beschreibung anpassen und vor allem die Vorlagendatei auswählen. In meiner aktuellen Version klappt das mit dem Dateiauswahldialog nicht richtig, da wird keine Dateiname eingetragen, sondern etwas wie file:4. Eine einfache Lösung besteht darin einfach den Pfad per Hand anzugeben fileadmin/templates/bootstrap/dreispaltig.html.

Typo3-62-vorlage8.png

Nach dem Speichern (einfach die Diskette mit dem x wählen um das Formular auch zu beenden) kann man endlich an das Verknüpfen gehen, indem man auf Erneut verknüpfen klickt.

Typo3-62-vorlage9.png

Das Mapping

Im nächsten Formular muss man nur auf DS/VO modifizieren klicken und noch einmal mit OK bestätigen, dass man weiß, was man tut.

Typo3-62-vorlage10.png

Was man hier jetzt sieht ist das Ergebnis der XML-Struktur, die wir vorher heruntergeladen und eingefügt haben. Diese Struktur beschreibt die einzelnen Elemente der Seite und Verweise auf das (noch nicht vorhandene) Typoscript. In diesem Formular werden die Inhaltselemente der Seite an Teile der HTML-Vorlage gebunden (gemappt).

Dazu muss man jeweils auf den Button Verknüpfen klicken und dann in der unten auf der Seite auftauchenden HTML-Ansicht der Vorlage auf das entsprechende Element klicken. Für das Container-Element root ist der richtige Tag der body Tag der Seite.

Typo3-62-vorlage12.png

Zum Abschluss muss man noch festlegen, ob Inner oder Outer gemappt werden soll. Damit legt man fest, ob der Tag selber, auf den man gezeigt hat, im Ergebnis erhalten bleiben soll oder nicht. In der Regel wählt man hier Inner, womit der Tag erhalten bleibt. Zum Abschluss klickt man auf Festlegen. Wenn das Root-Element gemappt ist, dann tauchen auch bei den anderen Elementen die Buttons zum Mappen auf.

Typo3-62-vorlage13.png

Wenn ich keinen großen Fehler gemacht habe, dann sollte sich aus den Kommentaren in der Datenstruktur ergeben, an welches Element jeweils gemappt werden muss. Falls zwei Elemente zur Auswahl stehen, dann immer das innere nehmen. Alle Elemente werden auf Inner gemappt.

Typo3-62-vorlage14.png

Einige Elemente aus der XML-Struktur werden nicht gempappt, sie sind nur für mehrspaltige Layouts wichtig. Sie müssen aber trotzdem schon definiert sein, damit die Vorlagen eine gemeinsame Basis nutzen. Zum Abschluss muss man dann auf Speichern oder Speichern und Beenden klicken.

Kopfteile

Beim Bearbeiten des TemplaVoila-Templates haben wir bisher immer nur den Reiter Information benutzt und sind von dort aus zum eigentlichen Mapping gekommen. Zum Abschluss macht es Sinn sich auch einmal den Reiter Kopfteile genauer anzusehen.

Typo3-62-vorlage16.png

Hier legt man fest, welche Header-Zeilen aus der Vorlagendatei in die fertige Seite übernommen werden sollen. Das gibt einem relativ umfangreiche Möglichkeiten für die unterschiedliche Gestaltung der Vorlagen. Nach Änderungen muss man zuerst Festlegen auswählen, bevor man auf Speichern bzw. Speichern und zurück gehen kann.

Verschönerung der Vorlage(n)

An mehreren Stellen kann man in den Formularen zur Bearbeitung der Vorlagen auch Icons einbinden. Dafür eignen sich die folgenden Abbildungen:

Eine-spalte.png Zwei-spalten.png Drei-spalten.png

Es sind drei Abbildungen, da man sich analog zu dieser Beschreibung natürlich noch ein zweispaltiges und ein dreispaltiges Template erstellen kann.

Auf der Ausgangsseite sollte dann unter Seiteneigenschaften im Reiter Ressourcen eine passende Header-Grafik hochgeladen werden, passend wäre z.B.

Remi inconnu Flat button 2000x140.png


Gestaltung im Backend

Die drei Inhaltsbereiche (beim dreispaltigen Layout) sind in der Regel gleich breit. Das führt dann gelegentlich zu Fehleingaben. Schöner ist es, wenn man auch das Backend konfiguriert und die Hauptspalte breiter macht als die Nebenspalten.

Man kann genau dafür eine Konfigurationsdatei angeben.

Typo3-62-vorlage18.png

Der Aufbau dieser Datei kann ganz einfach sein, in der Regel nimmt man eine klassische Tabelle:

 <table border="0" cellpadding="2" cellspacing="2" width="95%" align="center">
 <tr>
   <td valign="top" width="20%">###field_menucontent###</td>
   <td valign="top" width="60%">###field_maincontent###</td>
   <td valign="top" width="*">###field_contentright###</td>
 </tr>
 </table>

Hier legt man für jedes Elemete die Breite fest.

Typo3-62-vorlage19.png

Man könnte die Elemente natürlich auch untereinander anordnen.

Nutzung der Vorlage

Wählt man jetzt in der Funktion Seite für die Ausgangsseite unter Erscheinungsbild das eben definierte Template aus, so verschwindet die bisher auftauchende Fehlermeldung.

Typo3-62-vorlage15.png

Es erscheint im Frontend natürlich nur eine leere Seite, da wir bisher ja auch keinerlei Seiteninhalte eingegeben haben und auch keinerlei Typoscript. Immerhin hat sich jetzt das Backend verändert und man kann Seiteninhalte eingeben.

Typo3-62-vorlage17.png

Als Vorbereitung für den nächsten Schritt sollte man hier unbedingt ein Inhaltselement anlegen, wie das geht ist unter Anleitung für Redakteure beschrieben. Falls man Text braucht, so ist http://loremipsum.de/ eine gute Quelle.


Weitere Grundlagen

Unter

habe ich noch weitere Beschreibungen, die sich aber auf Version 4.5 beziehen.