Typo3 - Navigation

2006-06-27T10:06:16Z

84.161.145.115: /* Campbell Button Menü */

In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden.

== TMenu_Layer, GMenu_Layer ==

Bei den Layer Menüs gibt es das Problem bei variablen Designs (z.B. Mittig positioniert) dass man die Layer nicht absolut positionieren kann, denn je nach Fenstergröße verändern sich die x und y Werte. Tipps dafür gibt es im Deutschen Typo3 Newgroup und bei Marlies Cohen (mcuniverse.com):

[http://www.mcuniverse.com/TMENU_LAYERS_Tutorial.1098.0.html]

[http://www.typo3.net/forum/?&action=list_post&tid=3197]

=== grafisches Layer Menu ===
Ein Beispiel für ein Menü mit grafischen Hauptpunkten und Grafischen-Layern für die 2. Ebene von archkom.de:

<pre>
###################
### DHTML Navigation ###
###################

includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
temp.navi_gLayer = HMENU
temp.navi_gLayer.special = directory
temp.navi_gLayer.special.value = 2
### Level 1 ###
temp.navi_gLayer.1 = GMENU_LAYERS
temp.navi_gLayer.1 {
hideMenuWhenNotOver =10
hideMenuTimer = 2000
#Syle für den Layer vom Untermenü (Level2)
layerStyle = position:absolute;left:0px;top:249px;width:20px;VISIBILITY:hidden;
#xPosOffset = -113 #von links insgesamt
lockPosition = x
expAll=1
NO = 1
NO {
backColor = #5980B8
XY = 114, 23
10 = TEXT
10{
text.field = title
fontFile = fileadmin/fonts/arialbd.ttf
fontSize=14
fontColor = #FFFFFF
align = center
offset = 0,16
}
} #NO Ende
RO < .NO
RO.10.fontColor= #FFDF00
ACT < .RO
}

### 2. Level ###
temp.navi_gLayer.2 = GMENU
temp.navi_gLayer.2.wrap = |<br>
temp.navi_gLayer.2 {
# hideMenuWhenNotOver = 8
# hideMenuTimer = 300
NO = 1
NO {
XY = 113, 20
5 = BOX
5{
dimensions = 0,0,113,20
color = #5980B8
}
7 = BOX
7{
dimensions = 0,19,113,1
color = #FFFFFF
}
10 = TEXT
10{
fontSize = 11
text.field = title
align = center
offset = 0,14
fontColor = #FFFFFF
}
} #NO Ende
RO < .NO
RO.10.fontColor = #FFDF00
ACT < .RO
}
</pre>

=== Text Layer Menu ===
Eine Variante mit Text Layern
<pre>
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Top Navigation
temp.naviLinks = HMENU
temp.naviLinks.special = directory
temp.naviLinks.special.value = 2
temp.naviLinks.1 = TMENU_LAYERS
temp.naviLinks.1 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=20
leftOffset=-12
hideMenuWhenNotOver = 50
hideMenuTimer = 70
expAll=1
wrap = <table border="0" cellspacing="0" cellpadding="0"><tr>|</tr></table>
NO.allWrap = <td class="topnav"> | </td>
ACT = 1
ACT.allWrap = <td class="topnav_act"> | </td>
}

# Top Navigation 2nd Level
temp.naviLinks.2 = TMENU_LAYERS
temp.naviLinks.2 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=1
topOffset=13
leftOffset=15
expAll=1
wrap = <div class="navLevel2"> | </div>
NO.allWrap = <span class="topnav1"> | </span>
ACT = 1
ACT.allWrap = <span class="topnav1_act"> | </span>
}
</pre>

=== Ausführliches Text Layer Menu ===
Da ist ziemlich viel drin besser wäre eins mit CSS:

TypoScript:
<pre>

##############################
HAUPTEMENU: MENU_MAIN
##############################

# Benoetigte Libaries einfuegen
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Menu erzeugen
temp.MENU_MAIN = HMENU

################
# MENU EBENE 1 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.1 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.1 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=16
leftOffset=0
# Angabe wann sich die naechste Ebene wieder schliessen soll
hideMenuWhenNotOver = 50
hideMenuTimer = 70

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0" class="menu1_main"><tr>|</tr></table>
# Darstellung im Normalmodus
NO {
allWrap = <td class="menu1_main"> | </td>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <td class="menu1_main_act"> | </td>
}

# Ende Ebene 1
}

################
# MENU EBENE 2 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.2 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.2 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=0
leftOffset=140

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}
# Darstellung fuer Unterpunkte mit Subpunkten
IFSUB = 1
IFSUB {
allWrap = <tr><td class="menu1_main2_sub"> | </td></tr>
}

# Ende Ebene 2
}

################
# MENU EBENE 3 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.3 = TMENU
# Eigenschaften Ebene 1
temp.MENU_MAIN.3 {

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}

# Ende Ebene 3
}

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN
</pre>

'''CSS'''
<pre>
*MENUES */
.menue_main
{
background: #000099;
text-align: left;
height: 16 px;
width: 602 px;

}

/*MENU_MAIN */
.menu1_main
{
background-color: #000099;
}

.menu1_main A, .menu1_main A:visited {
color: #ffffff;
text-decoration: none;
display: block;
background-color: #000099;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;
}

.menu1_main A:hover, .menu1_main A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A, .menu1_main_act A:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #CCCCEB;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A:hover, .menu1_main_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

/* MENU_MAIN LEVEL 2 */

.menu1_main2 A, .menu1_main2 A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background: #CCEBCC;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2 A:hover, .menu1_main2 A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A, .menu1_main2_act A:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
background: #009900;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A:hover, .menu1_main2_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A, .menu1_main2_sub A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A:hover, .menu1_main2_sub A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back_act.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}
</pre>

falls es jemanden interessiert!

'''opera - problem''' kann man so lösen

aus der datei jsfunc.layermenu.js (Scripts Verzeichnis)
<pre>
this.x= (bw.ns4||bw.op)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4||bw.op)?this.css.top:this.el.offsetTop;
this.height= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.op?this.css.pixelHeight:0;
this.width= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetWidth:bw.ns4?this.ref.width:bw.op?this.css.pixelWidth:0;
</pre>

ersetzten durch:

<pre>
this.x= (bw.ns4)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4)?this.css.top:this.el.offsetTop;
this.height=(bw.ie4||bw.dom)?this.el.offsetHeight:bw.ns4?this.ref.height:0;
this.width=(bw.ie4||bw.dom)?this.el.offsetWidth:bw.ns4?this.ref.width:0;
</pre>
bei neueren Typo3 Versionen (>= V3.8) könnte es auch schon so funktionieren ?

== Navigation auf CSS Basis als Punktliste ==
(Variation des Tutorials von Typo3.net)

Ein Menü als Punkteliste und nicht als GMENU aufzubauen hat verschiedene Vorteile:

# Die Übertragungszeit der Seite ist schneller.
# Schriften wirken schärfer als die, die der GIFBUILDER erzeugt
# Wenn der Text zu lang werden sollte, wird automatich eine neue Zeile angefangen. Der Text steht dabei in jeder Zeile immer bündig untereinander.
# Die so erzeugten Menüeinträge sind "barrierefrei"
# Die Suchmaschinen können die Links hervorragend analysieren

Das Punkteliste-Menü baut dabei auf das normale TMENU auf:

<pre>
temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 1
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="naviL1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
ATagParams = class="naviL1"
}
CUR < .NO
CUR.doNotLinkIt = 1
ACT < .NO
ACT.wrapItemAndSub = <li class=naviL1_act>|</li>
}
2 < .1
3 < .1
} </pre>

Beschreibung des Sourcecodes:

In der Zeile 1 erzeugen wir ein temporäres cObjekt HMENU.

In diesem Beispiel wird der Einstiegspunkt für das Menü auf die Seite mit der ID 1 gelegt. Für die generierung der 2. Menüebene gibt man hier noch die Seitenbaum-Ebene an, ab der die 2. Menüebene generiert werden soll.

In den Zeile 6-19 wird dann die erste Menüebene definiert.

Das noBlur = 1 wird nur benötigt, wenn die Seite möglichst barrierefrei sein soll.

In Zeile 9 wird die komplette 1. Menüebene mit dem <nowiki><ul></nowiki>-Tags umschlossen.
Anstatt der linkWraps muss nun wrapItemAndSub verwendet werden. Somit wird jetzt ein Link ohne Untermenü mit <nowiki><li>...</li></nowiki> umschlossen; ein Link mit Untermenü allerdings nur mit <nowiki><li></nowiki>... . Dadurch, das die nächste Menüebene wieder mit einem <nowiki><ul></nowiki>-Tag anfängt, wird die Punkteliste sauber generiert.

Zeile 12 sorgt noch dafür, daß jedem Link ein <title>-Tag aus dem Datenbankfeld mitgegeben wird.
Wenn in den Datenbankfeldern der Seite sowohl abstract als auch description nicht eingetragen ist, wird zumindest der Seitentitel eingetragen.

