Ok, wir haben unser Grundgerüst, aber mal ehrlich - das sieht doch grausig aus.
Also wollen wir mal was für unsere Ästhetik tun
Das Menü oben soll ein grafisches Menü werden, da wir einen Lieblingsfont uns dafür ausgesucht haben - kein Problem.
Tapo3 bringt einen Menütyp mit: GMENU (graphic menu) das genau das tut was wir vorhaben.
Grafisches Menü - das heisst, es werden Grafiken erzeugt und die Beschriftung der Grafiken erfolgt dynamisch. Das hat den Vorteil, das wir beliebige Fonts benutzen können, die dann in der Beschriftung erscheinen. Hierzu haben erstellen wir unter fileadmin einen Ordner "fonts" und laden die gewünschten ttf-Files rein.
Am Typoscript brauchen wir garnicht viel verändern, wir müssen nur spezielle grafische Anweisung mit unterbringen.
Hier mal das Typoscript für unser grafisches Menü:
Code:
TOPMENU = HMENU
TOPMENU {
special = directory
special.value = 2
1 = GMENU
1.wrap=<ul>|</ul>
1.noBlur = 1
1.NO = 1
1.NO {
XY = 100,20
align = center
background = #fdcba9
wrap = <li>|</li>
#Hintergrundbild
5 = IMAGE
5.file = fileadmin/images/topmenu.gif
#Beschriftung als Text rendern
10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/fonts/MAIAN.TTF
10.fontSize = 14
10.antiAlias = 1
10.offset = 0,14
10.align = center
}
1.RO < .1.NO
1.RO = 1
1.RO.5.file = fileadmin/images/topmenu_ro.gif
1.RO.10.fontColor = #000000
1.ACT < .1.NO
1.ACT = 1
1.ACT.5.file = fileadmin/images/topmenu_act.gif
1.ACT.10.fonColor = #0A3754
}
Na, Schweissperlen auf der Stirn ?
So schlimm ist es gar nicht, Der Anfang sollte uns bekannt vorkommen. Allerdings ist der Teil von 1.NO doch neu.
Hier die Erklärung dazu:
XY - Das ist die Grösse unserer Grafik, in unserem Falle 100px Breite, 20px Höhe
align - das ist die Ausrichtung
background - der Farbwert für den Hintergrund
Unsere Grafik besteht aus 2 Teilen, einem Hintergrundbild und der Beschriftung.
Als erstes definieren wir die Hintergrundgrafik (Objekt 5). Es wird eine Referenz zu einem bestehenden Bild angegeben, das in unserem Fall die selben Ausmasse hat.
Objekt 10 enthält die Beschriftung als Textobjekt.
text.field=title - Die beschriftung kommt aus dem Datenbankfeld "Title", also der Seitentitel.
Als Font nehmen wir unseren Lieblingsfont, den wir im Ordner fileadmin/fonts vorliegen haben - ist das nicht scharf ?
Die nächsten Werte beziehen sich auf die Schriftformatierung (Grösse, Kantenglättung, Abstand vom Rand und Ausrichtung.
Da wir den Text zentrieren, kann der Offset vom linken Rand mit 0 angegeben werden.
Das wars auch schon, für Rollover(RO) tauschen wir das Bild und die Schriftfarbe aus, ebenso für den aktiven Zustand.
Wow, wir haben mit wenigen Zeilen erreicht, das Typo3 uns dynamisch Grafiken aus dem Seitentitel mit gewünschtem Font generiert - wer das mal mit php versucht hat, wird wissen, wie komplex das ist.
Ok, das wars schon.
Da wir schon beim Menü sind, wollen wir ein Brotkrumenmenü haben (Breadcrumb-Navigation). Dieses spezielle Menü zeigt uns an, wo wir uns befinden, jeder kennts von anderen Seiten.
Auch dafür hat Typo3 schon alles vorbereitet.
Wir wollen unser Breadcrumb im Inhaltsbereich oben haben. Müssen wir jetzt einen neuen Marker ins Template packen ?
NEIN !
Hä ?
Ja, richtig gehört, wir bedienen uns eines einfachen Elements,
COA.
COA (ContentObjectArray) ist also nichts anderes als eine Ansammlung von Objekten. Im Prinzip haben wir das schon häufiger eingesetzt.
Ein Beispiel:
Code:
WALD = COA
WALD {
10 = BAUM
20 = BAUM
30 = BAUM
40 = BAUM
}
Genauso wollen wir das auch mit unserem Marker INHALT machen. Statt ihm nur ein Element zuzuweisen, nehmen wir 2:
Code:
INHALT = COA
INHALT{
10 < Breadcrumb
20 < content.styles.get
}
Natürlich müssen wir unsere Bredcrumbnavigation erst einmal erstellen.
Es ist ein Menü (HMENU), und als special bekommt es nicht directory sondern rootline.
So sieht es aus:
Code:
10 = HMENU
10 {
special = rootline
special.range = 2|-1
1 = TMENU
1.noBlur = 1
1.wrap = <ul id="breadcrumb"> | </ul>
1.NO.linkWrap = <li> | » </li>
1.NO.ATagTitle.field = title
1.NO.ATagTitle.noTrimWrap = | zur Seite: |
1.CUR = 1
1.CUR {
linkWrap = <li><span class="spot5" title="Sie befinden sich auf der Seite:"> | </span></li>
doNotLinkIt = 1
}
}
rootline steht also für die Breadcrumb-Navigation. Etwas krytisch sieht der range-Befehl aus:
special.range = 2|-1
Übersetzt heisst das:
special.range = Start-Ebene | letzte Ebene
Unsere Breadcrumb fängt also bei Ebene 2 an, die -1 steht für "unbegrenzt".
Der aktive Punkt wird nicht verlinkt (doNotLinkIt), die Links bekommen ein Sonderzeichen (der Doppelpfeil) nachgestellt. So sieht unser Klickpfad doch sehr schön aus.
Abschliessend habe ich das CSS noch verschönert, so das unsere Seite schon sehr ansehnlich aussieht.
Als Sahnehäubchen habe ich das ganze
online gestellt, im Login-Bereich könnt ihr Euch einloggen und den Source im Gesamten betrachten, downloaden sowie die Menügrafiken herunterladen.
Loggt Euch ein mit
tpworkshop / typo3 und ihr erhaltet Zugang zum internen Bereich. Wie man soetwas erstellt, zeige ich im nächsten Abschnitt.
![[Workshop] Typo3-Workshop Teil V - Tuning](http://www.traum-projekt.com/forum/iconimages/workshops-und-tutorials/workshop-typo3-workshop-teil-v_ltr.gif)
![[Workshop] Typo3-Workshop Teil V - Tuning](http://www.traum-projekt.com/forum/images/misc/navbits_finallink.gif){kind=small}
