Was ist TemplaVoila und wie genau funktionierts. Ein Beispiel mit allen Templates

**Junior** · 02.08.2006, 12:55

Ich habe heute zum ersten Mal TemplaVoila ausprobiert und muss sagen, dass ich begeistert bin. Anstatt sich durch TypoScript zu beissen ist, wenn mal einmal das Prinzig verstanden hat alles sehr einfach.

In wenigen Worten erklärt erstellt man ein HTML-Template, also eine normale Webseite und mapt diese dann. Das heisst, dass man den einzelnen Bereichen (z.B. einem div oder einem td) eine Funktion zuweist. Das kann ein Menu, ein Inhaltsbereich oder was auch immer sein.

So einfach habe ich eine Hoempage noch nie erstellt. Was allerdings mühsam war, war das zusammensuchen der Tutorials und der Grundlegenden Funktionen. Das Problem der offiziellen Doku ist, dasss sie sich, wie so oft, in romanhaften Erklärungen verliert und es schwierig ist die wirklich relevanten Informationen zu erkennen. Ich liefere daher hier eine kurze Linkliste.

Sehr gutes und einfach zuverstehendes Tutorial auf englisch von Marlies
Colored BW Clipart IV

Es ist definitiv empfehlenswert sein HTML-Template ohne Tabelle zu machen und statdessen CSS zu benutzen. Wer damit noch keine Erfahrungen gesammelt hat wird hier fündig
CSS 4 You - The Finest in Stylesheets

Und zu guter letzt liefere ich noch mein komplettes Template mit.

Mein HTML-Template (welches unter fileadmin/ abgespeichert werden soll)

HTML-Code:

<html>
	<head>
		<title>Seitentitel</title>
	</head>
<body>
	<div class="menu_1">
		<a href="#">Menu item 1</a>
		<a href="#">Menu item 2</a>
		<a href="#">Menu item 3</a>
		<a href="#">Menu item 4</a>
		<a href="#">Menu item 5</a>
		<a href="#">Menu item 6</a>
		<a href="#">Menu item 7</a> 
	</div>
	
	<div class="menu_2a">&nbsp;</div>

	<div class="menu_2">
		<a href="#">Menu item 1</a>
		<a href="#">Menu item 2</a>
		<a href="#">Menu item 3</a>
		<a href="#">Menu item 4</a>
		<a href="#">Menu item 5</a>
		<a href="#">Menu item 6</a>
		<a href="#">Menu item 7</a>
	</div>

	<div class="content">
		Content
	</div>

	<div class="box">
		Box
	</div>
</body>
</html>

Code:

Meine CSS Datei

body
	{
		background-image: url(../img/logo.gif);
		background-repeat: no-repeat;
		background-position: 20px 20px 20px 20px;
		font-size: 13px
	}
 
.menu_1
	{
		position: absolute;
		left: 205px;
		top: 90px;
		font-size: 12px;
	}

.menu_2
	{
		position: absolute;
		left: 205px;
		top: 105px;
		font-size: 12px;
	}

.menu_2 a
	{
		text-decoration: none;
		font-weight: bold;
		color: #c41919;
	}

.content
	{
		position: absolute;
		left: 205px;
		top: 120px;
		font-size: 14px;
		width: 435;
		border: 0pt solid #000;
	}

.box
	{
		position: absolute;
		left: 10px;
		top: 120px;
		font-size: 14px;
		width: 187px;
		border: 0pt solid #000;
	}

Mein TypoScript (Setup)

# Main Menu
lib.menu_1 = HMENU
lib.menu_1.entryLevel = 0
lib.menu_1.1 = TMENU
lib.menu_1.1{
NO{
linkWrap =  
RO=1
}
}

# Submenu
lib.menu_2 = HMENU
lib.menu_2.entryLevel = 1
lib.menu_2.1 = TMENU
lib.menu_2.1{
NO{
linkWrap =  
RO=1
}
}

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page.stylesheet = fileadmin/templates/main/styles/main.css

