Typo3 - Content Elemente anpassen

2006-01-31T14:01:24Z

84.161.177.57:

[[p style margin:0 entfernen]]

[[Typo3 - grafische Überschriften (Header)]]

[[Typo3 - Layout Vorlagen]]

Typo3 - temporäre Dateien

2006-01-31T13:00:46Z

84.161.177.57: temporäre Dateien und wo sie zu finden sind.

Es gibt verschiedene Ordner in denen Typo3 temporäre Dateien ablegt. Im Folgenden eine kleine Übersicht (ausgehend von den Standard Einstellungen).

'''typo3temp/menu/''' - hier liegen vom Gifbuilder erzeugte Grafiken wenn man grafische Menüs einsetzt.

Typo3

2006-01-31T12:58:17Z

84.161.177.57:

== Tipps und Tricks ==
Ausgangspunkt für viele Problemlösungen finden sich hier:

[[Typo3 - Tipps und Tricks]]
Themen: Mehrsprachigkeit, Navigation, Probleme lösen...

== Typo3 - Referenzen ==
Für Typo3 gibt es einige Nachschlagewerke. Aber wo finde ich was? Im Kapitel [[Typo3 - Referenzen]] gibt es eine Übersicht.

== Typo3 - Einrichten ==
Infos dazu unter:

[[Typo3 - Einrichten]]

== Typo3 - Wartung ==
Updates, temporäre Dateien, Backup, etc.

[[Typo3 - temporäre Dateien]]

== Typo3 - Templates ==
Alles was mit HTML Templates, TS Templates, Static Templates usw. zu tun hat.
Auch Grundsätzliche TypoScript Einstellungen usw.

[[Typo3 - Templates]]

== Typo3 - Extensions entwickeln ==

[[Typo3 - Extensions]]

== Typo3, CSS und Barrierefreiheit ==

[[Typo3 und CSS]]

[[Typo3 barrierefrei]]

== Typo3 ohne SSH Zugang ==
Hier hilft das Tool phpshell von Martin Geisler.Das Tool sollte nach der Verwendung wieder entfernt oder gut gesichert werden.
Nachtrag 19.1.2006 - Das Tool hilft leider nicht bei allen Servern da bestimmte notwendige Rechte z.B. das Entpacken von tar.gz Archiven nicht funktionieren. D.h. die Symlinks die sich per ftp nicht erstellen lassen können auch auf diese Weise nicht erstellt werden.

[http://mgeisler.net/php-shell/ Zur Homepage von phpshell]

== Typo3 - XHTML konforme Seiten ==

[[Typo3 - XHTML konforme Seiten]]

Typo3 - Navigation

2006-01-31T10:53:04Z

84.161.177.57: /* 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]

Ein Beispiel für ein Menü mit grafischen Hauptpunkten und Text-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>

== 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.

Wikizone - Benutzerbeiträge [de]

Typo3 - Content Elemente anpassen

Typo3 - temporäre Dateien

Typo3

Typo3 - Navigation