Zeile 15 kopiert die Definition noch vom Normal-Zustand in den Zustand, der aktiv ist, wenn die Seite geöffnent ist.

Zeile 16 entfernt nun noch den Link auf diese Seite, da er hier nicht notwendig und bei barrierefreien Seiten auch nicht gewünscht ist.

Diese Definition wird dann nur noch in Zeile 18 und 19 für die 2. und 3. Menüebene generiert.

Ein passendes CSS wäre z.B. folgendes:
<pre>
#navi {
margin-top:52px;
margin-left:0;
float: left;
width: 220px;
background-image: url(../images/navi_back.gif);
background-color: #920026;
}
.naviL1 {
padding-left:10px;
margin-left:0px;
color:#4782C6;
font-weight: bold;
list-style:none;
line-height: 20px;

}

.naviL1 a:link, .naviL1 a:visited{
padding-left:0px;
color:#FFFFFF;
text-decoration: none;
font-weight: bold;
}
.naviL1 a:hover{
color:#9F002D;
text-decoration:none;
font-weight: bold;
}
</pre>
#navi ist die id für ein DIV in dem die komplette Navigation liegt.

Nun kann man diese Menü mit CSS grafisch noch verfeinern. Ein paar Beispiele wird es mit der nächsten Bearbeitung dieses Tutorials geben.

Beispiele:

=== Campbell Button Menü ===

'''TypoScript'''

<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 26
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul id="iCampbell">|</ul>
1.NO = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="akt">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="akt">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul id="iCampbellL2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li>|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="akt">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="akt">|</li>
}
</pre>

'''CSS (horizontale Version)'''
<pre>
/* Claire Campbell - etwas modifiziert */
/*#iCampbellBox {
background:#28b; margin:0 0 20px; padding:0.6em 0 0 2%; width:400px; height:1.83em;
}*/
ul#iCampbell {
list-style:none;
margin:0 auto;
padding:0;/*notwendig sonst im FF mittig*/
width:100%;
}

ul#iCampbell li {
display:block;
float:left;
width:20%;
font-size:0.78em;
font-weight:bold;
}

ul#iCampbell li a {
display:block;
width:91%;
padding: 0.4em 0.5em 0.5em 0.1em;
border-width:1px;
/*border-color:*/
border-style:solid;
}
#iCampbellBox>ul#iCampbell li span, #iCampbellBox>ul#iCampbell li a {
width:auto; /*nur nicht IEs*/
}

ul#iCampbell li a:link, ul#iCampbell li a:visited {
color:black;
background:#BBBBBB;
border-color:#666 #666 #666 #EEE;
text-decoration:none;
}
ul#iCampbell li a:hover, ul#iCampbell li a:active,ul#iCampbell li.akt a:visited, ul#iCampbell li.akt a:active, ul#iCampbell li.akt a:link {
padding:0.3em 0.6em 0.6em 0.0em;
border-color:#FFF #666 #D6D5DA #FFF;
color:#C80202;
background:#D6D5DA; text-decoration:none;
}

ul#iCampbell li a:active {
color:#C80202;
background:#D6D5DA;
}
...
</pre>

===Einfache CSS Navigation (vertikal)===

'''TypoScript'''
<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 9
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="navi1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="naviL1">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="naviL1_act">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="naviL1_act">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="navi2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="naviL2">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="naviL2_act">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="naviL2_act">|</li>
}
</pre>
'''CSS'''
<pre>
/* navigation haupt */
#navi {
float: left;
padding-left:0px;
padding-top: 3px;
}

.navi1 {
padding:0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
list-style: none;
}

li.naviL1{
clear:both;
}

.naviL1 {
font-family: Arial, Helvetica, sans-serif;
background-image: url(../images/pfeil.gif);
background-repeat: no-repeat;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 16px;
text-decoration: none;
}

.naviL1 a:link, .naviL1 a:visited {
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 16px;
}

.naviL1 a:hover{
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
float:left;
}

li.naviL1_act{
clear:both;
}

.naviL1_act {
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
text-indent: 18px;
}

/* navigation sub */
.navi2 {
padding-left:0px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: none;
}

li.naviL2{
clear:both;
}
.naviL2 {
font-family: Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 14px;
text-decoration: none;
}

.naviL2 a:link, .naviL2 a:visited {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 14px;
}

.naviL2 a:hover{
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
}

li.naviL2_act{
clear:both;
}

.naviL2_act {
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
text-indent: 18px;
}
</pre>

Typo3 - Navigation

2006-06-27T10:05:44Z

84.161.145.115: /* Campbell Button Menü */

In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden.

== TMenu_Layer, GMenu_Layer ==

Bei den Layer Menüs gibt es das Problem bei variablen Designs (z.B. Mittig positioniert) dass man die Layer nicht absolut positionieren kann, denn je nach Fenstergröße verändern sich die x und y Werte. Tipps dafür gibt es im Deutschen Typo3 Newgroup und bei Marlies Cohen (mcuniverse.com):

[http://www.mcuniverse.com/TMENU_LAYERS_Tutorial.1098.0.html]

[http://www.typo3.net/forum/?&action=list_post&tid=3197]

=== grafisches Layer Menu ===
Ein Beispiel für ein Menü mit grafischen Hauptpunkten und Grafischen-Layern für die 2. Ebene von archkom.de:

<pre>
###################
### DHTML Navigation ###
###################

includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
temp.navi_gLayer = HMENU
temp.navi_gLayer.special = directory
temp.navi_gLayer.special.value = 2
### Level 1 ###
temp.navi_gLayer.1 = GMENU_LAYERS
temp.navi_gLayer.1 {
hideMenuWhenNotOver =10
hideMenuTimer = 2000
#Syle für den Layer vom Untermenü (Level2)
layerStyle = position:absolute;left:0px;top:249px;width:20px;VISIBILITY:hidden;
#xPosOffset = -113 #von links insgesamt
lockPosition = x
expAll=1
NO = 1
NO {
backColor = #5980B8
XY = 114, 23
10 = TEXT
10{
text.field = title
fontFile = fileadmin/fonts/arialbd.ttf
fontSize=14
fontColor = #FFFFFF
align = center
offset = 0,16
}
} #NO Ende
RO < .NO
RO.10.fontColor= #FFDF00
ACT < .RO
}

### 2. Level ###
temp.navi_gLayer.2 = GMENU
temp.navi_gLayer.2.wrap = |<br>
temp.navi_gLayer.2 {
# hideMenuWhenNotOver = 8
# hideMenuTimer = 300
NO = 1
NO {
XY = 113, 20
5 = BOX
5{
dimensions = 0,0,113,20
color = #5980B8
}
7 = BOX
7{
dimensions = 0,19,113,1
color = #FFFFFF
}
10 = TEXT
10{
fontSize = 11
text.field = title
align = center
offset = 0,14
fontColor = #FFFFFF
}
} #NO Ende
RO < .NO
RO.10.fontColor = #FFDF00
ACT < .RO
}
</pre>

=== Text Layer Menu ===
Eine Variante mit Text Layern
<pre>
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Top Navigation
temp.naviLinks = HMENU
temp.naviLinks.special = directory
temp.naviLinks.special.value = 2
temp.naviLinks.1 = TMENU_LAYERS
temp.naviLinks.1 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=20
leftOffset=-12
hideMenuWhenNotOver = 50
hideMenuTimer = 70
expAll=1
wrap = <table border="0" cellspacing="0" cellpadding="0"><tr>|</tr></table>
NO.allWrap = <td class="topnav"> | </td>
ACT = 1
ACT.allWrap = <td class="topnav_act"> | </td>
}

# Top Navigation 2nd Level
temp.naviLinks.2 = TMENU_LAYERS
temp.naviLinks.2 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=1
topOffset=13
leftOffset=15
expAll=1
wrap = <div class="navLevel2"> | </div>
NO.allWrap = <span class="topnav1"> | </span>
ACT = 1
ACT.allWrap = <span class="topnav1_act"> | </span>
}
</pre>

=== Ausführliches Text Layer Menu ===
Da ist ziemlich viel drin besser wäre eins mit CSS:

TypoScript:
<pre>

##############################
HAUPTEMENU: MENU_MAIN
##############################

# Benoetigte Libaries einfuegen
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Menu erzeugen
temp.MENU_MAIN = HMENU

################
# MENU EBENE 1 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.1 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.1 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=16
leftOffset=0
# Angabe wann sich die naechste Ebene wieder schliessen soll
hideMenuWhenNotOver = 50
hideMenuTimer = 70

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0" class="menu1_main"><tr>|</tr></table>
# Darstellung im Normalmodus
NO {
allWrap = <td class="menu1_main"> | </td>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <td class="menu1_main_act"> | </td>
}

# Ende Ebene 1
}

