[Workshop] Typo3-Workshop Teil IV - Template, Fortsetzung

[steffenk]

Nun haben wir alles Rüstzeug, um unsere Seite zu gestalten.

Achtung - im Basistemplate muss css_styled_content eingebunden werden, ohne das geht garnichts!

Entgegen den sonst üblichen Tutorials wende ich mich zuerst dem menü zu, da es doch wichtig ist, durch die einzelnen Seiten navigieren zu können und somit schon Seiteninhalte sichtbar machen zu können.

Bevor wir zum Menü gehen, möchte ich den Inhalt einbinden.
Wie ihr sicher schon bemerkt habt, sehen wir auf einer Seite immer 4 Spalten, wo Inhalte eingefügt werden können:
Links, Normal, Rechts, Rand.

Die Bezeichnungen stehen lediglich für Vorschläge, wo die Inhalte hinkommen könnten. Das schöne ist, das diese Spalten im TS mit einer Variable angesprochen werden können:
Links steht in styles.content.getLeft
Normal steht in styles.content.get
Rechts steht in styles.content.getRight
Rand steht in styles.content.getBorder

Ahh

Das ist schön. Wir brauchen ja nur eine Spalte, da wir nur einen Inhaltsbereich haben, wir kopieren also unseren Inhalt der Normal-Spalte in unseren Marker:

INHALT < styles.content.get

Somit haben wir schon alles für den Inhalt getan.

In den Footer packen wir einfach einen beliebigen Text

FOOTER = TEXT
FOOTER.value = Dies ist eine Site aus dem TP Typo3-Workshop - Februar 2006

Hach wie schön, ist es jetzt nicht einfach, Inhalte einzufügen ?

Na dann machen wir uns doch an das Menü.
Es gibt einige Menütypen in Typo3, wir greifen uns nur 2 heraus : GMENU (grafisches Menü) und TMENU (Textmenü)
Wir wollen beide einsetzen. So möchten wir ins TOPMENU ein grafisches Menü und links das Submenü als Textmenü.

Fangen wir also mit dem TMENU an.
Das ist unproblematischer und wir können wenigstens schonmal durch unsere Seiten navigieren.

[steffenk]

Beginnen wir also mit dem Menü. Alle Menüs haben ein "Menü-Ober-Element", HMENU. Das heisst übersetzt nichts anderes als "hierarchisches Menü".
Hier mal ein einfacher Code für das Menü:

TOPMENU = HMENU
TOPMENU {
	special = directory
	special.value = 3
	1 = TMENU
	1.wrap=<ul>|</ul>
	
	1.NO = 1
	1.NO.linkWrap = <li>|</li>
	
	1.ACT = 1
	1.ACT < .NO
	1.ACT.doNotLinkIt = 1
	1.ACT.allWrap = <li id="topnavi-aktiv">|</li> 
}

Wollen wir uns das mal anschauen.
Also wir definieren unseren Marker als HMENU.
Diesem sagen wir mit special = directory , das es sich um ein menü handelt, das sich nach dem Seitenbaum richtet.
Mit special.value = 3 sagen wir dem Menü, das es als Ausgangspunkt die Seite mit der id 3 hat, in meinem Fall ist das die Seite "oberes Menü"
Tipp: wenn ihr im Seitenbaum mit der Maus über das Icon einer Seite fahrt, bekommt ihr die Seitenid eingeblendet.

Nun fangen wir mit der ersten Ebene des Menüs an (hier brauchen wir auch nur eine Ebene, wir wollen oben keine Unterseiten anzeigen)
Also nehmen wir wieder für das Unterobjekt eine Zahl, diesmal die 1
1 = TMENU
Damit legen wir fest, das es sich um ein Textmenü handelt.

Als nächstes packen wir das Menü ein. Wir nehmen standardmässig für ein CSS-Layout eine Liste der Form

<ul>
	<li><a href="#">Menüpunkt 1</a></li>
	<li><a href="#">Menüpunkt 2</a></li>
	<li><a href="#">Menüpunkt 3</a></li>
</ul>

Wir legen also um das ganze Menü die ul's: 1.wrap=<ul>|</ul>


Jetzt geht es zu den einzelnen Menü-Einträgen, also die Seitenlinks.
1.NO = 1
Was ist denn das ?

ich möchte lösen:
ok, unser TMENU hat ein Unterobjekt, den normalen Menüeintrag (NO)
mit 1.NO = 1 sagen wir nichts anders als
[Zustand normaler Menüeintrag] = aktiviert (1)
Dies ist zwar nicht unbedingt nötig, wir gewöhnen uns das aber besser direkt so an, damit wir später nicht stolpern.

