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"> </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)
Typoscript-Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
|
lib.menu_1 = HMENU
lib.menu_1.entryLevel = 0
lib.menu_1.1 = TMENU
lib.menu_1.1{
NO{
linkWrap =
RO=1
}
}
lib.menu_2 = HMENU
lib.menu_2.entryLevel = 1
lib.menu_2.1 = TMENU
lib.menu_2.1{
NO{
linkWrap =
RO=1
}
}
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