################
# MENU EBENE 2 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.2 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.2 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=0
leftOffset=140

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}
# Darstellung fuer Unterpunkte mit Subpunkten
IFSUB = 1
IFSUB {
allWrap = <tr><td class="menu1_main2_sub"> | </td></tr>
}

# Ende Ebene 2
}

################
# MENU EBENE 3 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.3 = TMENU
# Eigenschaften Ebene 1
temp.MENU_MAIN.3 {

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}

# Ende Ebene 3
}

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN
</pre>

'''CSS'''
<pre>
*MENUES */
.menue_main
{
background: #000099;
text-align: left;
height: 16 px;
width: 602 px;

}

/*MENU_MAIN */
.menu1_main
{
background-color: #000099;
}

.menu1_main A, .menu1_main A:visited {
color: #ffffff;
text-decoration: none;
display: block;
background-color: #000099;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;
}

.menu1_main A:hover, .menu1_main A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A, .menu1_main_act A:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #CCCCEB;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A:hover, .menu1_main_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

/* MENU_MAIN LEVEL 2 */

.menu1_main2 A, .menu1_main2 A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background: #CCEBCC;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2 A:hover, .menu1_main2 A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A, .menu1_main2_act A:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
background: #009900;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A:hover, .menu1_main2_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A, .menu1_main2_sub A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A:hover, .menu1_main2_sub A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back_act.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}
</pre>

falls es jemanden interessiert!

'''opera - problem''' kann man so lösen

aus der datei jsfunc.layermenu.js (Scripts Verzeichnis)
<pre>
this.x= (bw.ns4||bw.op)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4||bw.op)?this.css.top:this.el.offsetTop;
this.height= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.op?this.css.pixelHeight:0;
this.width= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetWidth:bw.ns4?this.ref.width:bw.op?this.css.pixelWidth:0;
</pre>

ersetzten durch:

<pre>
this.x= (bw.ns4)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4)?this.css.top:this.el.offsetTop;
this.height=(bw.ie4||bw.dom)?this.el.offsetHeight:bw.ns4?this.ref.height:0;
this.width=(bw.ie4||bw.dom)?this.el.offsetWidth:bw.ns4?this.ref.width:0;
</pre>
bei neueren Typo3 Versionen (>= V3.8) könnte es auch schon so funktionieren ?

== Navigation auf CSS Basis als Punktliste ==
(Variation des Tutorials von Typo3.net)

Ein Menü als Punkteliste und nicht als GMENU aufzubauen hat verschiedene Vorteile:

# Die Übertragungszeit der Seite ist schneller.
# Schriften wirken schärfer als die, die der GIFBUILDER erzeugt
# Wenn der Text zu lang werden sollte, wird automatich eine neue Zeile angefangen. Der Text steht dabei in jeder Zeile immer bündig untereinander.
# Die so erzeugten Menüeinträge sind "barrierefrei"
# Die Suchmaschinen können die Links hervorragend analysieren

Das Punkteliste-Menü baut dabei auf das normale TMENU auf:

<pre>
temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 1
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="naviL1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
ATagParams = class="naviL1"
}
CUR < .NO
CUR.doNotLinkIt = 1
ACT < .NO
ACT.wrapItemAndSub = <li class=naviL1_act>|</li>
}
2 < .1
3 < .1
} </pre>

Beschreibung des Sourcecodes:

In der Zeile 1 erzeugen wir ein temporäres cObjekt HMENU.

In diesem Beispiel wird der Einstiegspunkt für das Menü auf die Seite mit der ID 1 gelegt. Für die generierung der 2. Menüebene gibt man hier noch die Seitenbaum-Ebene an, ab der die 2. Menüebene generiert werden soll.

In den Zeile 6-19 wird dann die erste Menüebene definiert.

Das noBlur = 1 wird nur benötigt, wenn die Seite möglichst barrierefrei sein soll.

In Zeile 9 wird die komplette 1. Menüebene mit dem <nowiki><ul></nowiki>-Tags umschlossen.
Anstatt der linkWraps muss nun wrapItemAndSub verwendet werden. Somit wird jetzt ein Link ohne Untermenü mit <nowiki><li>...</li></nowiki> umschlossen; ein Link mit Untermenü allerdings nur mit <nowiki><li></nowiki>... . Dadurch, das die nächste Menüebene wieder mit einem <nowiki><ul></nowiki>-Tag anfängt, wird die Punkteliste sauber generiert.

Zeile 12 sorgt noch dafür, daß jedem Link ein <title>-Tag aus dem Datenbankfeld mitgegeben wird.
Wenn in den Datenbankfeldern der Seite sowohl abstract als auch description nicht eingetragen ist, wird zumindest der Seitentitel eingetragen.

Zeile 15 kopiert die Definition noch vom Normal-Zustand in den Zustand, der aktiv ist, wenn die Seite geöffnent ist.

Zeile 16 entfernt nun noch den Link auf diese Seite, da er hier nicht notwendig und bei barrierefreien Seiten auch nicht gewünscht ist.

Diese Definition wird dann nur noch in Zeile 18 und 19 für die 2. und 3. Menüebene generiert.

Ein passendes CSS wäre z.B. folgendes:
<pre>
#navi {
margin-top:52px;
margin-left:0;
float: left;
width: 220px;
background-image: url(../images/navi_back.gif);
background-color: #920026;
}
.naviL1 {
padding-left:10px;
margin-left:0px;
color:#4782C6;
font-weight: bold;
list-style:none;
line-height: 20px;

}

.naviL1 a:link, .naviL1 a:visited{
padding-left:0px;
color:#FFFFFF;
text-decoration: none;
font-weight: bold;
}
.naviL1 a:hover{
color:#9F002D;
text-decoration:none;
font-weight: bold;
}
</pre>
#navi ist die id für ein DIV in dem die komplette Navigation liegt.

Nun kann man diese Menü mit CSS grafisch noch verfeinern. Ein paar Beispiele wird es mit der nächsten Bearbeitung dieses Tutorials geben.

Beispiele:

=== Campbell Button Menü ===

'''TypoScript'''

<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 26
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul id="iCampbell">|</ul>
1.NO = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="akt">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="akt">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="iCampbellLs">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li>|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="akt">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="akt">|</li>
}
</pre>

'''CSS (horizontale Version)'''
<pre>
/* Claire Campbell - etwas modifiziert */
/*#iCampbellBox {
background:#28b; margin:0 0 20px; padding:0.6em 0 0 2%; width:400px; height:1.83em;
}*/
ul#iCampbell {
list-style:none;
margin:0 auto;
padding:0;/*notwendig sonst im FF mittig*/
width:100%;
}

ul#iCampbell li {
display:block;
float:left;
width:20%;
font-size:0.78em;
font-weight:bold;
}

ul#iCampbell li a {
display:block;
width:91%;
padding: 0.4em 0.5em 0.5em 0.1em;
border-width:1px;
/*border-color:*/
border-style:solid;
}
#iCampbellBox>ul#iCampbell li span, #iCampbellBox>ul#iCampbell li a {
width:auto; /*nur nicht IEs*/
}

ul#iCampbell li a:link, ul#iCampbell li a:visited {
color:black;
background:#BBBBBB;
border-color:#666 #666 #666 #EEE;
text-decoration:none;
}
ul#iCampbell li a:hover, ul#iCampbell li a:active,ul#iCampbell li.akt a:visited, ul#iCampbell li.akt a:active, ul#iCampbell li.akt a:link {
padding:0.3em 0.6em 0.6em 0.0em;
border-color:#FFF #666 #D6D5DA #FFF;
color:#C80202;
background:#D6D5DA; text-decoration:none;
}

ul#iCampbell li a:active {
color:#C80202;
background:#D6D5DA;
}
</pre>

===Einfache CSS Navigation (vertikal)===

'''TypoScript'''
<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 9
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="navi1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="naviL1">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="naviL1_act">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="naviL1_act">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="navi2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="naviL2">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="naviL2_act">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="naviL2_act">|</li>
}
</pre>
'''CSS'''
<pre>
/* navigation haupt */
#navi {
float: left;
padding-left:0px;
padding-top: 3px;
}

.navi1 {
padding:0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
list-style: none;
}

li.naviL1{
clear:both;
}

.naviL1 {
font-family: Arial, Helvetica, sans-serif;
background-image: url(../images/pfeil.gif);
background-repeat: no-repeat;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 16px;
text-decoration: none;
}

.naviL1 a:link, .naviL1 a:visited {
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 16px;
}

.naviL1 a:hover{
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
float:left;
}

li.naviL1_act{
clear:both;
}

.naviL1_act {
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
text-indent: 18px;
}

/* navigation sub */
.navi2 {
padding-left:0px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: none;
}

li.naviL2{
clear:both;
}
.naviL2 {
font-family: Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 14px;
text-decoration: none;
}

.naviL2 a:link, .naviL2 a:visited {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 14px;
}

.naviL2 a:hover{
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
}

li.naviL2_act{
clear:both;
}

.naviL2_act {
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
text-indent: 18px;
}
</pre>