Wir packen noch um unseren Eintrag den li-tag mit der Anweisung
1.NO.linkWrap = <li>|</li>

Jetzt wollen wir noch den ausgewählten Eintrag hervorheben. Dafür gibt es das Objekt ACT (actual)

Wir aktivieren den Zustand mit
1.ACT = 1
Dann machen wir es uns ganz einfach und kopieren alles vom NO-Objekt mit
1.ACT < .NO
Der aktuelle Eintrag soll nicht verlinkt sein
1.ACT.doNotLinkIt = 1
Das einzige, was anders sein soll ist die css-Klasse, und die ändern wir für den ACT-Eintrag mit
1.ACT.allWrap = <li id="topnavi-aktiv">|</li>

Fertig.
Zum besseren Verständnis hier alle Zustände, die es für Menüeinträge gibt:

NO - der Normalzustand
RO - der RollOver (hover)-Zustand (den benötigen wir hauptsächlich für das grafische Menü, sonst machen wir das mit CSS)
CUR - Der Menüeintrag der momentan geöffneten Seite
ACT - wie CUR, nur bleibt er auch bei geöffneten Unterseiten des Eintrags
IFSUB - ein Zustand für Seiten, die Unterseiten besitzen
SPC - Abstand (space) - gilt für Seiten vom Typ "Abstand"
USR - für Seiten mit Zugangsbeschränkung

Jeder Zustand, der benutzt wird, muss immer aktiviert werden.

Prima, dann machen wir das doch auch direkt für das linke Menü. Einziger Unterschied, das wir von einer anderen Ursprungsseite ausgehen und ev. mehrere Ebenen brauchen.

Als erstes kopieren wir unser Menü und ändern nur den Startpunkt und den Namen der CSS-Klasse

LINKS = HMENU
LINKS {
	special = directory
	special.value = 3
	1 = TMENU
	1.wrap=<ul>|</ul>
	
	1.NO = 1
	1.NO.linkWrap = <li>|</li>
	
	1.ACT = 1
	1.ACT < .NO
	1.ACT.doNotLinkIt = 1
	1.ACT.allWrap = <li id="leftnavi-aktiv">|</li> 

}

Um die nächste Ebene testen zu können, legen wir 2 weitere Seiten unterhalb von Produkte an:


Machen wir uns an die Darstellung. Hier wird es jetzt schön einfach, da wir wieder kopieren können.
Wir erweitern unser HMENU um ein weiteres Objekt. Dieses ist automatisch das Objekt der nächsten Ebene - ist das nicht super praktisch ?
Und dieses Objekt kopieren wir einfach von der ersten Ebene Wir müssen natürlich noch die CSS-Klasse abändern

2 = TMENU
2.noBlur = 1
2.wrap = <li><ul>|</ul></li>
2.noBlur = 1

2.NO = 1
2.NO.ATagTitle.field = title
2.NO.linkWrap = <li>|</li>

2.ACT = 1 
2.ACT < .2.NO
2.ACT.doNotLinkIt = 1
2.ACT.allWrap = <li id="leftnavi-sub-aktiv">|</li>

Komisch, wir probieren es und sehen, das sich nichts verändert hat. Haben wir was falsch gemacht ?
Zur Sicherheit löschen wir das Cache, indem wir auf die beiden Buttons links klicken:


hmm - immer noch nichts. Scheinbar fehlt noch was.

Ah, wir brauchen für die Fortführung der Ebenen einen Wert, der sagt, bei welcher Ebene es los geht.
Schauen wir uns die Ebenen nochmal an:

Unser Menü hat den Ausgangspunkt Ebene 1, wir fügen das noch ein:
entryLevel = 1

und siehe da, es funktioniert
Manche mag es ärgern, das Typo3 immer noch einen Code in die Links schreibt:

onfocus="blurLink(this);"

um das abzuschalten, gibt man noch den Parameter
noBlur = 1
mit. Ausserdem möchten wir noch den title-tag der Links füllen, das machen wir mit dem Seitentitel:


wir schauen uns nochmal das komplette linke Menü an:

LINKS = HMENU
LINKS {
	special = directory
	special.value = 2
	entryLevel = 1
	
	1 = TMENU
	1.wrap= <ul>|</ul>
	1.noBlur = 1
	
	1.NO = 1
	1.NO.ATagTitle.field = title
	1.NO.linkWrap = <li>|</li>
	
	1.ACT = 1
	1.ACT < .NO
	1.ACT.doNotLinkIt = 1
	1.ACT.allWrap = <li id="leftnavi-aktiv">|</li> 
	
	2 = TMENU
	2.noBlur = 1
	2.wrap = <li><ul>|</ul></li>
	2.noBlur = 1
	
	2.NO = 1
	2.NO.ATagTitle.field = title
	2.NO.linkWrap = <li>|</li>
	
	2.ACT = 1 
	2.ACT < .2.NO
	2.ACT.doNotLinkIt = 1
	2.ACT.allWrap = <li id="leftnavi-sub-aktiv">|</li> 
	
}

