Wikizone - Benutzerbeiträge [de]

Typo3 - vertikales Menü mit GMENU in Ebene 1

2007-03-20T15:21:45Z

91.32.50.114:

Modifiziert von Stephan Schlegel März 2007
TypoScript

<pre>

### Header-Data ###
# Todo-> auslagern
page.headerData{
90 = COA
90{
50 = TEXT

50.value (
<style type="text/css" media="all">
@import "/fileadmin/templates/multiMenu/multimenu.css";

</style>


<script type="text/javascript" >
function init(){
activateMenu('nav');
/* activateMenu('vertnav');*/
}
</script>

<script src="/fileadmin/templates/multiMenu/multimenu.js"
type="text/javascript">
</script>


)
}
}

marks.MENU = HMENU
marks.MENU {
1=GMENU
1 {
wrap = <ul id="nav">|</ul>
expAll = 1
noBlur = 1

NO = 1
NO {
allWrap = <li>|</li>
transparentBackground = 1

XY = [10.w]+20, 22

5 = IMAGE
5.file = fileadmin/ringergeorg/div/horizontal_GMENU/no.gif

10=TEXT
10 {
text.field=title
offset=10,15
fontColor = #FFFFFF
fontFile=fileadmin/fonts/arialbd.ttf
fontSize=10
}
}
RO <.NO
RO.5.file = fileadmin/ringergeorg/div/horizontal_GMENU/hover.gif

ACT <.RO

IFSUB <.NO
IFSUB.allWrap = <li class="menuparent">|

ACTIFSUB <.RO
ACTIFSUB.allWrap = <li class="menuparent">|

ACTRO <.RO
ACTIFSUBRO <.RO

IFSUBRO <.ACTIFSUBRO
}
2 = TMENU
2 {
wrap = <ul>|</ul></li>
expAll = 1
noBlur = 1

NO = 1
NO.allWrap = <li>|</li>

ACT <.NO
ACT.allWrap = <li class="nav2act> |</li>

IFSUB = 1
IFSUB.allWrap = <li class="menuparent">|

ACTIFSUB = 1
ACTIFSUB.allWrap = <li class="menuparent">|
}
3 <.2
}
</pre>

CSS
<pre>
body {
font: 78%/1.5 arial, helvetica, serif;
padding: 0;
margin: 2em;
}

#nav, #nav ul {
float: left;
width: 86em;
list-style: none;
line-height: 1em;
background-image: url(l1_bg.gif);
color: #FFF;
padding: 0;
}

#nav li li {
background:red;
border-bottom:1px solid #fff;
}

#nav a {
display: block;
xwidth: 7em;
color: #FFF;
text-decoration: none;
padding: 0.2em 0em;
}

#nav a.menuparent {
background: url(pfeil.gif) no-repeat 90% 40%;
}

#nav li {
float: left;
padding: 0;
}

#nav ul li a {
color: #FFF;
font-size:11px;
font-weight:bold;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14em;
font-weight: normal;
margin: 0;
}

#nav li li {
width: 15em;
}

#nav li ul a {
}

#nav li ul ul {
margin: -1.45em 0 0 14em !important;
margin: -1.45em 0 0 14.45em ;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li li:hover, #nav li li.sfhover {
background: #ff4d00;
}

#nav li li {
x background: red;
}

#nav li li a {
padding-left:5px;
}

#nav li ul {
background-image: none;
}
</pre>

JavaScript
<pre>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</pre>

Typo3 - vertikales Menü mit GMENU in Ebene 1

2007-03-20T14:45:05Z

91.32.50.114:

TypoScript
<pre>
marks.MENU = HMENU
marks.MENU {
1=GMENU
1 {
wrap = <ul id="nav">|</ul>
expAll = 1
noBlur = 1

NO = 1
NO {
allWrap = <li>|</li>
transparentBackground = 1

XY = [10.w]+20, 22

5 = IMAGE
5.file = fileadmin/ringergeorg/div/horizontal_GMENU/no.gif

10=TEXT
10 {
text.field=title
offset=10,15
fontColor = #FFFFFF
fontFile=fileadmin/fonts/arialbd.ttf
fontSize=10
}
}
RO <.NO
RO.5.file = fileadmin/ringergeorg/div/horizontal_GMENU/hover.gif

ACT <.RO

IFSUB <.NO
IFSUB.allWrap = <li class="menuparent">|

ACTIFSUB <.RO
ACTIFSUB.allWrap = <li class="menuparent">|

ACTRO <.RO
ACTIFSUBRO <.RO

IFSUBRO <.ACTIFSUBRO
}
2 = TMENU
2 {
wrap = <ul>|</ul></li>
expAll = 1
noBlur = 1

NO = 1
NO.allWrap = <li>|</li>

ACT <.NO
ACT.allWrap = <li class="nav2act> |</li>

IFSUB = 1
IFSUB.allWrap = <li class="menuparent">|

ACTIFSUB = 1
ACTIFSUB.allWrap = <li class="menuparent">|
}
3 <.2
}
</pre>

CSS
<pre>
body {
font: 78%/1.5 arial, helvetica, serif;
padding: 0;
margin: 2em;
}

#nav, #nav ul {
float: left;
width: 86em;
list-style: none;
line-height: 1em;
background-image: url(l1_bg.gif);
color: #FFF;
padding: 0;
}

#nav li li {
background:red;
border-bottom:1px solid #fff;
}

#nav a {
display: block;
xwidth: 7em;
color: #FFF;
text-decoration: none;
padding: 0.2em 0em;
}

#nav a.menuparent {
background: url(pfeil.gif) no-repeat 90% 40%;
}

#nav li {
float: left;
padding: 0;
}

#nav ul li a {
color: #FFF;
font-size:11px;
font-weight:bold;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14em;
font-weight: normal;
margin: 0;
}

#nav li li {
width: 15em;
}

#nav li ul a {
}

#nav li ul ul {
margin: -1.45em 0 0 14em !important;
margin: -1.45em 0 0 14.45em ;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li li:hover, #nav li li.sfhover {
background: #ff4d00;
}

#nav li li {
x background: red;
}

#nav li li a {
padding-left:5px;
}

#nav li ul {
background-image: none;
}
</pre>

JavaScript
<pre>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</pre>

Typo3 - Navigation

2007-03-20T14:43:09Z

91.32.50.114:

In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden. Der Schwerpunkt liegt auf den Konzepten und Erklärungen. Einige vorgefertigte und aktuelle Navigationen finden sich im [[Typo3 - Baukasten]]

== grafisches CSS-Flyout Menü basierend auf Georg Ringer ==
Dieses Menü ist valide gemäß xhtml Trans 1.0 und hat ein GMENU in der 1. Ebene, also ähnlich dem GMENU_LAYER.

[[Typo3 - vertikales Menü mit GMENU in Ebene 1]]

== CSS-Flyout Menü basierend auf Marlies Cohen ==
[[Typo3 - CSS-Flyout Menü]]

== accessible CSS-Flyout Menü basierend auf CSS-Play ==
Todo

== 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ü ===
Achtung - als Doctype muß im IE XHTML-Strict angegeben werden sonst gibt es Abstände in den Menüs