Typo3 - Navigation

2006-06-27T09:56:55Z

84.161.145.115: /* Navigation auf CSS Basis als Punktliste */

In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden.

== TMenu_Layer, GMenu_Layer ==

Bei den Layer Menüs gibt es das Problem bei variablen Designs (z.B. Mittig positioniert) dass man die Layer nicht absolut positionieren kann, denn je nach Fenstergröße verändern sich die x und y Werte. Tipps dafür gibt es im Deutschen Typo3 Newgroup und bei Marlies Cohen (mcuniverse.com):

[http://www.mcuniverse.com/TMENU_LAYERS_Tutorial.1098.0.html]

[http://www.typo3.net/forum/?&action=list_post&tid=3197]

=== grafisches Layer Menu ===
Ein Beispiel für ein Menü mit grafischen Hauptpunkten und Grafischen-Layern für die 2. Ebene von archkom.de:

<pre>
###################
### DHTML Navigation ###
###################

includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
temp.navi_gLayer = HMENU
temp.navi_gLayer.special = directory
temp.navi_gLayer.special.value = 2
### Level 1 ###
temp.navi_gLayer.1 = GMENU_LAYERS
temp.navi_gLayer.1 {
hideMenuWhenNotOver =10
hideMenuTimer = 2000
#Syle für den Layer vom Untermenü (Level2)
layerStyle = position:absolute;left:0px;top:249px;width:20px;VISIBILITY:hidden;
#xPosOffset = -113 #von links insgesamt
lockPosition = x
expAll=1
NO = 1
NO {
backColor = #5980B8
XY = 114, 23
10 = TEXT
10{
text.field = title
fontFile = fileadmin/fonts/arialbd.ttf
fontSize=14
fontColor = #FFFFFF
align = center
offset = 0,16
}
} #NO Ende
RO < .NO
RO.10.fontColor= #FFDF00
ACT < .RO
}

### 2. Level ###
temp.navi_gLayer.2 = GMENU
temp.navi_gLayer.2.wrap = |<br>
temp.navi_gLayer.2 {
# hideMenuWhenNotOver = 8
# hideMenuTimer = 300
NO = 1
NO {
XY = 113, 20
5 = BOX
5{
dimensions = 0,0,113,20
color = #5980B8
}
7 = BOX
7{
dimensions = 0,19,113,1
color = #FFFFFF
}
10 = TEXT
10{
fontSize = 11
text.field = title
align = center
offset = 0,14
fontColor = #FFFFFF
}
} #NO Ende
RO < .NO
RO.10.fontColor = #FFDF00
ACT < .RO
}
</pre>

=== Text Layer Menu ===
Eine Variante mit Text Layern
<pre>
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Top Navigation
temp.naviLinks = HMENU
temp.naviLinks.special = directory
temp.naviLinks.special.value = 2
temp.naviLinks.1 = TMENU_LAYERS
temp.naviLinks.1 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=20
leftOffset=-12
hideMenuWhenNotOver = 50
hideMenuTimer = 70
expAll=1
wrap = <table border="0" cellspacing="0" cellpadding="0"><tr>|</tr></table>
NO.allWrap = <td class="topnav"> | </td>
ACT = 1
ACT.allWrap = <td class="topnav_act"> | </td>
}

# Top Navigation 2nd Level
temp.naviLinks.2 = TMENU_LAYERS
temp.naviLinks.2 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=1
topOffset=13
leftOffset=15
expAll=1
wrap = <div class="navLevel2"> | </div>
NO.allWrap = <span class="topnav1"> | </span>
ACT = 1
ACT.allWrap = <span class="topnav1_act"> | </span>
}
</pre>

=== Ausführliches Text Layer Menu ===
Da ist ziemlich viel drin besser wäre eins mit CSS:

TypoScript:
<pre>

##############################
HAUPTEMENU: MENU_MAIN
##############################

# Benoetigte Libaries einfuegen
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Menu erzeugen
temp.MENU_MAIN = HMENU

################
# MENU EBENE 1 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.1 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.1 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=16
leftOffset=0
# Angabe wann sich die naechste Ebene wieder schliessen soll
hideMenuWhenNotOver = 50
hideMenuTimer = 70

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0" class="menu1_main"><tr>|</tr></table>
# Darstellung im Normalmodus
NO {
allWrap = <td class="menu1_main"> | </td>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <td class="menu1_main_act"> | </td>
}

# Ende Ebene 1
}

################
# MENU EBENE 2 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.2 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.2 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=0
leftOffset=140

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}
# Darstellung fuer Unterpunkte mit Subpunkten
IFSUB = 1
IFSUB {
allWrap = <tr><td class="menu1_main2_sub"> | </td></tr>
}

# Ende Ebene 2
}

################
# MENU EBENE 3 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.3 = TMENU
# Eigenschaften Ebene 1
temp.MENU_MAIN.3 {

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}

# Ende Ebene 3
}

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN
</pre>

'''CSS'''
<pre>
*MENUES */
.menue_main
{
background: #000099;
text-align: left;
height: 16 px;
width: 602 px;

}

/*MENU_MAIN */
.menu1_main
{
background-color: #000099;
}

.menu1_main A, .menu1_main A:visited {
color: #ffffff;
text-decoration: none;
display: block;
background-color: #000099;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;
}

.menu1_main A:hover, .menu1_main A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A, .menu1_main_act A:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #CCCCEB;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A:hover, .menu1_main_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

/* MENU_MAIN LEVEL 2 */

.menu1_main2 A, .menu1_main2 A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background: #CCEBCC;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2 A:hover, .menu1_main2 A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A, .menu1_main2_act A:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
background: #009900;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A:hover, .menu1_main2_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A, .menu1_main2_sub A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A:hover, .menu1_main2_sub A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back_act.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}
</pre>

falls es jemanden interessiert!

'''opera - problem''' kann man so lösen

aus der datei jsfunc.layermenu.js (Scripts Verzeichnis)
<pre>
this.x= (bw.ns4||bw.op)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4||bw.op)?this.css.top:this.el.offsetTop;
this.height= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.op?this.css.pixelHeight:0;
this.width= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetWidth:bw.ns4?this.ref.width:bw.op?this.css.pixelWidth:0;
</pre>

ersetzten durch:

<pre>
this.x= (bw.ns4)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4)?this.css.top:this.el.offsetTop;
this.height=(bw.ie4||bw.dom)?this.el.offsetHeight:bw.ns4?this.ref.height:0;
this.width=(bw.ie4||bw.dom)?this.el.offsetWidth:bw.ns4?this.ref.width:0;
</pre>
bei neueren Typo3 Versionen (>= V3.8) könnte es auch schon so funktionieren ?

== Navigation auf CSS Basis als Punktliste ==
(Variation des Tutorials von Typo3.net)

Ein Menü als Punkteliste und nicht als GMENU aufzubauen hat verschiedene Vorteile:

# Die Übertragungszeit der Seite ist schneller.
# Schriften wirken schärfer als die, die der GIFBUILDER erzeugt
# Wenn der Text zu lang werden sollte, wird automatich eine neue Zeile angefangen. Der Text steht dabei in jeder Zeile immer bündig untereinander.
# Die so erzeugten Menüeinträge sind "barrierefrei"
# Die Suchmaschinen können die Links hervorragend analysieren

Das Punkteliste-Menü baut dabei auf das normale TMENU auf:

<pre>
temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 1
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="naviL1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
ATagParams = class="naviL1"
}
CUR < .NO
CUR.doNotLinkIt = 1
ACT < .NO
ACT.wrapItemAndSub = <li class=naviL1_act>|</li>
}
2 < .1
3 < .1
} </pre>

Beschreibung des Sourcecodes:

In der Zeile 1 erzeugen wir ein temporäres cObjekt HMENU.

In diesem Beispiel wird der Einstiegspunkt für das Menü auf die Seite mit der ID 1 gelegt. Für die generierung der 2. Menüebene gibt man hier noch die Seitenbaum-Ebene an, ab der die 2. Menüebene generiert werden soll.

In den Zeile 6-19 wird dann die erste Menüebene definiert.

Das noBlur = 1 wird nur benötigt, wenn die Seite möglichst barrierefrei sein soll.

In Zeile 9 wird die komplette 1. Menüebene mit dem <nowiki><ul></nowiki>-Tags umschlossen.
Anstatt der linkWraps muss nun wrapItemAndSub verwendet werden. Somit wird jetzt ein Link ohne Untermenü mit <nowiki><li>...</li></nowiki> umschlossen; ein Link mit Untermenü allerdings nur mit <nowiki><li></nowiki>... . Dadurch, das die nächste Menüebene wieder mit einem <nowiki><ul></nowiki>-Tag anfängt, wird die Punkteliste sauber generiert.

Zeile 12 sorgt noch dafür, daß jedem Link ein <title>-Tag aus dem Datenbankfeld mitgegeben wird.
Wenn in den Datenbankfeldern der Seite sowohl abstract als auch description nicht eingetragen ist, wird zumindest der Seitentitel eingetragen.