Jetzt können wir endlich loslegen. Uns fehlt noch ein schönes CSS für die Menüs, und da zähl ich auf euch, das einer mal einen passenden CSS-Code für die beiden ul's postet. Wir können jetzt die Seiten mit beliebigen Inhalten füllen und mit dem Menü durch die Seiten navigieren - wunderbar.

[steffenk]

Zum Abschluss noch ein Leckerli.
Häufig muss man ins Template, um ein paar Kleinigkeiten zu ändern. Das heisst immer: Klick auf Template, Klick auf root-Seite, click auf edit...
Wir wollen uns das vereinfachen. Wir machen genau das, klicken auf der root-Seite auf "Click here to edit whole template record"
Nun haben wir unten links ein kleines Icon "Erzeuge einen Verweis auf die Seite" - auf diesen klicken wir

Die Alertbox bestätigen wir. Nun haben wir unten links folgende Ansicht:

Wir klicken auf die Checkbox "bearbeiten" und danach auf den Bleistift und benennen unseren Shortcut

Wir speichern - und haben ab sofort unten links einen netten Verweis zum direkten Bearbeiten des Templates - sehr praktisch!

So, viel Spass beim Nachmachen !

-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Status der Teilnehmer - Teil IV
- Nele
- Stefan_G
- Nicolas
- Danis
- fettmme
- DSB
- miraculix
- lipsum
- Schneeschaufel
- SonKite
- steff11
- [jacky]
- heatseeker
- flo.s
- andywarhol
- 321
- schuminator
- UweB
- Minnemann
- max.m
- Scriff
- mark.S
- mpenke
- Mallah
- T:-)M
- Borusse

[flo.s]

Bei mir alles ok - danke!

[Mallah]

heute abend werde ich auch mal anfangen ...

vielen dank schonmal, habs ausgedruckt lese es mir erstmal durch

[T:-)M]

Hallo Steffen,

... bin zwar nur Gasthörer - aber da hier zur Zeit keiner was schreibt möchte ich die Lücke nutzen ;-)

Die ersten drei Teile Deines Workshops haben wunderbar geklappt
- hier nochmal großen Dank an Dich -

Beim vierten Teil habe ich den gesamten code unter
template - root - setup eingegeben

Er sieht jetzt nach der Eingabe wie folgt aus

----- code anfang ------

page = PAGE

page {

bodyTag = <body>
includeCSS {
file1 = fileadmin/css/site.css
}

10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/templates/template.html

workOnSubparts = DOKUMENT
marks {

INHALT < styles.content.get

FOOTER = TEXT
FOOTER.value = Dies ist eine Site aus dem TP Typo3-Workshop - Februar 2006

TOPMENU = HMENU
TOPMENU {
special = directory
special.value = 3
1 = TMENU
1.wrap=<ul>|</ul>
1.NO  = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id="topnavi-aktiv">|</li>
}

LINKS = HMENU
LINKS {
special = directory
special.value =2
entryLevel = 1

1 = TMENUE
1.wrap=<ul>|</ul>
1.noBlur = 1

1.NO  = 1
1.NO.ATagTitle.field = title
1.NO.linkWrap = <li>|</li>

1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id="leftnavi-aktiv">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <li><ul>|</ul></li>
2.noBlur = 1

2.NO = 1
2.NO.ATagTitle.field = title
2.NO.linkWrap = <li>|</li>

2.ACT = 1
2.ACT < .2.NO
2.ACT.doNotLinkIt = 1
2.ACT.allWrap = <li id="leftnavi-sub-aktiv">|</li>
}

}
}
}

----------------- code ende -------------------------------

Leider sehe ich gar nichts vom Menue.
Sitze hier schon eine Weile fest und weiss nicht warum es nicht funktioniert...

Könntest Du mir einen Tip geben?

Vielen Dank im Voraus.

Gruß

T:-)M

[steffenk]

also als Ansatz:
1. Cache löschen
2. Überprüfe die Ids. Im obigen Beispiel sind das die Seiten 3 und 2, sind die bei Dir auch mit der ID ?
3. Wird das Template denn angezeigt ?

ps nutz doch code-Boxen, dann bleibt auch die Einrückung vorhanden.