menu_1 und menu_2 müssen identisch sein mit der div classe im HTML-Template (und natürlich auch mit der Klasse in der CSS-Datei).

Mit diesen Angaben sollte es ohne weiteres möglich sein als Anfänger eine Homepage in rund 2 Stunden zum laufen zu bringen.

Und hier der Link zur fertigen Seite: Sophie Stierle: Home
Bitte beachtet dass es sich dabei zum Teil um ein Testprojekt handelt und daher weder das Logo noch die "Lipsum"-Texte final sind.

Eine wichtige Anmerkung habe ich noch. Ich hatte mir meine Seitenstruktur im backend erstellt und danach erst alles gemapt. Die Startseite wurde angezeigt, ging ich aber auf eine Unterseite kam eine Fehlermeldung. Die lag daran, dass die Seiten in der Baumstruktur erstellt wurden bevor das TemplaVoila erstellt wurde. Mit Seiten die danach erstellt werden funktioniert es problemlos, da die DS und DO Angaben nun im Seitenkopf der Seite abgespeichert sind.

Wenn du nachträglich Änderungen im HTML-Template machst musst du das Template unter filelist neu Aufrufen und auf das Seitenicon klicken und "TEmplaVoila" aufrufen, dort klickst du dann unten auf "Save As", auf der folge Seite findest du zuunterst ein Dropdown-Menu, wähle dort den ursprünglichen Namen aus und klicke auf Update. Alle Caches löschen!. Erst dann werden die Änderungen angezeigt.

Wenn ihr Fragen zu diesem Beispiel habt, könnt ihr sie direkt hier stellen.

Ganz lieben Gruss

Junior

**Roland** · 02.08.2006, 13:40

Hallo Junior,

vielen Dank für deine Mühe.

TV überzeugt mich allerdings noch nicht.
Wie Du selbst anmerkst, ist die Doku "sehr schlecht".

Wenn ich mir dazu die Probleme auf den 19 Seiten (Stand heutiger Tag auf:
http://www.typo-3.de/index.php?id=13...&fid=31&page=1
und die 4 Seiten auf:
http://www.typo3forum.net/forum/templavoila/
anschaue und nur mal so die Überschriften lese, dann werde ich doch einen Drec... tun mir zu den vielen Problemen die Typo3 eh schon aufwirft noch TV dazu zu holen.
Vor allem, wenn "im Hintergrund von TV Dinge passieren in die ich weder eingreifen kann, noch die ich selbst beheben kann. TV macht das ja schließlich dann für mich - oder eben nicht.

OK. für Anfänger mit kleinen Seitenumfang innerhalb von Typo3 ist das sicherlich eine große Hilfe - überhaupt erst einmal schnell und einfach (so wie es CSS denn einfach zulässt) in Typo3 einzusteigen und Typo3 nutzen zu können.

Deshalb auch noch einmal vielen Dank für Deine Veröffentlichung.

MFG
Roland

**LineMan** · 02.08.2006, 15:14

also ich habe mich auch schon öfter damit befasst und hatte eher mehr als weniger probleme eine seite wie z.B. http://www.css-tutorials.de/ damit umzusetzen. Hatte angefangen mit TV und bin dann nachher doch wieder auf die klassische Art zurück geschwenkt. z.B. hatte ich das Gefühl das TV ein paar Probleme mit verschachtelten divs hat und andere Dinge, wie oftmaliges Fehlschlagen von Mappings... Nichts desto trotz danke für Dein Tutorial... ich werde es beizeiten mal durchführen...

**mstuebner** · 02.08.2006, 16:39

Zitat von Roland

Wie Du selbst anmerkst, ist die Doku "sehr schlecht".

Das ist allein dadurch bedingt, dass es zwei Benutzerguppen gibt:

1. Die die wissen wie es geht (und keine Doku brauchen)
2. Die die eine Doku dringend brauchen

Gruppe 2 zerfällt wieder in zwei Gruppen:
2a. die die aufgeben
2b. die sich durchbeissen

Dummerweise gehen Mitglieder der Gruppe 2b nahtlos in die Gruppe 1 über. ;-)