Zeile 15 kopiert die Definition noch vom Normal-Zustand in den Zustand, der aktiv ist, wenn die Seite geöffnent ist.

Zeile 16 entfernt nun noch den Link auf diese Seite, da er hier nicht notwendig und bei barrierefreien Seiten auch nicht gewünscht ist.

Diese Definition wird dann nur noch in Zeile 18 und 19 für die 2. und 3. Menüebene generiert.

Ein passendes CSS wäre z.B. folgendes:
<pre>
#navi {
margin-top:52px;
margin-left:0;
float: left;
width: 220px;
background-image: url(../images/navi_back.gif);
background-color: #920026;
}
.naviL1 {
padding-left:10px;
margin-left:0px;
color:#4782C6;
font-weight: bold;
list-style:none;
line-height: 20px;

}

.naviL1 a:link, .naviL1 a:visited{
padding-left:0px;
color:#FFFFFF;
text-decoration: none;
font-weight: bold;
}
.naviL1 a:hover{
color:#9F002D;
text-decoration:none;
font-weight: bold;
}
</pre>
#navi ist die id für ein DIV in dem die komplette Navigation liegt.

Nun kann man diese Menü mit CSS grafisch noch verfeinern. Ein paar Beispiele wird es mit der nächsten Bearbeitung dieses Tutorials geben.

Beispiele:

=== Campbell Button Menü ===

'''TypoScript'''

<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 26
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="iCampbell">|</ul>
1.NO = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="akt">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="akt">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="iCampbellLs">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li>|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="akt">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="akt">|</li>
}
</pre>

'''CSS (horizontale Version)'''
<pre>
/* Claire Campbell - etwas modifiziert */
/*#iCampbellBox {
background:#28b; margin:0 0 20px; padding:0.6em 0 0 2%; width:400px; height:1.83em;
}*/
ul#iCampbell {
list-style:none;
margin:0 auto;
padding:0;/*notwendig sonst im FF mittig*/
width:100%;
}

ul#iCampbell li {
display:block;
float:left;
width:20%;
font-size:0.78em;
font-weight:bold;
}

ul#iCampbell li a {
display:block;
width:91%;
padding: 0.4em 0.5em 0.5em 0.1em;
border-width:1px;
/*border-color:*/
border-style:solid;
}
#iCampbellBox>ul#iCampbell li span, #iCampbellBox>ul#iCampbell li a {
width:auto; /*nur nicht IEs*/
}

ul#iCampbell li a:link, ul#iCampbell li a:visited {
color:black;
background:#BBBBBB;
border-color:#666 #666 #666 #EEE;
text-decoration:none;
}
ul#iCampbell li a:hover, ul#iCampbell li a:active,ul#iCampbell li.akt a:visited, ul#iCampbell li.akt a:active, ul#iCampbell li.akt a:link {
padding:0.3em 0.6em 0.6em 0.0em;
border-color:#FFF #666 #D6D5DA #FFF;
color:#C80202;
background:#D6D5DA; text-decoration:none;
}

ul#iCampbell li a:active {
color:#C80202;
background:#D6D5DA;
}
</pre>

===Einfache CSS Navigation (vertikal)===

'''TypoScript'''
<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 9
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="navi1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="naviL1">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="naviL1_act">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="naviL1_act">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="navi2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="naviL2">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="naviL2_act">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="naviL2_act">|</li>
}
</pre>
'''CSS'''
<pre>
/* navigation haupt */
#navi {
float: left;
padding-left:0px;
padding-top: 3px;
}

.navi1 {
padding:0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
list-style: none;
}

li.naviL1{
clear:both;
}

.naviL1 {
font-family: Arial, Helvetica, sans-serif;
background-image: url(../images/pfeil.gif);
background-repeat: no-repeat;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 16px;
text-decoration: none;
}

.naviL1 a:link, .naviL1 a:visited {
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 16px;
}

.naviL1 a:hover{
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
float:left;
}

li.naviL1_act{
clear:both;
}

.naviL1_act {
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
text-indent: 18px;
}

/* navigation sub */
.navi2 {
padding-left:0px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: none;
}

li.naviL2{
clear:both;
}
.naviL2 {
font-family: Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 14px;
text-decoration: none;
}

.naviL2 a:link, .naviL2 a:visited {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 14px;
}

.naviL2 a:hover{
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
}

li.naviL2_act{
clear:both;
}

.naviL2_act {
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
text-indent: 18px;
}
</pre>

Typo3 - Navigation

2006-06-27T09:38:13Z

84.161.145.115: /* Navigation auf CSS Basis als Punktliste */

In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden.

== TMenu_Layer, GMenu_Layer ==

Bei den Layer Menüs gibt es das Problem bei variablen Designs (z.B. Mittig positioniert) dass man die Layer nicht absolut positionieren kann, denn je nach Fenstergröße verändern sich die x und y Werte. Tipps dafür gibt es im Deutschen Typo3 Newgroup und bei Marlies Cohen (mcuniverse.com):

[http://www.mcuniverse.com/TMENU_LAYERS_Tutorial.1098.0.html]

[http://www.typo3.net/forum/?&action=list_post&tid=3197]

=== grafisches Layer Menu ===
Ein Beispiel für ein Menü mit grafischen Hauptpunkten und Grafischen-Layern für die 2. Ebene von archkom.de:

<pre>
###################
### DHTML Navigation ###
###################

includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
temp.navi_gLayer = HMENU
temp.navi_gLayer.special = directory
temp.navi_gLayer.special.value = 2
### Level 1 ###
temp.navi_gLayer.1 = GMENU_LAYERS
temp.navi_gLayer.1 {
hideMenuWhenNotOver =10
hideMenuTimer = 2000
#Syle für den Layer vom Untermenü (Level2)
layerStyle = position:absolute;left:0px;top:249px;width:20px;VISIBILITY:hidden;
#xPosOffset = -113 #von links insgesamt
lockPosition = x
expAll=1
NO = 1
NO {
backColor = #5980B8
XY = 114, 23
10 = TEXT
10{
text.field = title
fontFile = fileadmin/fonts/arialbd.ttf
fontSize=14
fontColor = #FFFFFF
align = center
offset = 0,16
}
} #NO Ende
RO < .NO
RO.10.fontColor= #FFDF00
ACT < .RO
}

### 2. Level ###
temp.navi_gLayer.2 = GMENU
temp.navi_gLayer.2.wrap = |<br>
temp.navi_gLayer.2 {
# hideMenuWhenNotOver = 8
# hideMenuTimer = 300
NO = 1
NO {
XY = 113, 20
5 = BOX
5{
dimensions = 0,0,113,20
color = #5980B8
}
7 = BOX
7{
dimensions = 0,19,113,1
color = #FFFFFF
}
10 = TEXT
10{
fontSize = 11
text.field = title
align = center
offset = 0,14
fontColor = #FFFFFF
}
} #NO Ende
RO < .NO
RO.10.fontColor = #FFDF00
ACT < .RO
}
</pre>

=== Text Layer Menu ===
Eine Variante mit Text Layern
<pre>
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Top Navigation
temp.naviLinks = HMENU
temp.naviLinks.special = directory
temp.naviLinks.special.value = 2
temp.naviLinks.1 = TMENU_LAYERS
temp.naviLinks.1 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=20
leftOffset=-12
hideMenuWhenNotOver = 50
hideMenuTimer = 70
expAll=1
wrap = <table border="0" cellspacing="0" cellpadding="0"><tr>|</tr></table>
NO.allWrap = <td class="topnav"> | </td>
ACT = 1
ACT.allWrap = <td class="topnav_act"> | </td>
}

# Top Navigation 2nd Level
temp.naviLinks.2 = TMENU_LAYERS
temp.naviLinks.2 {
layerStyle = position:absolute;VISIBILITY:hidden;
lockPosition = x
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=1
topOffset=13
leftOffset=15
expAll=1
wrap = <div class="navLevel2"> | </div>
NO.allWrap = <span class="topnav1"> | </span>
ACT = 1
ACT.allWrap = <span class="topnav1_act"> | </span>
}
</pre>

=== Ausführliches Text Layer Menu ===
Da ist ziemlich viel drin besser wäre eins mit CSS:

TypoScript:
<pre>

##############################
HAUPTEMENU: MENU_MAIN
##############################

# Benoetigte Libaries einfuegen
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

# Menu erzeugen
temp.MENU_MAIN = HMENU

################
# MENU EBENE 1 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.1 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.1 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=16
leftOffset=0
# Angabe wann sich die naechste Ebene wieder schliessen soll
hideMenuWhenNotOver = 50
hideMenuTimer = 70

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0" class="menu1_main"><tr>|</tr></table>
# Darstellung im Normalmodus
NO {
allWrap = <td class="menu1_main"> | </td>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <td class="menu1_main_act"> | </td>
}

# Ende Ebene 1
}