'''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>

=== Einfache Navigation horizontal ===
Das TS ist fast identisch:
<pre>
temp.navi_vBulletList_unten = HMENU
temp.navi_vBulletList_unten {
#stdWrap.case = upper
special = directory
# Seitenid für den Einstieg
special.value = 12
# Seitenbaumebene ab Level2
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul id="navi2">|</ul>
1.NO = 1
1.NO.linkWrap = <li>|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="act">|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|</li>
# evt. jedesmal den kompletten li Tag mit Anfang und Ende notwendig ?
}
</pre>

Und das CSS...
<pre>
/* navigation unten */
#navi2 {
padding-right:8px;
margin: 0px;
list-style: none;
float: right;
line-height:22px;
}

#navi2 li{
list-style: none;
text-decoration: none;
float: left;
}

#navi2 li a:link, #navi2 li a:visited{
color:#E9EAEC;
text-decoration: none;
}

#navi2 li a:hover{
color:#D3D4D8;
}

#navi2 li.act a{
color:#C80202;
}
</pre>
== Mehrsprachige Navigation ==
[[Typo3 - Mehrsprachige Seiten]]

Typo3 - Standardeinstellungen

2007-03-20T11:05:33Z

91.32.50.114: /* HTML - Area */

== Einleitung ==

Hier findest Du Beispiele für immer wiederkehrende TypoScript-Einstellungen. Diese Einstellung lassen sich sinnvollerweise in einem externen Template auslagern, so kann man sie leicht wiederverwenden.
Außerdem finden sich Standards für Seitenbaum, Extensions und die Ordnerstruktur

== Allgemeine Standardeinstellungen ==
In einem externen Basis-Template stellen wir schon mal alle wichtigen Sachen ein:

=== das Template ext_standardSettings.tmpl ===
'''Constants'''
<pre><nowiki>
# interne Links im gleichen Fenster öffnen:

PAGE_TARGET = _top

#Bildunterschriften (für jedes Bild eine oder eine für alle)

styles.content.imgtext.imageTextSplit = 1

#Rahmendicke wenn Rahmen bei Bildern

styles.content.imgtext.borderThick = 1

</nowiki></pre>

'''Setup'''
<pre><nowiki>

config{

# zusätzliche Debug-Info als Kommentare im HTML Code
# sollte nach Fertigstellung der Seite wieder deaktiviert werden.
debug = 1

# Admin-Panel einschalten
admPanel = 1

# Externe Links
extTarget= _blank

# sonstiges
message_page_is_being_generated= Einen Moment bitte. Die Seite wird erstellt

# Kommentare abschalten
disablePrefixComment = 1

### SEO ###
# Achtung .htaccess Datei muss im Webverzeichnis angelegt werden
# Wenn realurl extension - dann simStatDocs = 0

#simulateStaticDocuments = 1
#simulateStaticDocuments_noTypeIfNoTitle = 1
#simulateStaticDocuments_pEnc = true
#simulateStaticDocuments_pEnc = md5
#simulateStaticDocuments_pEnc_onlyP = L

### nur wenn RealURL eingesetzt wird
#baseURL = 0
#tx_realurl_enable = 0

### Spracheinstellungen ###
#Länderspezifische Einstellungen (siehe auch mnultilanguage)
# damit Extensions etc. die richtige Übersetzung wählen
language = de

# HTML-Tag setzten
htmlTag_langKey = de_DE

# Betriebsystem abhängig (hier für Linux) damit php die richtigen
# Bezeichnungen wählt
locale_all = de_DE

headerComment = Homepage by WebMyNet feat. geo-bit - indihar.art

# in neueren Versionen standard (muß nicht mehr gesetzt werden)
# removeDefaultJS = external
# inlineStyle2TempFile = 1

# Fehlermeldung bei IE vermeiden wenn nach dem Senden eines
# Formulars der Back-Button gedrückt wird
sendCacheHeaders = 1
sendCacheHeaders_onlyWhenLoginDeniedInBranch = 1
}

####################################
### Einstellungen für Extensions ###
####################################

### AWSTATS ###

# Logdatei erzeugen für AWSTATS, eigene Zugriffe nicht zählen

#stat_apache = 1
#stat_apache_logfile = logfile.log
#stat_excludeBEuserHits = 1

# Statistiken auch in der Datenbank speichern
# Achtung: Datenbank kann bei Aktivierung sehr groß werden!

# stat_mysql = 1

# Klicks auf externe Links in Tabelle sys_stat speichern

#jumpurl = 1

### INDEX SEARCH ###

# Index-Suche einschalten, auch für externe Dateien (pdf, doc, etc.)
#index_enable = 1
#index_externals = 1

### LOGIN USER TRACK ###
# Zugriffe der Frontend Benutzer protokollieren
#tx_loginusertrack_enable = 1

#######################################
### Rendering der Seite und Inhalte ###
#######################################

config{
### HEADER ###

# DOCtype setzen

doctype = xhtml_trans

# erzeugten XHTML Code bereinigen

xhtml_cleaning = all

# <xml...> tag komplett ausschalten

#xmlprologue = none

### EMAIL ###
# Email-Adresse verschlüsseln, @ durch ' (at) ' ersetzen:

spamProtectEmailAddresses = 1
spamProtectEmailAddresses_atSubst = @

}

# MSIE soll nicht im Quirks-Modus arbeiten
[browser = msie]

# für IE bei xhtml_trans XML Prolog unter die Deklaration
# (Achtung validiert nicht nach W3C aber IE...)

config.doctypeSwitch = 1

[GLOBAL]

content.RTE_compliant = 1

# Metadaten für Beschreibung und Stichwörter einfügen, benötigt Extension "metatags"
page.headerData.999 < plugin.meta

### POPUPS ###

tt_content {
textpic.20{
colSpace = 5
rowSpace = 5
borderThick = 1
1.imageLinkWrap = 1
1.imageLinkWrap {
enable = 1
bodyTag = <body bgColor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
wrap = <a href="javascript:close();"> | </a>
JSwindow = 1
JSwindow.newWindow = 1
JSwindow.expand = 0,0
}
}
image.20 {
colSpace = 5
rowSpace = 5
borderThick = 1
1.imageLinkWrap = 1
1.imageLinkWrap {
enable = 1
bodyTag = <body bgColor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
wrap = <a href="javascript:close();"> | </a>
JSwindow = 1
JSwindow.newWindow = 1
JSwindow.expand = 0,0
}
}
}

### Formulare ###
styles.content.mailform {
fieldWrap = <div class="mailform"> | </div>
labelWrap = <div class="mailformlabel"> | </div>
commentWrap = <div class="mailformcomment"> | </div>
radioWrap = <div class="mailformradio"> | </div>
REQ.labelWrap = <div class="mailformrequired"> | </div>
target = _self
badMess = Bitte f�llen Sie noch folgendes Feld aus:
}

### Suchformular ###
styles.content.mailform.target = _self
styles.content.searchform.target = _self
styles.content.searchresult.target = _self

### Filelinks ###
tt_content.uploads.20.10.split.1.filelink{
stdWrap.wrap = |
file.wrap = <span class="filelink"> | </span>
size.wrap = |
size.innerWrap = |
size.wrap = <span class="filesize"> | </span>
size.bytes.labels = Byte| KB| MB| GB
descriptionWrap = <span class="small"> | </span>
}
tt_content.uploads.20.20.wrap = <span class="small">|</span>

# HTML Tags in Überschriften erlauben
lib.stdheader.10.setCurrent.htmlSpecialChars = 0

# Links in Sitemap nicht in neuem Fenster öffnen
tt_content.menu.20.2.1.noBlur = 1
tt_content.menu.20.2.1.target =
tt_content.menu.20.2.2.noBlur = 1
tt_content.menu.20.2.2.target =
tt_content.menu.20.2.3.noBlur = 1
tt_content.menu.20.2.3.target =
tt_content.menu.20.2.4.noBlur = 1
tt_content.menu.20.2.4.target =

#remove css attributes for p- and pre-tags
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
P.style=
PRE.style=;
}

</nowiki></pre>

== Ordnerstruktur ==
Sinnvoll ist eine Struktur, die es ermöglicht Daten für CSS und HTLML-Templates und Userdaten gut zu trennen. Zu Beginn kann man das z.B. so machen.
-username/
-media/
-images
-pdf
-...
-templates/
-main/
-main.html
-main.css
-images/

== Standardeinstellungen Typo3 Version >= 4 ==
=== Standard Benutzer ===
Es empfiehlt sich die Standard Benutzereinstellungen frühzeitig zu machen und dafür zu sorgen, daß neue Seiten einer allgemein zugänglichen Gruppe zugänglich gemacht werden. Man hat schnell mal vergessen die Zugriffsrechte neu zu setzen, wenn man als Admin Seiten anlegt.

Die Auswahl im Assistenten aktiviert man besser. Stiftet nur Verwirrung.
Als Seitentyp am besten nur Erweitert (nicht Standard) nur hier stehen die Alt und Title-Tags zur Verfügung (und das Mediafeld etc.)

==== Tables (modify) ====
Hinweis: Wenn eine Tabelle zum schreiben (modify) freigegeben ist, kann sie automatisch auch gesehen werden muß also nicht mehr in Tables (listing) aktiviert werden.

* Seite
* Seiteninhalt
* Media

==== Page Types ====
* Erweitert
* Shortcut

==== Allowed excludefields ====
* Seite
** Seite verstecken
** Start
** Stop
** Im Menü verstecken
** Beschreibung
** Stichworte
** Autor
** Wählen Sie eine Inhaltsvorlage (bei Template Selector)
* Seiteninhalt
** Verstecken
** Start
** Stop
** keine Reihen
** Klick vergrößern
** Alt
** Title
** Langbeschreibung URL

==== UserTS ====
<pre>
config.admPanel = 1
options.uploadFieldsInTopOfEB = 1
options.saveDocNew = 1
options.showHistory = 1
options.createFoldersInEB = 1
setup.pane_clip_count = 5
setup.thumbnailsByDefault = 1
setup.saveTreePositions = 1
setup.edit_RTE = 1
setup.copyLevels = 6
setup.allSaveFunctions = 1
setup.noOnChangeAlertInTypoFields = 1
admPanel {
enable.edit = 1
module.edit.forceDisplayFieldIcons = 1
hide = 1
}
</pre>

==== PageTS ====
Im PageTS der root Seite legen wir fest, daß neue Seiten automatisch einer bestimmten Benutzergruppe zugeordnet wird. Außerdem setzen wir einige Rechte für andere Benutzer.

Außerdem schalten wir gleich nicht benötigte Werte für die Formatierung der Rahmen ab und erstellen eigene die wir später mit CSS stylen.
<pre>
TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, new, edit, delete
TCEMAIN.permissions.group = show, editcontent, new, edit, delete
TCEMAIN.permissions.everybody = show, edit

#Überflüssige Rahmeneinträge entfernen
TCEFORM.tt_content.section_frame.removeItems = 10, 11, 12, 20, 21

TCEFORM.tt_content.section_frame.altLabels.1 = Breit
TCEFORM.tt_content.section_frame.altLabels.5 = Schmal links
TCEFORM.tt_content.section_frame.altLabels.6 = Schmal rechts
</pre>
Dann im TS (alte Version)
<pre>
tt_content.stdWrap{
innerWrap.cObject{
1.value >
1.value = <div class="breit">|</div>
5.value >
5.value = <div class="schmal-weiss">|</div>
6.value >
6.value = <div class="schmal-grau">|</div>

}
}
</pre>
Wenn wie in neueren Versionen üblich die styled_content extension verwendet wird ist dieser Schritt nicht nötig. Dann legt Typo automatisch folgende Klassen an:

==== HTML - Area (RTE) ====

<pre>

#*** RTE Classe des Interface (Ausrichtung)
RTE.classes {
align-left {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
value = text-align: left;
}
align-center {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
value = text-align: center;
}
align-right {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
value = text-align: right;
}
}

#
# *** Entfernt das Bild vor den Links
RTE.classesAnchor {
internalLink {
class = internal-link
type = page
image >
}
externalLink {
class = external-link
type = url
image >
}
externalLinkInNewWindow {
class = external-link-new-window
type = url
image >
}
internalLinkInNewWindow {
class = internal-link-new-window
type = page
image >
}
download {
class = download
type = file
image >
}
mail {
class = mail
type = mail
image >
}
}

## RTE Konfiguration
RTE.default {

# Zuweisung der CSS-Datei
contentCSS = rte_formate.css

## Markup options
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, sdfield
removeTagsAndContents = style,script

# Buttons die gezeigt/versteckt werden
showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about
hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste

# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1

# blendet Statusbar in htmlarea aus
showStatusBar = 0

## Add styles Left, center and right alignment of text in paragraphs and cells.
inlineStyle.text-alignment (
p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
)

## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
ignoreMainStyleOverride = 1

proc {
# tags die erlaubt / verboten sind
allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
denyTags = font

# br wird nicht zu p konvertiert
dontConvBRtoParagraph = 1

# tags sind erlaubt außerhalt von p, div
allowTagsOutside = img,hr

# erlaubte attribute in p, div tags
keepPDIVattribs = align,class,style,id

# List all class selectors that are allowed on the way to the database
allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, author
)

# html parser einstellungen
HTMLparser_rte {

# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags

# tags die untersagt sind
removeTags = font

# entfernt html-kommentare
removeComments = 1

# tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
keepNonMatchedTags = 0
}

# Content to database
entryHTMLparser_db = 1
entryHTMLparser_db {

# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags

# CLEAN TAGS
noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center

rmTagIfNoAttrib = span,div,font

# htmlSpecialChars = 1

## align attribute werden erlaubt
tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style,align

div.fixAttrib.align.unset >

hr.allowedAttribs = class

# b und i tags werden ersetzt (em / strong)
b.remap = strong
i.remap = em

## img tags werden erlaubt
img >
}
}

}

# Classes: Ausrichtung
classesParagraph (
align-left, align-center, align-right
)

# Classes: Eigene Stile
classesCharacter = author
classesImage= rte_image

# Classes für Links (These classes should also be in the list of allowedClasses)
classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
classesAnchor.default {
page = internal-link
url = external-link-new-window
file = download
mail = mail
}

# zeigt alle CSS-Klassen die in formate.css vorhanden sind
showTagFreeClasses = 1

# Do not allow insertion of the following tags
hideTags = font

# Tabellen Optionen in der RTE Toolbar
hideTableOperationsInToolbar = 0
keepToggleBordersInToolbar = 1

# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
disableSpacingFieldsetInTableOperations = 1
disableAlignmentFieldsetInTableOperations=1
disableColorFieldsetInTableOperations=1
disableLayoutFieldsetInTableOperations=1
disableBordersFieldsetInTableOperations=0
}

# Use same processing as on entry to database to clean content pasted into the editor
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

# FE RTE configuration (htmlArea RTE only)
RTE.default.FE < RTE.default
RTE.default.FE.userElements >
RTE.default.FE.userLinks >

# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%
</pre>

=== Wichtige Plugins ===

finden sich in [[Typo3 - Extensions]]

===Constants===
# Konfiguration des Plugins metatags
plugin.meta{
description = Kunststoffspritzgussteile jeglicher Art, mechanische Baugruppen sowie montierte Frontblenden
meta.keywords = Kunststoff, Spritzguss, mechanische Baugruppen, Frontblende
meta.robots = follow
meta.language = de
copyright = © United-7
author = Burkhardt GmbH
meta.revisit = 1
}
===setup===

<pre>
### CONFIG ###
config {
### statische URL ###
simulateStaticDocuments = 1
simulateStaticDocuments_noTypeIfNoTitle = 1
# Hash wert für einige Extensions statt Parameter:
simulateStaticDocuments_pEnc=md5
simulateStaticDocuments_pEnc_onlyP = cHash, L, tx_ttNews[backPid], tx_ttnews[tt_news]
}
</pre>

== Steandardeinstellungen Typo3 - vor Version 4 ==
VERALTET - selbst bei alten Typo3s bitte dieses Template überarbeiten (Tabellen etc.)
Vor der Version 4 verhält sich Typo3 etwas anders. Einige Standardeinstellungnen sind ab V4 verändert oder gar nicht mehr vorhanden.

===Beispielkonfiguration Burkhardt-Kunststoffe.de (Ausschnitt)===

'''Constants'''
<pre>
content.wrap{
header = |
header1 = <h1>|</h1>
header2 = <h2>|</h2>
header3 = <h3>|</h3>
header4 = <h4>|</h4>
bodytext = <p class="bodytext"> |</p>
}
# Festlegung des Standard-Headers Normal
content.defaultHeaderType = 1

# Entfernen des clear.gif bzw. der Abstände nach Seitenelementen
content.headerSpace = 0|10
content.space = 0|20

# Festlegung der Formatierung für Tabellen (Layout1=Ueberschrift oben, Layout2=Ueberschrift links, Layout3=Ueberschrift oben und links)
content.tableCellWrap = <b class='tableheader'> | </b>

# Formatierung von Dateilisten
styles.content.uploads.wrap = <p> | </p>

# Maximale Breite von Bildern
styles.content.imgtext.maxWInText = 600

# Nachricht, wenn in einem Formular Pflichtfelder nicht ausgefüllt werden
styles.content.mailform.badMess = Bitte füllen Sie noch folgende(s) Feld(er) aus:

# _top als Standardziel für interne Links, erfodert zusätzliche Eintragung im Setup
PAGE_TARGET =
content.pageFrameObj =

#Bild
styles.content.imgtext{
borderColor = silver
borderThick = 1
linkWrap.newWindow = 1
textMargin = 20
captionSplit = 1
linkSplit = 1
comment_CSL-LinkList =
}
styles.header.gfx1.fontColor = white
styles.content.imgFrames.comment_bottom =

# Konfiguration des Plugins Meta Tags
plugin.meta{
description = Kunststoffspritzgussteile jeglicher Art, mechanische Baugruppen sowie montierte Frontblenden
meta.keywords = Kunststoff, Spritzguss, mechanische Baugruppen, Frontblende
meta.robots = follow
meta.language = de
copyright = © United-7
author = Burkhardt GmbH
meta.revisit = 1
}

# Activates Tip a Friend
plugin.tipafriend{
file.templateFile = fileadmin/vorlagen/Burkhardt/tipafriend_template.tmpl
color1 =
color2 =
color3 =
wrap1 = <p>|</p>
wrap2 =<p>|</p>
htmlMail = 1
PIDtipForm = 48
}

</pre>
'''Setup'''
<pre>
# Ausblenden der Typ-Nummer in der HTML-Adresse
config.simulateStaticDocuments_noTypeIfNoTitle = 1

config {
linkVars = L
simulateStaticDocuments_pEnc = md5
# include the GET parameters from tt_news to the encoded vars (all in one line)
simulateStaticDocuments_pEnc_onlyP (
cHash, L, print, tx_ttnews[backPid], tx_ttnews[tt_news],
tx_ttnews[pS], tx_ttnews[pL], tx_ttnews[arc], tx_ttnews[cat],
tx_ttnews[pointer], tx_ttnews[swords]
)
language = de
}

# Ermöglicht die Konfiguration des Admin-Panels in der TSconfig der Backenduser
config.admPanel = 1
page.config.admPanel = 1

# Einschalten des Spam Schutzes
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)

# Konfigurierung des Plugins Searchbox, wird innerhalb der Seite zugewiesen
# ID der Seite Suchen
plugin.tx_macinasearchbox_pi1.pidSearchpage = 111
plugin.tx_macinasearchbox_pi1.templateFile = fileadmin/vorlagen/Burkhardt/suchbox.html

# Loginbox auf allen Seiten, wird innerhalb der Seite zugewiesen
[usergroup = *]

# Logout
temp.10 = TEXT
temp.10.data = TSFE : id
temp.10.wrap (
<div id="logoutbox">
<form action="index.php?id= | " method="post" style="margin-top:0pt; margin-bottom:0pt">
<input type="hidden" name="logintype" value="logout" />
<input type="submit" name="submit" title="Abmelden" value=" abmelden " style="height:15; width:130; border:solid 1px #666666; background-color:#FFFDDC; font-size:10px;" />
</form>
</div>
)
[else]
# Login, Id 108 ist die Anmeldeseite, Id 57 ist der Sys-Ordner Benutzer
temp.10 = TEXT
temp.10.data = TSFE : id
temp.10.wrap (
<div id="loginbox">
<form action="index.php?id=108" method="post" style="margin-top:0pt; margin-bottom:0pt">
<input name="user" type="text" id="user" title="Benutzername" onfocus="if (this.value==this.defaultValue) this.value=''" value="Name" style="height:15px; width:42px; background-color:#fff; border:solid 1px #666666; font-size:9px;" />
<input name="pass" type="password" id="pass" title="Passwort" onfocus="if (this.value==this.defaultValue) this.value=''" value="Login" style="height:15px; width:42px; background-color:#fff; border:solid 1px #666666; font-size:9px;" />
<input name="image" type="image" title="Anmelden" src="fileadmin/vorlagen/offradio/top.gif" alt="Login" />
<input type="hidden" name="redirect_url" value="index.php?id= | " />
<input type="hidden" name="logintype" value="login" />
<input type="hidden" name="pid" value="37" />
</form>
</div>
)
[global]

# Standardsprache festlegen
config.locale_all = de_DE@euro

#Seitensprache

config.linkVars = L
config.sys_language_uid = 0
config.language = de

[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = en
config.locale_all = en-EN
[global]

# Formatierung von Dateilisten (kein Leerraum vor dem Verweis und 1 Leerzeichen zur Dateigrösse)
# Standardansicht
tt_content.uploads.20.default.split.1.filelink.stdWrap.wrap = <tr> | </tr>
tt_content.uploads.20.default.split.1.filelink.size.innerWrap =  
# Layout 1
tt_content.uploads.20.1.split.1.filelink.stdWrap.wrap = <tr> | </tr>
tt_content.uploads.20.1.split.1.filelink.size.innerWrap =  

# Ändern des Standard-Aufzählungszeichens
tt_content.text.20.parseFunc.tags.typolist.default.split.1.wrap = <div id="bulletlist"> | </div>

# Formatierung von Tabellen
# Standard, kein Text fett
tt_content.table.20.default.split.1.split.1.wrap = <td class="tabelle_1">|</td>
tt_content.table.20.default.split.1.split.2.wrap = <td class="tabelle_2">|</td>
tt_content.table.20.default.split.2.split.1.wrap = <td class="tabelle_1">|</td>
tt_content.table.20.default.split.2.split.2.wrap = <td class="tabelle_2">|</td>

# Layout 1, obere Linie fett
tt_content.table.20.1.split.1.split.1.wrap = <td class="tabelle_1"><b>|</b></td>
tt_content.table.20.1.split.1.split.2.wrap = <td class="tabelle_2"><b>|</b></td>
tt_content.table.20.1.split.2.split.1.wrap = <td class="tabelle_1">|</td>
tt_content.table.20.1.split.2.split.2.wrap = <td class="tabelle_2">|</td>

# Layout 2, linke Spalte fett
tt_content.table.20.2.split.1.split.1.wrap = <td class="tabelle_1"><b>|</b></td>
tt_content.table.20.2.split.1.split.2.wrap = <td class="tabelle_2">|</td>
tt_content.table.20.2.split.2.split.1.wrap = <td class="tabelle_1"><b>|</b></td>
tt_content.table.20.2.split.2.split.2.wrap = <td class="tabelle_2">|</td>

# Layout 3, obere Linie und linke Spalte fett
tt_content.table.20.3.split.1.split.1.wrap = <td class="tabelle_1">|</td>
tt_content.table.20.3.split.1.split.2.wrap = <td class="tabelle_2"><b>|</b></td>
tt_content.table.20.3.split.2.split.1.wrap = <td class="tabelle_1"><b>|</b></td>
tt_content.table.20.3.split.2.split.2.wrap = <td class="tabelle_2">|</td>

# Konfiguration des Kontakt-Formulars
tt_content.mailform.20.target = _top
tt_content.mailform.20 {
labelWrap.wrap = <p>|</p>
REQ.labelWrap.wrap = <p>|</p>
}

# Konfiguration des Plugin Erweiterte Suche
plugin.tx_indexedsearch.show.rules=0
# Ausschalten der CSS-Formatierung im Seitenkopf der HTML-Datei
plugin.tx_indexedsearch._CSS_DEFAULT_STYLE =

# Ausschalten der Auswahlmöglichkeiten des Plugins Erweiterte Suche
# Suchen in: Alle Medien/Interne Seite
plugin.tx_indexedsearch.blind.media=1
# Suche in: Standard/Alle Sprachen
plugin.tx_indexedsearch.blind.lang=1
# Suchen in: Ganze Webseite
plugin.tx_indexedsearch.blind.sections=1
# Sortieren nach: Trefferquote/Vorkommen
plugin.tx_indexedsearch.blind.order=1
# Sortieren nach: Höchste Zuerst
plugin.tx_indexedsearch.blind.desc=1
# Ansicht: Sektionshierarchie/Flache Liste
plugin.tx_indexedsearch.blind.group=1

</pre>