Ausserdem geh mal in den Templateanalyzer und lass Dir Dein Template anzeigen - Fehlermeldungen ?

[Scriff]

also nochmal kurz zum Verständnis:
alle Menüzustände im linkenmenue schreib ich ins Haupttemplate , so das ich alle Ebenen drin habe und nicht jede einzelne Seite eine Menüebene mit TS.

[T:-)M]

Hallo Steffen,

1. cache gelöscht - o.k.
2. ids stimmen - o.k.
3. Anzeige siehe screenshot (sehr merkwürdig...)
... menuline mit topmenu wird angezeigt, jedoch ohne wrap
... left - frame wird nicht angezeigt, linkes Menü ebenfalls nicht
... content - frame wird nicht angezeigt


Gruß

T:-)M

[Borusse]

Sorry das ich mich auch mal einmische Bin eigentlich auch nur ein Gasthörer.
Ich habe jetzt 2 Unterschiedliche Darstellungen.
Mit Firefox:



Mit dem IExplorer:



Liegt das an der css Datei?

[steffenk]

@Scriff - wir machen alles nur in einem Template in der Seite root. Das gilt automatisch für alle (Unter-)seiten

@T:-)M - bitte überprüfe, ob Du im Template unter "Include static (from extensions)" auch die css_styled_content eingebunden hast.

@Borusse - ja, das liegt nur am (nicht vorhandenen) css

hier mal eine quick&dirty-Lösung für die menüs

* {margin:0;padding:0;}
/* topmenu */
#menuline ul {list-style:none;}
#menuline ul li {display:inline;padding:2px 8px;}
#menuline ul li a {color:red;background:#000;padding:2px 4px}
#menuline ul li.topnavi-aktiv a {background:#fff;}

/* leftmenu */
#left ul {list-style:none;margin-top:8px;}
#left ul li {padding-left:6px;}
#left ul li ul {margin-top:0;}
#left ul li ul li {padding-left:12px;}

[T:-)M]

Hi Steffen,

Ja ist drinn.
im root:
Include static (from extensions):css styled content

Gruß
T:-)M

[steffenk]

da muss irgend ein kleiner Übertragungsfehler drinstecken, den ich auf Anhieb nicht seh.
Hier nochmal das komplette Setup:

page = PAGE
page {
	#bodyTag = <body>
	includeCSS {  
    	file1 = fileadmin/css/site.css
	}
	
	10 = TEMPLATE
	10 {
    	template = FILE
    	template.file = fileadmin/templates/template.html

    	workOnSubpart = DOKUMENT
		marks{
		
			INHALT < styles.content.get
			
			LOGO =
			
			TOPMENU = HMENU
			TOPMENU {
				special = directory
				special.value = 3
				1 = TMENU
				1.wrap=<ul>|</ul>
				1.noBlur = 1
				
				1.NO = 1
				1.NO.ATagTitle.field = title
				1.NO.linkWrap = <li>|</li>
				
				1.ACT = 1
				1.ACT < .NO
				1.ACT.doNotLinkIt = 1
				1.ACT.allWrap = <li id="topnavi-aktiv">|</li> 
			}
			
			LINKS = HMENU
			LINKS {
				special = directory
				special.value = 2
				entryLevel = 1
				
				1 = TMENU
				1.wrap= <ul>|</ul>
				1.noBlur = 1
				
				1.NO = 1
				1.NO.ATagTitle.field = title
				1.NO.linkWrap = <li>|</li>
				
				1.ACT = 1
				1.ACT < .NO
				1.ACT.doNotLinkIt = 1
				1.ACT.allWrap = <li id="leftnavi-aktiv">|</li> 
				
				2 = TMENU
				2.noBlur = 1
				2.wrap = <li><ul>|</ul></li>
				2.noBlur = 1
				
				2.NO = 1
				2.NO.ATagTitle.field = title
				2.NO.linkWrap = <li>|</li>
				
				2.ACT = 1 
				2.ACT < .2.NO
				2.ACT.doNotLinkIt = 1
				2.ACT.allWrap = <li id="leftnavi-sub-aktiv">|</li> 
				
			}
			
		}
	}
}

[T:-)M]

Hi Steffen,

so jetzt funzt das auch bei mir :-)

... sag mal warum werden die wrap Trennstriche denn nicht angezeigt?
... in eine Reihe habe ich es per CSS schon gebaut.

Gruß

T:-)M

[steffenk]

Das sind keine Trennstriche. Die Pipe | ist die Variable, die nachher vom Link ersetzt wird.

aus <li>|</li> wird <li><a href="...">...</a></li>