################
# MENU EBENE 2 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.2 = TMENU_LAYERS
# Eigenschaften Ebene 1
temp.MENU_MAIN.2 {

layerStyle = position:absolute;VISIBILITY:hidden;

# Menu verankern, damit es nicht der Maus folgt
lockPosition = x

# Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
relativeToParentLayer=1
relativeToTriggerItem=1
topOffset=0
leftOffset=140

# alle Menuepunkte anzeigen
expAll=1

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}
# Darstellung fuer Unterpunkte mit Subpunkten
IFSUB = 1
IFSUB {
allWrap = <tr><td class="menu1_main2_sub"> | </td></tr>
}

# Ende Ebene 2
}

################
# MENU EBENE 3 #
################
# Ebene 1 erzeugen
temp.MENU_MAIN.3 = TMENU
# Eigenschaften Ebene 1
temp.MENU_MAIN.3 {

# Darstellung der aktuellen Ebene
wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
# Darstellung im Normalmodus
NO {
allWrap = <tr><td class="menu1_main2"> | </td></tr>
}
# Darstellung wenn Aktiv
ACT = 1
ACT {
allWrap = <tr><td class="menu1_main2_act"> | </td></tr>
}

# Ende Ebene 3
}

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN
</pre>

'''CSS'''
<pre>
*MENUES */
.menue_main
{
background: #000099;
text-align: left;
height: 16 px;
width: 602 px;

}

/*MENU_MAIN */
.menu1_main
{
background-color: #000099;
}

.menu1_main A, .menu1_main A:visited {
color: #ffffff;
text-decoration: none;
display: block;
background-color: #000099;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;
}

.menu1_main A:hover, .menu1_main A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A, .menu1_main_act A:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #CCCCEB;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

.menu1_main_act A:hover, .menu1_main_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
display: block;
background-color: #FFCC00;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #ffffff;
font-weight: bold;
font-size: 10pt;
font-family: verdana;

}

/* MENU_MAIN LEVEL 2 */

.menu1_main2 A, .menu1_main2 A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background: #CCEBCC;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2 A:hover, .menu1_main2 A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A, .menu1_main2_act A:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
background: #009900;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_act A:hover, .menu1_main2_act A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background: #FFCC00;
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A, .menu1_main2_sub A:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}

.menu1_main2_sub A:hover, .menu1_main2_sub A:bb:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
background-image : url(main/images/menu_sub_back_act.jpg);
border-bottom: 1px solid #009900;
padding-left: 5px;
width: 140px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
font-size: 8pt;
font-family: verdana;
}
</pre>

falls es jemanden interessiert!

'''opera - problem''' kann man so lösen

aus der datei jsfunc.layermenu.js (Scripts Verzeichnis)
<pre>
this.x= (bw.ns4||bw.op)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4||bw.op)?this.css.top:this.el.offsetTop;
this.height= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.op?this.css.pixelHeight:0;
this.width= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetWidth:bw.ns4?this.ref.width:bw.op?this.css.pixelWidth:0;
</pre>

ersetzten durch:

<pre>
this.x= (bw.ns4)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4)?this.css.top:this.el.offsetTop;
this.height=(bw.ie4||bw.dom)?this.el.offsetHeight:bw.ns4?this.ref.height:0;
this.width=(bw.ie4||bw.dom)?this.el.offsetWidth:bw.ns4?this.ref.width:0;
</pre>
bei neueren Typo3 Versionen (>= V3.8) könnte es auch schon so funktionieren ?

== Navigation auf CSS Basis als Punktliste ==
(Variation des Tutorials von Typo3.net)

Ein Menü als Punkteliste und nicht als GMENU aufzubauen hat verschiedene Vorteile:

# Die Übertragungszeit der Seite ist schneller.
# Schriften wirken schärfer als die, die der GIFBUILDER erzeugt
# Wenn der Text zu lang werden sollte, wird automatich eine neue Zeile angefangen. Der Text steht dabei in jeder Zeile immer bündig untereinander.
# Die so erzeugten Menüeinträge sind "barrierefrei"
# Die Suchmaschinen können die Links hervorragend analysieren

Das Punkteliste-Menü baut dabei auf das normale TMENU auf:

<pre>
temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 1
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="naviL1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
ATagParams = class="naviL1"
}
CUR < .NO
CUR.doNotLinkIt = 1
ACT < .NO
ACT.wrapItemAndSub = <li class=naviL1_act>|</li>
}
2 < .1
3 < .1
} </pre>

Beschreibung des Sourcecodes:

In der Zeile 1 erzeugen wir ein temporäres cObjekt HMENU.

In diesem Beispiel wird der Einstiegspunkt für das Menü auf die Seite mit der ID 1 gelegt. Für die generierung der 2. Menüebene gibt man hier noch die Seitenbaum-Ebene an, ab der die 2. Menüebene generiert werden soll.

In den Zeile 6-19 wird dann die erste Menüebene definiert.

Das noBlur = 1 wird nur benötigt, wenn die Seite möglichst barrierefrei sein soll.

In Zeile 9 wird die komplette 1. Menüebene mit dem <nowiki><ul></nowiki>-Tags umschlossen.
Anstatt der linkWraps muss nun wrapItemAndSub verwendet werden. Somit wird jetzt ein Link ohne Untermenü mit <nowiki><li>...</li></nowiki> umschlossen; ein Link mit Untermenü allerdings nur mit <nowiki><li></nowiki>... . Dadurch, das die nächste Menüebene wieder mit einem <nowiki><ul></nowiki>-Tag anfängt, wird die Punkteliste sauber generiert.

Zeile 12 sorgt noch dafür, daß jedem Link ein <title>-Tag aus dem Datenbankfeld mitgegeben wird.
Wenn in den Datenbankfeldern der Seite sowohl abstract als auch description nicht eingetragen ist, wird zumindest der Seitentitel eingetragen.

Zeile 15 kopiert die Definition noch vom Normal-Zustand in den Zustand, der aktiv ist, wenn die Seite geöffnent ist.

Zeile 16 entfernt nun noch den Link auf diese Seite, da er hier nicht notwendig und bei barrierefreien Seiten auch nicht gewünscht ist.

Diese Definition wird dann nur noch in Zeile 18 und 19 für die 2. und 3. Menüebene generiert.

Ein passendes CSS wäre z.B. folgendes:
<pre>
#navi {
margin-top:52px;
margin-left:0;
float: left;
width: 220px;
background-image: url(../images/navi_back.gif);
background-color: #920026;
}
.naviL1 {
padding-left:10px;
margin-left:0px;
color:#4782C6;
font-weight: bold;
list-style:none;
line-height: 20px;

}

.naviL1 a:link, .naviL1 a:visited{
padding-left:0px;
color:#FFFFFF;
text-decoration: none;
font-weight: bold;
}
.naviL1 a:hover{
color:#9F002D;
text-decoration:none;
font-weight: bold;
}
</pre>
#navi ist die id für ein DIV in dem die komplette Navigation liegt.

Nun kann man diese Menü mit CSS grafisch noch verfeinern. Ein paar Beispiele wird es mit der nächsten Bearbeitung dieses Tutorials geben.

Beispiele:
===Einfache vertikale Navigation===

'''TypoScript'''
<pre>
temp.navi_bulletList = HMENU
temp.navi_bulletList {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 9
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="navi1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="naviL1">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="naviL1_act">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="naviL1_act">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="navi2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="naviL2">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="naviL2_act">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="naviL2_act">|</li>
}
</pre>
'''CSS'''
<pre>
/* navigation haupt */
#navi {
float: left;
padding-left:0px;
padding-top: 3px;
}

.navi1 {
padding:0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
list-style: none;
}

li.naviL1{
clear:both;
}

.naviL1 {
font-family: Arial, Helvetica, sans-serif;
background-image: url(../images/pfeil.gif);
background-repeat: no-repeat;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 16px;
text-decoration: none;
}

.naviL1 a:link, .naviL1 a:visited {
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 16px;
}

.naviL1 a:hover{
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
float:left;
}

li.naviL1_act{
clear:both;
}

.naviL1_act {
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 16px;
background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
text-indent: 18px;
}

/* navigation sub */
.navi2 {
padding-left:0px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: none;
}

li.naviL2{
clear:both;
}
.naviL2 {
font-family: Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
color:#000000;
font-weight: normal;
text-indent: 18px;
line-height: 14px;
text-decoration: none;
}

.naviL2 a:link, .naviL2 a:visited {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration: none;
font-weight: normal;
line-height: 14px;
}

.naviL2 a:hover{
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
}

li.naviL2_act{
clear:both;
}

.naviL2_act {
font-family: Arial, Helvetica, sans-serif;
color:#CA0404;
text-decoration: underline;
font-weight: normal;
line-height: 14px;
text-indent: 18px;
}
</pre>

Typo3 - Tipps und Tricks

2006-06-27T08:53:22Z