Ich habe aufgehört zu zählen wie oft Mitglieder der Gruppe 2 vermeldet haben "wenn ich es verstanden habe dokumentiere ich das". Allein gesehen habe ich es noch nie. Und damit ändert sich der Zustand auch nicht.

Nicht toll, aber so ist es leider.

**parchegroup** · 02.08.2006, 18:23

Hallo Junior,

willkomen im Club

!

Macht doch Spaß, oder?

Ich hab vorher auch nur konventionell gearbeitet. Seit ich mich mit TV beschäftige, will ich es nicht mehr missen.

Eins fehlt noch!!

Der Und so sieht es dann fertig aus Link.

Viele Grüße

**Junior** · 03.08.2006, 10:40

Zitat von mstuebner

Ich habe aufgehört zu zählen wie oft Mitglieder der Gruppe 2 vermeldet haben "wenn ich es verstanden habe dokumentiere ich das". Allein gesehen habe ich es noch nie. Und damit ändert sich der Zustand auch nicht.

Naja, jetzt haste es ja gesehen, bei mir

Aber ich geber dir Recht, was die Einteilung der Gruppen betrifft.

Zitat von parchegroup

Hallo Junior,

willkomen im Club

!

Macht doch Spaß, oder?

Ich hab vorher auch nur konventionell gearbeitet. Seit ich mich mit TV beschäftige, will ich es nicht mehr missen.

Eins fehlt noch!!

Der Und so sieht es dann fertig aus Link.

Viele Grüße

Ja, du hast Recht, den so sieht es fertig aus Link habe ich jetzt oben noch hinzugefügt. Und ich kann mir dir nur anschliessen es macht unglaublich viel Spass und ich bin richtig angefixt was TV betrifft.

Die konventionelle Methode entsprach nicht meiner Art zu denken und zu verstehen. TV habe ich sofort kapiert und es ist ein Segen mit TYPO3 so arbeiten zu können.

parchegroup, wir werden sicherlich noch das ein oder andere Thema dazu durchdiskutieren und uns dort austauschen.

Ganz lieben Gruss

Junior

**parchegroup** · 03.08.2006, 10:50

Hi Junior,

ich bin da nicht so fit in Sprachen. Was ist das denn für eine?

**Junior** · 03.08.2006, 11:07

Elmar, was meinst du genau?

Ahh... du meinst den Link. Das ist nur die Lipsum-Sprache, also ein reiner Texthalter der nichts zu sagen hat.

Schau mal hier: http://typo3.org/extensions/reposito...m_ipsum/1.1.0/

Ganz lieben Gruss

Junior

**Armin** · 03.08.2006, 12:11

Guten Tag,

ich habe schon einges über TV gelesen, und einiges getestet. Aber den wahren Sinn habe ich nicht verstanden...;)
Vielleicht kann mich mal einer aufklären.

Armin

**mstuebner** · 05.08.2006, 12:24

Zitat von Armin

ich habe schon einges über TV gelesen, und einiges getestet. Aber den wahren Sinn habe ich nicht verstanden...;)
Vielleicht kann mich mal einer aufklären.

NORMALER Weise hat man immer irgendein Spaltenlayout. Wenn man aber z.B. in der einen Spalte Unterbereiche haben möchte wir das in TS ein bischen aufwändiger.

Mit TV kannst Du Dir Deine Vorlage als HTML Datei schreiben und weisst dann TYPO3 (mittels TV) nur noch an, in welchen Bereiche WAS abgebildet werden soll. TV baut Dir also den TSCode für das Grundgerüst.