84.161.145.115: /* Rendering von Content Elementen */

mehr auf [[Typo3 - TS Templates]]
und: [[Typo3 - Wichtige TypoScript Einstellungen]]

== Rendering von Content Elementen ==
weitere Infos unter:

[[Typo3 - Content Elemente anpassen]]

=== Datum einfügen ===
z.B. als Marker im Template und dann im TS-Setup so:

### datum ###
marks.DATE = COA_INT
marks.DATE {
10 = TEXT
10.data = date:U
10.strftime = %A, %d.%m.%Y
10.wrap = <span class="mini"> | </span>
}

=== Neuste Inhalte anzeigen ===
Quelle: http://typo3.umloud.dk/index.php?id=360 22.5.2006

<pre>
This shows the content elements in the normal column of the page last created/edited.

Note: "tstamp" ONLY get changed/set when you create a new page, or edit the page header NOT when you insert a content element on a page..

lib.newestContent = COA
lib.newestContent {
# First we collect the uids on all levels of the site

# Gets the uids on 1st level
10 = LOAD_REGISTER
10.level1uids.cObject = CONTENT
10.level1uids.cObject {
table = pages
select.pidInList.data = leveluid:0
renderObj = TEXT
renderObj.field = uid
renderObj.wrap = |,
}

# Gets the uids on 2nd level
20 = LOAD_REGISTER
20.level2uids.cObject = CONTENT
20.level2uids.cObject {
table = pages
select.pidInList.cObject = TEXT
select.pidInList.cObject.data = register:level1uids
renderObj = TEXT
renderObj.field = uid
renderObj.wrap = |,
}

# Gets the uids on 3rd level
30 = LOAD_REGISTER
30.level3uids.cObject = CONTENT
30.level3uids.cObject {
table = pages
select.pidInList.cObject = TEXT
select.pidInList.cObject.data = register:level2uids
renderObj = TEXT
renderObj.field = uid
renderObj.wrap = |,
}

# Gets the uids on 4th level
40 = LOAD_REGISTER
40.level4uids.cObject = CONTENT
40.level4uids.cObject {
table = pages
select.pidInList.cObject = TEXT
select.pidInList.cObject.data = register:level3uids
renderObj = TEXT
renderObj.field = uid
renderObj.wrap = |,
}

# Gets the uids on 5th level
50 = LOAD_REGISTER
50.level5uids.cObject = CONTENT
50.level5uids.cObject {
table = pages
select.pidInList.cObject = TEXT
select.pidInList.cObject.data = register:level4uids
renderObj = TEXT
renderObj.field = uid
renderObj.wrap = |,
}

# Gets the uids on 6th level
60 = LOAD_REGISTER
60.level5uids.cObject = CONTENT
60.level5uids.cObject {
table = pages
select.pidInList.cObject = TEXT
select.pidInList.cObject.data = register:level5uids
renderObj = TEXT
renderObj.field = uid
renderObj.wrap = |,
}

# next we combine all of them into one list of uids
70 = LOAD_REGISTER
70.alluids.cObject = COA
70.alluids.cObject {
10 = TEXT
10.data = register:level1uids

20 = TEXT
20.data = register:level2uids

30 = TEXT
30.data = register:level3uids

40 = TEXT
40.data = register:level4uids

50 = TEXT
50.data = register:level5uids

60 = TEXT
60.data = register:level6uids

70 = TEXT
70.data = leveluid:0
}

# Test output
#75 = TEXT
#75.data = register:alluids
#75.wrap = [|]<br>

# More Testoutput
80 = CONTENT
80 {
table = pages
select {
pidInList.data = register:alluids
orderBy = tstamp DESC
max = 1
}
renderObj = COA
renderObj {
10 = TEXT
10.field = title
10.wrap = The newest page is: <b>|</b> 
20 = TEXT
20.field = tstamp
20.strftime = %d-%b-%Y %H:%M:%S
20.wrap = which was last edited: |<br>
}
}

# And the final output of the content elements
90 = COA
90 {
wrap = And here are the content in the normal column of that page:<hr>|<hr>
10 = CONTENT
10 {
table = tt_content
select {
orderBy = sorting
where = colPos=0
languageField = sys_language_uid
pidInList.cObject = CONTENT
pidInList.cObject {
table = pages
select {
pidInList.data = register:alluids
orderBy = tstamp DESC
max = 1
}
renderObj = TEXT
renderObj.field = uid
}
}
}
}
}

</pre>

=== Einstellungen für Bilder ===
Größe (maximal, minimal, Popups, Skalierung, Bildunterschriften...)
====Border Attribut loswerden====
config.config.disableImgBorderAttr = 1

Wichtig wenn man mit CSS arbeiten möchte.

=== Link to Top ===

=== Darstellung von Tabellen ===
Betrifft hauptsächlich das static Template content(default)

=== clear.gif und Absätze loswerden ===
content(default)
# Entfernen der <img src="clear.gif' ...>
content.headerSpace = 0|0
content.space = 0|0

=== externe Links ===
_self oder _blank, aussehen...
styles.content.links.extTarget (bei css_styled_content)

=== Links und Sitemap ===
Die Links einer eingebundenen Sitemap sind standardmäßig auf den Wert 'page' eingestellt (Typo 3.8). Das macht nur bei Framesets Sinn.

Die relevanten Setup-Werte die man ändern muß (je nach ausgewählter Sitemap):
tt_content.menu.20.1.1.target = _self
tt_content.menu.20.2. [...]

=== Listenpunkte und Aufzählungen ===

=== Layoutauswahl ===
siehe [[Typo3 - Rahmen (Frames)]] für Rahmen

und [[Typo3 - Backend anpassen]] für Header (Überschriften)

=== Inline CSS loswerden ===
Bei vielen Extensions und bei CSS Styled ImgText liegt das CSS Inline. Besser wäre ist es das CSS komplett in eigene Dateien auszulagern.

# Inline Styles auslagern
config.inlineStyle2TempFile = true

=== JavaScript in externe Datei auslagern ===
Z.B. der kleine JavaScript Schnipsel für das Blur im IE auslagern.
Wie bindet man externes JavaScript ein...

siehe unter
[[Typo3 - HTML Code optimieren]]

=== Ausgabe einer Spalte Wrappen ===
'''Beispiel:'''
<pre>
#Inhalt rechts
subparts.CONTENT_RIGHT < styles.content.getRight
#Ganze Spalte Wrappen
subparts.CONTENT_RIGHT.wrap = <div class="content_right"> | </div>
#Einzelnes Element Wrappen
subparts.CONTENT_RIGHT.renderObj.stdWrap.wrap=<div class="bordered">|</div>
</pre>
=== Ausgabe einer Spalte Wrappen wenn nicht leer ===
Hier wird das content element nur mit einem div gewrapt wenn es nicht leer ist
<pre>
temp.rightContent < styles.content.getRight
temp.rightContent.stdWrap {
wrap = <div id="right-main"> | </div>
if.isTrue.numRows < styles.content.getRight
}
</pre>
(TypoWizard.com 9.1.2006)

===p style="margin:0 0 0 0;" aus dem p-Tag rausnehmen===

tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes.P.style=

== Backend anpassen ==
=== Content element wizard ändern ===
aus http://krungkuene.org/krung/wiki/Typo3.html 18.5.2006

Dafür erweitere die php-Klasse SC_db_new_content_el und speichere diese datei unter typo3conf/ux_SC_db_new_content_el.php

<code>
<?php
class ux_SC_db_new_content_el extends SC_db_new_content_el {

// Modify the Wizard Array, which holds the values shown at create new
//record page:
function wizardArray() {
global $LANG,$TBE_MODULES_EXT;

$wizardItems = array(
"common" => array("header"=>"Typical page content"),

'common_1' => array(
"icon"=>'../typo3conf/hos/intext_left_wi.gif',
'title'=>'Text with Image to the left',
'description'=>'A regular text element which contains a image positioned left to the text',
'params'=>'&defVals[tt_content][CType]=textpic&defVals[tt_content][imageorient]=26&defVals[tt_content][imagewidth]=80',
),

"common_2" => array(
"icon"=>'../typo3conf/hos/fdfx_2cols.gif',
"title"=>'Two Column Text',
"description"=>'A Text with two Column',
'params'=>'&defVals[tt_content][CType]=fdfx_2cols_pi1'
),

'common_3' => array(
"icon"=>'../typo3conf/hos/intext_right_wi.gif',
'title'=>'Text with big Image to the right',
'description'=>'A regular text element which contains a image positioned right to the text',
'params'=>'&defVals[tt_content][CType]=textpic&defVals[tt_content][imageorient]=25&defVals[tt_content][imagewidth]=480',
'tt_content_defValues' => array(
'CType' => 'textpic',
'imageorient' => 25,
'imagewidth' => 480,
)
),

);

return $wizardItems;
}
}
?>
</code>

Um das ganze auch zu verwenden, mache diesen Eintrag in typo3conf/localconf.php

$TYPO3_CONF_VARS["BE"]["XCLASS"]["ext/cms/layout/db_new_content_el.php"] = PATH_typo3conf."class.ux_db_new_content_el.php";

=== Login Bild im Backend anpassen ===

Quelle: http://www.allanime.org/?id=143

'''Introduction'''

The TYPO3 backend login displays a nice image left of the actual username/password login box. Currently an image of a pair of gloves is used. If you happen to install the CVS version of TYPO3 the image will differ from what you're used to see. I remember a yellow flower in older versions (3.6) of TYPO3 an image that is still present in /typo3/gfx/ named loginbox_image_360.jpg. What's happening there?

TYPO3 has a very cute feature which changes the login box image on certain circumstances. The code is actually in /typo3/index.php. Browsing this code I found another great feature: TYPO3 is also able to „rotate“ images given in a certain directory! All you have to do is, point TYPO3 to this directory. TYPO3 will load all image files in this directory and display a random image.

The way to show TYPO3 this directory is by setting the variable $TBE_STYLES['loginBoxImage_rotationFolder'] = path_to_dir/

Unfortunately there is no way to to so without some programming. The TYPO3 init script explicitly deletes the whole array before initializing the backend. The only way to set variables is by creating an extension.

This super-short Mini-howto will tell you how to set up this wonderful feature in 5 easy steps. I will assume you have access to your webserver by FTP and can create directories and upload files by FTP.

'''This is a short overview how it works:'''
# Set up a folder with images
# Create an extension
# Add 1 line to this extension and point TYPO3 to your image directory
# Install extension

'''Setting Up the Image Folder'''

First you have to prepare the images. One image is fine but of course the more the better. The original images are 200x133 pixel in size, I suggest you create some cute images of the same size but it's not necessary. Allowed are png, jpg and gif images.

Log on to your website using your favorite FTP tool. You can also set up a TYPO3 filemount to do the same.

Go to the directory typo3conf/

Create a new empty directory 'logonimages'. (Without quotes)

Copy the prepared images to this folder.

Create the Extension

Click images to enlarge. Image count from top to bottom.

„What? I never created an extension! I can never do this!“ - if that's what you say you're wrong. You can follow detailed instructions – and all we have to write is one single line of code – which you can as well copy from this document if you used the directory from the last step.

Log on to the TYPO3 backend as administrator. Ignore the ugly log on image <(^.^)>

In the Tool menu use „Ext Manager.“ Of course you need to have this module installed. Showing you how to install extensions from the TER (TYPO Extension Repository) is not goal of this Mini-HOWTO.

Chose the item „Make new extension“ from the dropdown menu.

In the field "Enter Extension key" you type "user_enhancelogin". Then click on the button "Update."

Click on the plus symbol next to the line saying „General Info.“ Fill the form like shown in image . Don't forget to hit the "Update" button!
[[Bild:ExtensionKickstarter01.jpg]]

In the menu to the left click on the plus symbol next to „Extend existing tables.“ You do not need to type something there. It's just done to create the empty framework for our single line of code.

At the bottom left of the content frame there is a button now saying „View Result.“ Click it. The result will look like that in image [4]. One really, really important note: Before proceeding you need to make sure in the location dropdown "LOCAL" is chosen! If you fail to do so, your extension might show up for all installations and - if installed -might yield in unexpected results.

Now click the "WRITE" button and the raw empty extension is created.

That wasn't too complicated, was it?

Programming

As a result of the last step, a basic framework of extension has been written to the directory /typo3conf/ext/user_enhancelogin/

Now to the programming. Log on to your website using FTP and edit the following file:

typo3conf/user_enhancelogin/ext_tables.php

There are different ways to do this. Most advanced FTP programs have an "edit" button. Please refer to your FTP program's documentation.

Now this is what ext_tables.php should look like. As you can see there is only one line added.

<?php
if (!defined('TYPO3_MODE')) die('Access denied.')
$GLOBALS['TBE_STYLES']['loginBoxImage_rotationFolder'] =
'../typo3conf/logonimages';
?>

Installing the Extension

After saving the extension there should be a success message and a link to install your new extension. Click it.

In the menu to the left please click the link „Clear temp_CACHED.“ In case you ever wondered what this link is for – this it is.

Log out of the TYPO3 backend and test the setup. If you followed the instructions of this manual you should now see your prepared images instead of the glove.

== Suche ==
===Index-Suche – kein eigenes Fenster öffnen===
'''Constants'''
styles.content.searchresult.resultTarget = _self
styles.content.searchresult.target = _self

== Domains anlegen ==
Todo...
== Rootline Navigation ==
Ein Beispiel bei dem zusätzlich Englisch (L=1) berücksichtigt wird.

<pre>
temp.rootline_html= HMENU
temp.rootline_html.special = rootline
temp.rootline_html.special.range = 0|-1
temp.rootline_html.1 = TMENU
temp.rootline_html.1 {
wrap = Sie sind hier: |
# evt. bestimte Seiten ausblenden...
excludeUidList =
# Sprache mit der ID 1 (Englisch)
target = _top
NO {
linkWrap= <span class="pathway">|</span>
# optionSplit: vor erstem item kein delimiter, sonst immer einer
allWrap = | |*| > | |*|
ATagBeforeWrap = 0
}
}

# Wrap für Englisch
[globalVar = GP:L = 1]
temp.rootline_html.1.wrap = You are here: |
[global]
</pre>

== Mehrsprachigkeit ==
So baut man mehrsprachige Seiten in Typo3:

[[Typo3 - Mehrsprachige Seiten]]

[[Typo3 - Mehrsprachige Navigation]]

== Spracheinstellungen ==

== HTML-Template einbinden ==
siehe auch: [[Typo3 - HTML-Templates]]
Beispiel (das page Objekt muß natürlich vorher definiert werden):

Im TS Template Setup:

<pre>
page.10 = TEMPLATE
page.10{
template = FILE
template.file = fileadmin/templates/main.html

### Subparts ansprechen ###
workOnSubpart = DOCUMENT_BODY

# Rootline (Pathway) einfügen ###
subparts.ROOTLINE < temp.rootline_html

# Hauptinhalt
subparts.CONTENT < layoutWrap
subparts.CONTENT.wrap = <div class="content"> | </div>

#Inhalt rechts
subparts.CONTENT_RIGHT < styles.content.getRight
subparts.CONTENT_RIGHT.wrap = <div class="content"> | </div>

# Rand bzw. Header
subparts.HEADER < styles.content.getBorder
subparts.HEADER <div class="header"> | </div>
# subparts.HEADER < temp.flashHeader

### Hauptnavigation ###
subparts.NAVI_LINKS < temp.navi_gLayer

### rechte Navi ###
subparts.NAVI_RECHTS <temp.naviGRight

}
</pre>

== Einstellungen für das Page Objekt ==

== Verschiedene Einstellungen ==
=== statische Seiten Simulieren ===
Statische Seiten simulieren
config.simulateStaticDocuments = PATH_INFO
config.simulateStaticDocuments_addTitle = 30
config.simulateStaticDocuments = 1
config.admPanel = 1
config.simulateStaticDocuments_noTypeIfNoTitle = 1

.htaccess Datei für Apache Server nicht vergessen (muß nur unbenannt werden)

=== Einstellungen für das Admin Panel ===

===Email===

==== Spamschutz für Email Adressen ====
config.spamProtectEmailAddresses = 1
config.spamProtectEmailAddresses_atSubst = (at)

====E-Mail-Absender für automatische E-Mails z.B. über Kontaktformular====
E-Mail-Adresse
plugin.feadmin.dmailsubscription.email = info(at)easy-office4you.de
E-Mail-Name
plugin.feadmin.dmailsubscription.emailName = Barbara Hofbauer

== Typo3 RTE - Einstellungen ==
===RTE Absatz Formatierung einstellen===
lib.parseFunc_RTE {
nonTypoTagStdWrap.encapsLines.nonWrappedTag >
nonTypoTagStdWrap.encapsLines.wrapNonWrappedLines = | </br>
}

===HTML-Area (htmlarea) statt RTE===
Mit der Extension htmlarea kann man den RTE ersetzen. Er bietet einiges mehr an Bearbeitungsfunktionen (wenn man die denn will) aber vor allem läuft er auch auf Mozilla, Firefox, etc. Browsern.

==htmlarea anpassen==
Die Möglichkeiten des htmlarea Editors sind oft zuviel des Guten. Die meisten Anpassungen des RTE funktionieren auch im htmlarea. Beispiele:

Minimale Funktionalität

Im Page Setup:
<pre>
RTE.default {
## Toolbar options applicable to all RTE's
## The TCA configuration may add buttons to the toolbar
showButtons = bold,italic,undo,redo,about
}
</pre>
## front end RTE configuration for the general public (htmlArea RTE only)
RTE.default.FE < RTE.default

== Header Image austauschen ==
[[Typo3 - Header Image austauschen]]