Wikizone - Benutzerbeiträge [de]

Typo3 - Baukasten

2012-04-11T08:37:45Z

79.240.85.1: /* JavaScript im Header */

weitere Infos unter [[Typo3 - Tipps und Tricks]]

== Formulare ==
[[Typo3 - Formulare mit https sicher versenden]]

[[TYPO3 - Checkbox in Standard Mailformular als Pflichtfeld]]

== Auf Daten zugreifen ==
Beispiele gibt es hier:

[[TypoScript - Daten auslesen]]

[[Typo3 - stdWrap]]

Die stdWrap Eigenschaft steht vielen Objekten zur Verfügung. Wenn Sie vorhanden ist ist Sie der Problemlöser für fast alle Probleme :-).

[[Typo3 - TSFE]]

[[Typo3 - Das Media Feld]]

== Standardeinstellungen ==
[[Typo3 - Standardeinstellungen]]

== Quellcode aufräumen - Sourcecode verbessern - valides XHTML ==
Der Core produziert seit 4.0 valides XHTML

weitere Hilfen wenn Extensions nicht valide arbeiten bieten:

Installation von Tidy auf dem SErver (aktivieren im Install-Tool)

HTML Cleaner http://typo3.org/extensions/repository/view/qcom_htmlcleaner/2.4.0/

Das Bordeigene HTML-Cleaning: config.xhtml_cleaning = all

Vorsicht bei den Cleanern wenn JavaScript im Spiel ist weil dieser z.T. zerstört werden kann.

=== Beispiel aus dem Forum zum Quelltext aufräumen ===
<pre>
#Einstellen des DocType auf XHTML Transitional
config.doctype = xhtml_trans
#XHTML Cleaning aktivieren
config.xhtml_cleaning = all
#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external
#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none
#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1

#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >
#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6

#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>

#Content Elemente aufräumen und Kommentare entfernen
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >
</pre>

== Navigation ==
=== Standard Navigation Beispiele ===
==== ak-freizeiten ====

<pre>
temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
special = directory
special.value = 44
#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="navi1_1">|</ul>
2.NO = 1
2.NO.linkWrap = <li class="naviL1_1">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="naviL1_1_act">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="naviL1_1_act">|</li>

}

</pre>

=== GMenu mit Bildern aus den Seiteneigenschaften (Media-Feld) ===
Ein Schnipsel vom 12.3.2009 typo3 blogger
Nicht sehr oft benötigt, aber unter Umständen dennoch hilfreich: ein kleines Copy&Paste Tutorial zur Erstellung eines GMENUs mit Bildern aus dem “media”-Feld der Seiteneigenschaften. Zu beachten gibt es: der GIFBUILDER greift bei diesem Snippet das Bild nicht an, sodass es unverändert im Frontend ausgegeben wird. Dies hatte bei mir den Grund, dass die Website nur aus Bildern besteht und Photoshop nunmal bessere Ergebnisse als ImageMagick bzw. GraphicsMagick liefert - deshalb wollte ich auch nicht, dass er irgendwas an den Bildern verändert oder neu berechnet.
<pre>
temp.menu = HMENU
temp.menu {
1 = GMENU
1 {
wrap = <ul>|</ul>

noBlur = 0
NO = 1
NO {
wrap = <li>|</li>

altImgResource.import = uploads/media/
altImgResource.import.field = media
altImgResource.import.listNum = 0

ATagTitle.field = subtitle // title
}

RO = 1
RO < .NO
RO {
altImgResource.import.listNum = 1
}

ACT < .RO
}
}

lib.menu < temp.menu
</pre>
Welches Bild (falls mehrere vorhanden sind) TYPO3 nun für das Erzeugen des Menüs nimmt bestimmt folgende Zeile:

altImgResource.import.listNum = 0

Zu beachten gibt es dabei: wie in der Datentechnik üblich fängt man bei 0 zu zählen an, 0 ist dabei das erste Bild, 1 das zweite, 2 das dritte, usw.

Ein etwas ausführlicheres:

[[TYPO3 Navigation aus Bildern im Media Feld]]

=== GMENU und wrapItemAndSub Workaround mit TMENU===
Ebenfalls von Typo3Blogger

Freunde von semantisch korrektem HTML die auf ein grafisches, mehrstufiges Menü angewiesen sind, werden wissen wovon ich spreche. Man hat ein tolles GMENU gebastelt, welches wunderbare Grafiken liefert und fragt sich “warum ist mein HTML kaputt?”. Nach ein paar Sekunden googlen findet man die Antwort: GMENU fehlt die Eigenschaft “wrapItemAndSub”, mit welchem sich einfach verschachtelte Menüs realisieren lassen. Es gibt viele Ansätze dies zu umgehen, manche arbeiten mit IFSUB, manche verlassen sich auf Tidy. Vor Kurzem stand ich (wieder einmal) vor dem Problem und wollte es einmal anders lösen.

Dabei bin ich auf folgende Lösung gestoßen:
<pre>
temp.mainMenu = HMENU
temp.mainMenu {
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
doNotShowLink = 1

RO = 1
ATagTitle.field = title

beforeImg = GIFBUILDER
beforeImg {
XY=[20.w]+15,42
backColor = #1092AD

10 = TEXT
10 {
text {
field = title
align = center
}

fontFile = fileadmin/font.ttf
fontSize = 16
fontColor = #FFFFFF

offset = 0,34
}
}

beforeROImg < .beforeImg
beforeROImg.20.fontColor = #FFD20F
beforeImgLink = 1
}

ACT < .NO
ACT {
RO = 0
beforeImg.20.fontColor = #FF0000
wrapItemAndSub = <li class="act">|</li>
}
}

2 < .1
}

lib.mainMenu < temp.mainMenu
</pre>
Das tolle an dieser Lösung ist nicht nur, dass man wrapItemAndSub verwenden kann, nein auch alle anderen Eigenschaften und Zustände des TMENU stehen einem zur Verfügung!

Ich frage mich, warum wrapItemAndSub bis heute noch nicht in TYPO3 implementiert wurde. Vielleicht wäre es mit der aktuellen Veröffentlichung der TYPO3 4.3 Alpha 2 und der Aufforderung die Feature-Wunschliste zu füllen einmal Zeit diesem Punkt etwas Nachdruck zu verleihen. Falls ihr noch andere Lösungsansätze auf Lager oder bessere Ideen habt, bitte informiert uns in den Comments!

=== Klassisches List Menu ===
Dieses Menü kann als Grundbaustein für alle möglichen Menüs verwendet werden. Man kopiert sich das Menü in ein neues Objekt und modifiziert dort die Eigenschaften wie man sie braucht. Als Alternative gibt es noch das [[Menue als CSS formatierte Liste]] in dem ein fixer Startpunkt vorgegeben ist:

==== Accessible ====
benötigt cronaccessiblemenues

<pre>
temp.listMenu = HMENU

# Falls das Menü nicht bei der obersten Ebene anfangen soll
temp.listMenu.entryLevel = 1

# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#temp.listMenu.excludeUidList = 1,2,3

temp.listMenu.1 = TMENU
temp.listMenu.1 {
wrap = <ul>|</ul>
noBlur = 1
IProcFunc = user_cronaccessiblemenus->makeAccessible

//NO.after = xyz
# Access Keys einschalten
IProcFunc.accessKeys = 1

# Hierarchische Nummerierung der Menüpunkte einschalten
IProcFunc.dfn = 1
IProcFunc.accessKeyWrap = <span class="accessKey">|</span>
IProcFunc.appendWrap = <span class="invisible"> (ALT-|)</span>

# Die folgenden Accesskeys nicht verwenden (bereits belegt)

IProcFunc.forbiddenKeys = 0,D,B,A,F,X,m,p

# Einstellungen für nicht-aktive Seiten

NO {
wrapItemAndSub = |*| <li class="NO"> | <span class="invisible">.</span></li>|*|<li class="NO last"> | <span class="invisible">.</span></li>
stdWrap.htmlSpecialChars = 1
# stdWrap.wrap = |abc
ATagTitle.field = abstract // description
}

# Einstellungen für Seiten, die sich in der Rootline befinden

ACT = 1
ACT {
wrapItemAndSub = |*| <li class="ACT"> | <span class="invisible">.</span></li> |*| <li class="ACT last"> | <span class="invisible">.</span></li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = abstract // description
}

# Einstellungen für die aktuelle Seite

CUR = 1
CUR {
wrapItemAndSub = |*| <li class="CUR"> | <span class="invisible">.</span></li> |*| <li class="CUR last"> | <span class="invisible">.</span></li>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 0
}
}

# Gleiche Einstellungen für die nächsten Ebenen

temp.listMenu.2 = TMENU
temp.listMenu.2 < temp.listMenu.1

temp.listMenu.3 = TMENU
temp.listMenu.3 < temp.listMenu.2

temp.listMenu.4 = TMENU
temp.listMenu.4 < temp.listMenu.2

</pre>

==== Classic (not accessible) ====
<pre>
temp.listMenu = HMENU

# Falls das Menü nicht bei der obersten Ebene anfangen soll
temp.listMenu.entryLevel = 1

# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#temp.listMenu.excludeUidList = 1,2,3

temp.listMenu.1 = TMENU
temp.listMenu.1 {
wrap = <ul>|</ul>
noBlur = 1

# Einstellungen für nicht-aktive Seiten

NO {
wrapItemAndSub = |*| <li class="NO"> | </li>|*|<li class="NO last"> | </li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = abstract // description
}

# Einstellungen für Seiten, die sich in der Rootline befinden

ACT = 1
ACT {
wrapItemAndSub = |*| <li class="ACT"> | </li> |*| <li class="ACT last"> | </li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = abstract // description
}

# Einstellungen für die aktuelle Seite

CUR = 1
CUR {
wrapItemAndSub = |*| <li class="CUR"> | </li> |*| <li class="CUR last"> | </li>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 0
}
}

# Gleiche Einstellungen für die nächsten Ebenen

temp.listMenu.2 = TMENU
temp.listMenu.2 < temp.listMenu.1

temp.listMenu.3 = TMENU
temp.listMenu.3 < temp.listMenu.2

temp.listMenu.4 = TMENU
temp.listMenu.4 < temp.listMenu.2

</pre>

=== Multilanguage Menu ===
[[Typo3 - Multilanguage Menu]]
=== Bilder Menü ===
siehe: [[Typo3 - Bildermenü]]
=== Einfaches Menü mit 1 Ebene (CSS) ===
siehe: [[Menue als CSS formatierte Liste]]

=== Menü mit 2 Ebenen als verschachtelte Liste ===
Dieses Menü ist besonders für vertikale Navigationen geeignet

'''Constants'''
<pre>
# Einstieg Level 1
navi-L12-startID = 1
navi-L12-delimiter =   |  
navi-L12-delimiter =
</pre>

'''Setup'''
<pre>
### Top Navigation ###
temp.navi-L12 = HMENU
temp.navi-L12 {
#stdWrap.case = lower
special = directory
# Seitenid für den Einstieg
special.value = {$navi-L12-startID}
# Ebene für den Einstieg (nicht vergessen wg. 2. Level)
entryLevel = 1
1 = TMENU
1{
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO.linkWrap = |*| <li>|{$navi-L12-delimiter}</li> |*| <li>|</li>
ACT = 1
ACT.linkWrap = |*| <li class="on">|{$navi-L12-delimiter}</li> |*| <li class="on">|</li>
ACTIFSUB = 1
#Wenn Unterpunkte dann li aufmachen
ACTIFSUB.linkWrap = <li class="on">|
}
2 = TMENU
2{
noBlur = 1
NO = 1
#Unterpunkt also neue ul und danach li zu (von L1 geöffnet)
wrap = <ul>|</ul></li>
NO.linkWrap = |*| <li>|{$navi-L12-delimiter}</li> |*| <li>|</li>
ACT = 1
ACT.linkWrap = |*| <li class="on">|{$navi-L12-delimiter}</li> |*| <li class="on">|</li>

#ACTIFSUB = 1
#ACTIFSUB.linkWrap = <li class="on">|</li>
}
}
</pre>
=== Menü mit 2 Ebenen als separate Listen ===
Dieses Menü ist besonders für horizontale Navigationen geeignet.

Da die 2. Ebene relativ angegeben wird muß man bei mehreren Navigationsbäumen aufpassen, daß evt. ein Untermenü einer anderen Navigation (anderer Baum) ebenfalls angezeigt wird. Das läßt sich z.B. umgehen in dem man das Navitemplate erst im Unterbaum setzt oder indem man im Hauptbaum eine Bedingung setzt ([PIDinRootline = 123])

Ebene 1 ist im Prinzip eine einfache Liste:
'''Constants'''
<pre>
# Navi nur Level1
#Startpunkt
navi_startID = 1

#Trennzeichen für horizontale Navi:
naviL1-delimiter =   |  
</pre>
'''Setup'''
<pre>
### Top Navigation ###
temp.naviL1 = HMENU
temp.naviL1 {
#stdWrap.case = lower
special = directory
# Seitenid für den Einstieg
special.value = {$navi_startID}
1 = TMENU
1.noBlur = 1
1.wrap = <ul>|</ul>
1.NO = 1
1.NO.linkWrap = |*| <li>|{$naviL1-delimiter}</li> |*| <li>|</li>
1.ACT = 1
1.ACT.linkWrap = |*| <li class="on">|{$naviL1-delimiter}</li> |*| <li class="on">|</li>
#1.ACTIFSUB = 1
#1.ACTIFSUB.linkWrap = <li class="on">|</li>
}

</pre>

Für Ebene 2 wird eine weitere Liste generiert wenn man sich in einem bestimmten Level befindet:
'''Constants'''
<pre>
# Navigation nur ab Level x als ul (Standard entry Level1=2.Level)

#Trennzeichen für horizontale Navi:
naviLx-delimiter =   |  
naviLx-entryLevel = 1
</pre>

'''Setup'''
<pre>
temp.naviLx = HMENU
temp.naviLx {
# Seitenbaumebene ab Level 1 darstellen (2. Ebene)
entryLevel = {$naviLx-entryLevel}
# Level 2
1 = TMENU
1{
noBlur = 1
wrap = <ul>|</ul>
NO = 1
# Für horizontale Navi mit delimiter bei vertikal einfach nichts setzen
NO.linkWrap = |*| <li>|{$naviLx-delimiter}</li> |*| <li>|</li>

ACT = 1
# Für vertikale Navi ohne delimiter...
#ACT.linkWrap = <li class="on">|</li>
# und horizontal mit delimiter
ACT.linkWrap = |*| <li class="on">|{$naviLx-delimiter}</li> |*| <li class="on">|</li>

#ACTIFSUB = 1
#ACTIFSUB.linkWrap = <li class="on">|
}
}
</pre>

=== Menü als CSS formatierte Liste (allgemein) ===
[[Menue als CSS formatierte Liste]]
=== CSS-Flyout Menü ===
[[Typo3 - CSS-Flyout Menü]]

=== Sauberes grafisches Menü ===
[[Typo3 - Grafisches Menü]]

== Extensions ==
=== Autoparser (automaketemplate und Templateswitcher (tx_rlmptmplselector) konfigurieren ===
Der Template - Switcher benötigt automaketemplate (oder man arbeitet direkt mit TS-Templates).
Am besten gleich beide in einem Basis Template konfigurieren:

<pre>
### SET UP TEMPLATE SELECTOR ###
plugin.tx_rlmptmplselector_pi1 {

// Define the paths leading to our HTML template files
templatePathMain = fileadmin/dinos/templates/main/
templatePathSub = fileadmin/dinos/templates/sub/

// Define the filenames used as the default HTML templates
defaultTemplateFileNameMain = main.html
defaultTemplateFileNameSub = sub01.html

// If there is a page having no template selected, use a template
// selected earlier in the rootline. If there is none, use the default
inheritMainTemplates = 1
inheritSubTemplates = 1
}

### Autoparser Konfigurieren (alle IDs als Marker) ###

plugin.tx_automaketemplate_pi1{
# content = FILE
# content.file = fileadmin/templates/main/main.html

content < plugin.tx_rlmptmplselector_pi1
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.all.rmTagSections = title
DIV.all = 1
TD.all = 1
}
relPathPrefix = fileadmin/dinos/templates/main/
}

</pre>

=== News - Modul ===
Hier gibt es fertige Konfigurationen:
[[News (tt_news)]]

=== eCards - sr_sendcard ===
<pre>
# The Fast Way:
# plugin.tx_srsendcard_pi1._CSS_DEFAULT_STYLE = @import url("fileadmin/dinos/templates/css/srsendcard.css");
# But better is this (more flexible lesser Overhead)

plugin.tx_srsendcard_pi1._CSS_DEFAULT_STYLE >

[PIDinRootline = 14]
page.includeCSS.file2 = fileadmin/dinos/templates/srsendcard/srsendcard.css
[global]

plugin.tx_srsendcard_pi1{

templateFile = fileadmin/dinos/templates/srsendcard/srsendcard.tmpl
locale_all = de_DE
oldYear = 2006
# Vorschauseite (wenn gewünscht)
# previewPID = your_page_id
enableHTMLMail = 1
siteEmail = info@start-reutlingen.de
siteName = Erben der Dinos
# musicDir = EXT:sr_sendcard/music
#cardMusicFiles = autumnleaves.mid, OverTheRainbow.mid, Pomp_and_Circumstance.mid
disableMusic = 1
maxCol = 2
imageSmallWidth = 150
imageSmallHeight = 150
imageBigWidth = 300
imageBigHeight = 300
#logo
#logoAlignHor = right
#logoAlignVert = bottom
#useAlternateImageOnPrint
### For use with other pids use this one too
#createPID
#formPID
#previewPID
#useCAPTCHA = 0
#viewPID
#printPID
### Erscheinungsbild ###
cardStamp = fileadmin/dinos/templates/srsendcard/stamp.gif
#date_stdWrap
disableSendDate = 1
cardBgcolors = #FFFFFF,#A00A1C,#FF993F
cardFontcolors = #000000, #FFFFFF,#A00A1C
#disableFontcolors
#disableFontfaces
#disableCardOptions
#graphicMess
#graphicMessWidth
#graphicMessFontFiles
#graphicMessFontSizes
#fontDir
#doNotShowCardCaptions
cardPresentationOrder = manual
salutation = informal
#disableBgcolors = 1
}
</pre>

=== Zufallsbild tx_ccrandomimage ===

'''TypoScript - Setup'''
<pre>
### zufallsbild erzeugen ###
includeLibs.tx_ccrandomimage = EXT:cc_random_image/pi1/class.tx_ccrandomimage_pi1.php

// USER_INT means 'no caching'
temp.randomImage = USER_INT
temp.randomImage{
userFunc = tx_ccrandomimage_pi1->main
path = fileadmin/randomImage/
fileExt = jpg,jpeg,gif,png
#Das Render Objekt ist ein content object array (COA) mit einem Bild
#Vor dem Rendern werden die ###FILE_x### marker mit den Bildern aus path ersetzt
renderObj = COA
renderObj {
10 = IMAGE
10.file = ###FILE_1###
// ... weitere Bilder wenn benötigt
}
}

</pre>

=== hCard - Microformat ===
Das Thema Semantic Web wird inzwischen immer interessanter, darum kam ich auf die Idee - fast allein mit TypoScript - das bekannte hCard-Microformat in TYPO3 zu integrieren.

Was wir dafür brauchen ist eine eigene kleine Extension, diese benötigen wir lediglich für eine einzige Zeile Code, welche in die Datei ext_tables.php kommt:

1.
t3lib_extMgm::addToInsertRecords('fe_users');

Dazu jetzt noch das TypoScript:

1.
temp.hcard = COA
2.
temp.hcard {
3.
wrap =
4.
<div id="hcard" class="vcard">|</div>
5.

6.
10 = IMAGE
7.
10.file {
8.
import = uploads/pics/
9.
import.field = image
10.
width = 40
11.
params = class="photo"
12.
}
13.
20 = TEXT
14.
20.field = name
15.
20.typolink.parameter.field = url
16.
20.typolink.ATagParams = class="url fn"
17.
30 = TEXT
18.
30.field = company
19.
30.wrap =
20.
<div class="org">|</div>
21.

22.
40 = TEXT
23.
40.field = email
24.
40.typolink.parameter.field = email
25.
40.typolink.ATagParams = class="email"
26.
50 = COA
27.
50 {
28.
wrap =
29.
<div class="adr">|</div>
30.

31.
10 = TEXT
32.
10.field = address
33.
10.wrap =
34.
<div class="street-address">|</div>
35.

36.
20 = TEXT
37.
20.field = city
38.
20.wrap = <span class="locality">|</span>
39.
30 = TEXT
40.
30.field = zip
41.
30.wrap = <span class="postal-code">|</span>
42.
40 = TEXT
43.
40.field = country
44.
40.wrap = <span class="country-name">|</span>
45.
}
46.
60 = TEXT
47.
60.field = telephone
48.
60.wrap =
49.
<div class="tel">|</div>
50.

51.
}
52.

53.
// fe_users dem type shortcut hinzufügen
54.
tt_content.shortcut.20.0.tables = fe_users
55.
// für Tabelle fe_users sagen wir jetzt noch wie es gerendert werden soll.
56.
tt_content.shortcut.20.0.conf.fe_users < temp.hcard
57.

Und was hat uns das jetzt gebracht? Ganz einfach:

1. Wir haben das Content Element "Insert Record" um die Tabelle fe_users erweitert.
2. Wir haben mit dem TypoScript aus dem Object "temp.hcard" eine komplette hCard definiert, welche jetzt mit meinem fe_user Datensatz befüllt werden kann.
3. Durch die CSS-Klassen kann man die Visitenkarte nun auch noch schön aussehen lassen.

Sind alle Daten vorhanden, könnte der erzeugte HTML-Code dann so aussehen:

1.

2.
<div id="hcard" class="vcard">
3.
<img style="float:left; margin-right:4px" src="http://typo3weblog.de/frank.png" alt="photo of " class="photo"/>
4.
<a class="url fn" href="http://typo3weblog.de">Frank Nägler</a>
5.
<div class="org">TYPO3Weblog.de</div>
6.

7.
<a class="email" href="mailto:frank.naegler@e-netconsulting.rl">frank.naegler@e-netconsulting.rl</a>
8.
<div class="adr">
9.
<div class="street-address">Sievekingsallee 150b</div>
10.

11.
<span class="locality">Hamburg</span>
12.
<span class="postal-code">22111</span>
13.
<span class="country-name">Deutschland</span>
14.
</div>
15.
<div class="tel">+49 (0)7000 623 45 37</div>
16.
</div>
17.

Cool oder?

Die komplette Extension fn_hcard als T3X Export habe ich hier für Euch zum Download.

Aus Typo3 Adventskalender2008

===Extension: Direct Shortcuts (sms_directshortcuts)===

http://typo3.org/extensions/repository/view/sms_directshortcuts/current/
TYPO3 generiert, wie jeder weiss, bei internen Verweisen immer eine extra Seite, die selbst wiederum einen redirect macht. Dieses vorgehen hat einerseits den Vorteil, dass man Skripte dazwischen schieben kann um z.B. Klicks zu tracken, anderseits den Nachteil, dass eine “falsche” URL im Menü zu finden ist. Dieser Nachteil macht sich bemerkbar wenn man sich mit der Suchmaschinenoptimierung von TYPO3 Seiten beschäftigt.

== Nützliche TS-Templates ==
=== Tabellen im RTE ===
Details: http://dev.datenwolken.de/index.php?id=195
==== Standardklasse contenttable unterdrücken eigene Klassen zulassen ====
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class >
==== P Tag raus ====
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default >
# gar nichts parsen ist doof deshalb vorerst mal Standards:
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc =< lib.parseFunc

Lösung von Steffen Kamper
# Lösung von SK

#wichtig, damit die nicht in p gewrappt werden
#lib.parseFunc_RTE.externalBlocks = ul,ol,table

#nochmaliges parsen von tabellenzellen auschalten, damit inhalte nicht wieder in p gepackt werden
#lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.callRecursive = 0

#nachträgliches ermöglichen von Links in Tabellenzellen
#lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc {
# makelinks = 1
# makelinks.http.keep = scheme,path,query
# makelinks.mailto.keep = path
# tags {
# link = TEXT
# link {
# current = 1
# typolink.parameter.data = parameters : allParams
# }
# }
#}

=== Externes JavaScript einbinden ===
==== JavaScript im Header ====
Beispiel:
<pre>
temp.addHeaderData=COA

[browser = msie]

temp.addHeaderData{
90 = TEXT
90.value (
<script src="fileadmin/templates/scripts/ielt7.js" type="text/javascript"></script>
)
90.wrap = 
#90.stdWrap.char = 10

}

[global]

</pre>
Hier wird für IE kleiner als Version 7 ein JavaScript File eingebunden.

==== JavaScript als Marker ====
Als Temporäres Objekt, kann natürlich auch Javascript in einen Marker eingebunden werden.
==== JavaScript über Record ====
Eine Möglichkeit die das leichte ändern der Skripte zuläßt wäre folgende.
Man legt irgendwo auf einer Seite ein HTML - Element an hinterlegt das Skript und verweist mit TypoScript auf diesen RECORD. Bzw. bindet ihn im Template ein.

ToDo Beispiel

=== xhtml optimierung ===
Einiges davon braucht man in Version 4+ nicht mehr...
<pre>
#######################################################
############ XHTML optimieren
#######################################################

#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external

#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none

#<html lang="de" xml:lang="de"> auf de setzen
config.htmlTag_langKey = de

#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1

#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >

#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = div, p, h1, h2, h3, h4, h5, h6

#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>

#Content Elemente aufräumen und Kommentare entfernen
#tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
#tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >

#Cleargif entfernen
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

#Auch hinter den Headlines
tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

# Sicherstellen, dass nonTypoTagStdWrap nur im Inhalt außerhalb von
#<typolist> und <typohead> arbeitet:
tt_content.text.20.parseFunc.tags.typolist.breakoutTypoTagContent = 1
tt_content.text.20.parseFunc.tags.typohead.breakoutTypoTagContent = 1

# ... und kein <BR> vor dem typohead.
tt_content.text.20.parseFunc.tags.typohead.stdWrap.wrap >
# Einstellen von nonTypoTagStdWrap, dass der Text mit P-Tags umschlossen wird.
tt_content.text.20.parseFunc.nonTypoTagStdWrap >
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines {
encapsTagList = div, p
remapTag.DIV = P
wrapNonWrappedLines = |
innerStdWrap_all.ifEmpty =
innerStdWrap_all.textStyle < tt_content.text.20.textStyle
}

# Schließlich noch Entfernen der alten textstyle-Formatierung des gesamten Haupttextes.
tt_content.text.20.textStyle >

# ... und der <BR>-Tag nach dem Inhalt wird auch nicht mehr gebraucht...
tt_content.text.20.wrap >

# clear.gif entfernen
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

# clear.gif hinter den Überschriften entfernen
tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

#Attribute für p- und pre-tags entfernen
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
P.style=
PRE.style=
}

# Unterdrückt den Umbruch < br >
lib.stdheader.10.stdWrap.wrap = |
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.textpic.20.noStretchAndMarginCells = 1
tt_content.image.20.noStretchAndMarginCells = 1

# Setup Anker-Tags entfernen
tt_content.noANameTagForFirstRecord = 1
</pre>

=== Inhalte von Backend-Feldern ausgeben ===
Hinweise dazu findest du unter:

[[TypoScript - Daten auslesen]]

=== Ein Breadcrumb Menü (Rootline-Menü) ===
Constants
<pre>
<nowiki>
#[begin-level] | [end-level]
# Variante 1: Seite 1 | Seite 2 | Seite 3
rootlineDelimiter =  | 
# Variante 2: Seite 1 > Seite 2 > Seite 3
# delimiter =  > 
</pre>
Setup
<pre>
temp.rootline = HMENU
temp.rootline {
special = rootline

# zeige komplette rootline an
special.range = 2|-1

# Variation: zeige Link auf die übergeordnete Seite
#special.range = -2|-2

# Text vor dem Rootline Menü
wrap = Sie sind hier: |

special.targets.3 = page
1 = TMENU
1.target = _top
1.NO {
ATagBeforeWrap = 0
stdWrap.htmlSpecialChars = 1
linkWrap = |{$rootlineDelimiter}|*||*| |
}
}

[globalVar = GP:L = 1]
temp.rootline.wrap = You are here: |
[GLOBAL]

[globalVar = GP:L = 2]
temp.rootline.wrap = Vous êtes ici: |
[GLOBAL]
</nowiki>
</pre>

=== Ein CSS-Template mit Markern nutzen ===
Ein CSS File wird eingelesen, enthaltene Marker dynamisch ersetzt und die Styles im Headerbereich der Seite als Inline-Styles eingebunden.

'''Constants'''
<pre>
color1 = FFE292
color2 = F68D6F
color3 = FABD9E

backgroundImage = fileadmin/templates/main/images/navBack-grey.gif
</pre>

''' Setup '''
<pre>
# das Objekt zunächst als Bibliothek zur späteren Verwendung
lib.stylesheet.default = TEMPLATE
lib.stylesheet.default {
# template einlesen
template = FILE
template.file=fileadmin/templates/main/colors.css
# Platzhalter ersetzten
marks{
COLOR1 = TEXT
COLOR1.value = {$color1}
COLOR2 = TEXT
COLOR2.value = {$color2}
COLOR3 = TEXT
COLOR3.value = {$color3}

NAVBACK = TEXT
NAVBACK.value = {$backgroundImage}
}
}

# Stylesheet in Header eintragen
page.headerData{
90 = COA
90{
wrap = <style type="text/css"></style>
50 < lib.stylesheet.default
}
}
}

</pre>

=== Bild aus Media-Feld auslesen ===
siehe auch "Das Media Feld"
<pre>
temp.mediaFieldImage=IMAGE
temp.mediaFieldImage.file {
import.data = levelmedia: 2,slide
import = uploads/media/
import.listNum = 0
#width = 270
#height= 300
}
</pre>

=== Bild aus Ressourcen Feld auslesen ===
Hinweis Seiteneigenschaften > Resourcen
<pre>
temp.mein Bild = IMG_RESSOURCE
temp.mein Bild{
file = hintergrund*.jpg
stdWrap.wrap = <div style="background-image: | ; padding: 5px;"> ein Kasten </div>
}
</pre>

Hinweis: Typo3 vergibt beim vervielfältigen automatisch eine Endung. Damit das Bild trotzdem immer gefunden wird, ein Sternchen setzen (Joker)

=== Bild automatisch mit Alt-Tag versehen ===
Dieses TypoScript füllt das Alt-Tag Feld mit Daten aus dem Bildnamen z.B. wird Unser_Urlaubsort.jpg zu Unser Urlaubsort

[[Bild automatisch mit Alt-Tag versehen]]

=== Logo mit Verlinkung auf die Homepage (1.2)===
'''Constants'''
<pre>
# Link für das Logo
# Zahl (Seiten-ID), URL (www.zielseite.de) oder Email-Adresse
logoLink = 1
logoFile = fileadmin/templates/images/logo.gif
</pre>

''' Setup '''
<pre>
# Fügt ein Logo mit Link ein

temp.logo = IMAGE
temp.logo {
#file = /fileadmin/dinos/templates/main/images/logo-rt.gif
file = {$logoFile}
stdWrap.typolink.parameter = {$logoLink}
}
</pre>

=== Copyright mit immer aktuellem Jahr ===
'''TypoScript Setup'''
<pre>
temp.copyright = COA
temp.copyright{
5= TEXT
5.value = © 
10 = TEXT
#HeUte Timestamp einlesen
10.data = date:U
10.data.strftime = %Y
}
</pre>

ein anderes Beispiel:
<pre>
subparts.footer{
10 = TEXT
10.data = date:Y
10.wrap = <p class="footer">© | Ich</p>
}
</pre>

=== Datum der letzten Änderung anzeigen ===
'''Constants'''
lastChangePrefix = Letzte Änderung: 
'''Setup'''
<pre>
temp.lastChange = COA
temp.lastChange.5 = TEXT
temp.lastChange.5.value={$lastChangePrefix}
temp.lastChange.10 = TEXT
temp.lastChange.10.register:SYS_LASTCHANGED
temp.lastChange.10.strftime = %d.%m.%Y
</pre>

==== Variante ====
<pre>
temp.lastChange = TEXT
temp.lastChange {
data = page:lastUpdated
if.isTrue.data = page:lastUpdated
date = d.m.Y
wrap = Letzte Änderung: |
wrap2 = |
data = register : SYS_LASTCHANGED
if >
}
</pre>
=== Seiten IDs im Seitenbaum anzeigen ===
UserTS
<pre>
options {
pageTree.showPageIdWithTitle = 1
}
</pre>

=== Client Daten des Benutzers ausgeben ===

temp.browserinfo = COA_INT
temp.browserinfo {
10 = TEXT
10.data = TSFE:clientInfo|SYSTEM
10.wrap = <p> | <br />

20 = TEXT
20.data = TSFE:clientInfo|BROWSER
20.wrap = | &nbsp;

30 = TEXT
30.data = TSFE:clientInfo|VERSION
30.wrap = | </p>
}

== Die Ausgabe von Inhalten verändern ==
=== Ein Inhaltselement an einen Marker schicken ===
Man kann im HTML-Template einen Marker oder Subpart definieren und diesen mit einem beliebigen Inhaltselement befüllen, daß dann auf allen Seiten angezeigt wird.

<pre>
temp.teaser = RECORDS

temp.teaser{
// ID des Datensatzes
source = 17477
tables = tt_content
#conf.tt_content < tt_content // Standard muß nicht angegeben werden
wrap = <div id="gifbanner">|</div>
}

page.10.subparts.TEASER < temp.teaser
</pre>

=== Layout-Rahmen verändern===
[[Typo3 - Rahmen (Frames)]]

=== Rendering von Inhalten ===
[[TYPO3 - Automatischer Rollover Effekt für Bilder mit Image Magick Effekten | Rollovereffekt auf Bilder mit Hilfe der ImageMagick Effekte]]

=== Ausgeben von Informationen im head der Seite ===
Wie kann man Stylesheet angaben, Metatags, Skripte etc. im Header ausgeben
[[Typo3 - Tipps und Tricks]] (page.head Objekt)

=== Unnötige Ausgaben im Quelltext verhindern ===
[[TYPO3 - Unnötige Ausgaben im Quelltext verhindern]]

== TypoScript - Basiswissen ==
[[Links mit TypoSkript anlegen]]

== Suche ==

weitere Infos zu Indexed Search:

[[Typo3 - indexed search]]

== Mit HTML und CObj erzeugtes Login ==
Das Beispiel von Tim Lochmüller aus dem Adventskalender 2008, zeigt wie man mit dem Template Objekte größere HTML - Bausteine verwenden kann.

Login mit TS & cObj TEMPLATE
Georg Ringer in TYPO3, Templates, Tutorial, TypoScript

Nach der interessanten Vorstellung von cli-Scripten durch Frank in Türchen 15 zeigt das folgende Tutorial einen guten Weg, einen Login/Logout-Bereich mit TS & HTML zu verwirklichen, ohne dabei auf irgendeine Extension zurückgreifen zu müssen.

Folgendes HTML ist notwendig und wird beispielsweise in fileadmin/template/login.html abgelegt: http://pastebin.com/f4e963e25
Die beiden Subparts sind jeweils für den Login- & Logout-Bereich zuständig und werden mittels Condition umgeschalten.

Das TS ist sehr einfach aufgebaut

lib.login = TEMPLATE
lib.login {
template = FILE
template.file = fileadmin/template/login.html

workOnSubpart = TPL_LOGIN
marks {
URL = TEXT
URL.data = getIndpEnv:TYPO3_REQUEST_URL

PID = TEXT
PID.value = 10789

REGISTER = TEXT
REGISTER {
value = Mitglied werden
typolink {
parameter = 10786
additionalParams = &tx_srfeuserregister_pi1[cmd]=edit
useCacheHash = 1
ATagParams = class=”link link1″
}
}
PWD = TEXT
PWD {
value = Password vergessen?
typolink {
parameter = 10788
ATagParams = class=”link”
}
}
PROFILE = TEXT
PROFILE {
value = Mein Wanderprofil!
typolink {
parameter = 10790
ATagParams = class=”link”
}
}
}
}

[usergroup = *]
lib.login.workOnSubpart = TPL_LOGOUT

[global]

Die notwendigen Variablen sind:

* URL: Die aktuelle URL, auf die nach dem Login/Logout auch weitergeleitet wird
* PID: Id der Seite, die die Benutzer enthält

Nützlich sind weiters:

* REGISTER: Link zu einer Seite, auf der man sich neu registrieren kann
* PWD/PROFILE: Weitere Links zu Seiten nach Bedarf

Die vorgestellte Variante funktioniert out-of-the-box und muss für andere Algorithmen angepasst werden.

Das Tutorial soll dazu anregen, das TEMPLATE-Objekt öfters als nur 1x zu verwenden, denn gerade wenn es um das Inkludieren von etwas mehr HTML geht, ist dies der beste, schnellste und sauberste Weg.

== Benutzer ==
=== Autor-Feld bei neuen Seiten automatisch anlegen ===
TCAdefaults.pages.author = <Name des Redakteurs>
TCAdefaults.pages.author_email = <EMail-Adresse des Redakteurs>

Das funktioniert aber nur dann wenn eine Seite neu angelegt wird. Will man viele Seiten einem Redakteur zuordnen kann man das über eien MySQL abfrage machen:

UPDATE `pages` SET `author` = '<Name des Redakteurs>', `author_email` =
'<EMail-Adresse des Redakteurs>'
WHERE 1 AND `perms_userid` = <UserId des Redakteurs>

in perms_userid steht die ID des Besitzers der Seite, deshalb kann man diesen mit Hilfe des Whereclause ausfiltern.

=== Author Feld, Email-Feld und News Author automatisch anlegen ===
Als weitere Möglichkeit gibt es die Extension cron_setdefaultauthor die genau diese Aufgaben übernimmt. Sie arbeitet im Prinzip wie oben angeführt.

== Ändern von Extension Meldungen durch den Redakteur ==

Adventskalender 2008 von Tim Lochmüller
Immer wieder erlebe ich es, dass der Kunde Texte selber ändern möchte, klar dafür hat er ja auch von uns TYPO3 bekommen. Leider Zum Glück, möchte der Kunde aber manchmal alles pflegen, also auch Texte die aus LocalLang-Dateien oder Templates kommen.

Eine sehr einfache aber durchaus effektive Lösung dafür ist mal wieder ein wenig TypoScript:

1.
plugin.tx_myplugin_pi1.searchError = RECORDS
2.
plugin.tx_myplugin_pi1.searchError {
3.
tables = tt_content
4.
source = 123
5.
}

Jetzt noch das ContentElement mit der UID 123 im Seitenbaum anlegen und folgenden PHP Code in der Extension verwenden:

1.
$marker['###ERR_SEARCH###'] = $this->cObj->cObjGetSingle(
2.
$this->conf['searchError'],
3.
$this->conf['searchError.']
4.
);

Das war es schon, jetzt enthält der Marker ###ERR_SEARCH### den Content, den der Kunde selbst eingepflegt hat. Natürlich muss man kein RECORD nehmen, sondern kann auch alle anderen TS-Objekte wie TEXT oder IMAGE.

== TYPO3 - CSS ==
CSS Beispiele und Schnipsel für Extensions und Standardelemente gibt es unter:
[[TYPO3 - CSS]]

== Geschützter Login Bereich ==

Früher schön mit der New Login Box. Diese ist ab 4.3 integriert.

=== Weiterleitung nach Login ===

Typo3 - Baukasten

2012-04-11T08:36:01Z

79.240.85.1: /* JavaScript im Header */

weitere Infos unter [[Typo3 - Tipps und Tricks]]

== Formulare ==
[[Typo3 - Formulare mit https sicher versenden]]

[[TYPO3 - Checkbox in Standard Mailformular als Pflichtfeld]]

== Auf Daten zugreifen ==
Beispiele gibt es hier:

[[TypoScript - Daten auslesen]]

[[Typo3 - stdWrap]]

Die stdWrap Eigenschaft steht vielen Objekten zur Verfügung. Wenn Sie vorhanden ist ist Sie der Problemlöser für fast alle Probleme :-).

[[Typo3 - TSFE]]

[[Typo3 - Das Media Feld]]

== Standardeinstellungen ==
[[Typo3 - Standardeinstellungen]]

== Quellcode aufräumen - Sourcecode verbessern - valides XHTML ==
Der Core produziert seit 4.0 valides XHTML

weitere Hilfen wenn Extensions nicht valide arbeiten bieten:

Installation von Tidy auf dem SErver (aktivieren im Install-Tool)

HTML Cleaner http://typo3.org/extensions/repository/view/qcom_htmlcleaner/2.4.0/

Das Bordeigene HTML-Cleaning: config.xhtml_cleaning = all

Vorsicht bei den Cleanern wenn JavaScript im Spiel ist weil dieser z.T. zerstört werden kann.

=== Beispiel aus dem Forum zum Quelltext aufräumen ===
<pre>
#Einstellen des DocType auf XHTML Transitional
config.doctype = xhtml_trans
#XHTML Cleaning aktivieren
config.xhtml_cleaning = all
#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external
#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none
#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1

#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >
#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6

#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>

#Content Elemente aufräumen und Kommentare entfernen
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >
</pre>

== Navigation ==
=== Standard Navigation Beispiele ===
==== ak-freizeiten ====

<pre>
temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
special = directory
special.value = 44
#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="navi1_1">|</ul>
2.NO = 1
2.NO.linkWrap = <li class="naviL1_1">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="naviL1_1_act">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="naviL1_1_act">|</li>

}

</pre>

=== GMenu mit Bildern aus den Seiteneigenschaften (Media-Feld) ===
Ein Schnipsel vom 12.3.2009 typo3 blogger
Nicht sehr oft benötigt, aber unter Umständen dennoch hilfreich: ein kleines Copy&Paste Tutorial zur Erstellung eines GMENUs mit Bildern aus dem “media”-Feld der Seiteneigenschaften. Zu beachten gibt es: der GIFBUILDER greift bei diesem Snippet das Bild nicht an, sodass es unverändert im Frontend ausgegeben wird. Dies hatte bei mir den Grund, dass die Website nur aus Bildern besteht und Photoshop nunmal bessere Ergebnisse als ImageMagick bzw. GraphicsMagick liefert - deshalb wollte ich auch nicht, dass er irgendwas an den Bildern verändert oder neu berechnet.
<pre>
temp.menu = HMENU
temp.menu {
1 = GMENU
1 {
wrap = <ul>|</ul>

noBlur = 0
NO = 1
NO {
wrap = <li>|</li>

altImgResource.import = uploads/media/
altImgResource.import.field = media
altImgResource.import.listNum = 0

ATagTitle.field = subtitle // title
}

RO = 1
RO < .NO
RO {
altImgResource.import.listNum = 1
}

ACT < .RO
}
}

lib.menu < temp.menu
</pre>
Welches Bild (falls mehrere vorhanden sind) TYPO3 nun für das Erzeugen des Menüs nimmt bestimmt folgende Zeile:

altImgResource.import.listNum = 0

Zu beachten gibt es dabei: wie in der Datentechnik üblich fängt man bei 0 zu zählen an, 0 ist dabei das erste Bild, 1 das zweite, 2 das dritte, usw.

Ein etwas ausführlicheres:

[[TYPO3 Navigation aus Bildern im Media Feld]]

=== GMENU und wrapItemAndSub Workaround mit TMENU===
Ebenfalls von Typo3Blogger

Freunde von semantisch korrektem HTML die auf ein grafisches, mehrstufiges Menü angewiesen sind, werden wissen wovon ich spreche. Man hat ein tolles GMENU gebastelt, welches wunderbare Grafiken liefert und fragt sich “warum ist mein HTML kaputt?”. Nach ein paar Sekunden googlen findet man die Antwort: GMENU fehlt die Eigenschaft “wrapItemAndSub”, mit welchem sich einfach verschachtelte Menüs realisieren lassen. Es gibt viele Ansätze dies zu umgehen, manche arbeiten mit IFSUB, manche verlassen sich auf Tidy. Vor Kurzem stand ich (wieder einmal) vor dem Problem und wollte es einmal anders lösen.

Dabei bin ich auf folgende Lösung gestoßen:
<pre>
temp.mainMenu = HMENU
temp.mainMenu {
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
doNotShowLink = 1

RO = 1
ATagTitle.field = title

beforeImg = GIFBUILDER
beforeImg {
XY=[20.w]+15,42
backColor = #1092AD

10 = TEXT
10 {
text {
field = title
align = center
}

fontFile = fileadmin/font.ttf
fontSize = 16
fontColor = #FFFFFF

offset = 0,34
}
}

beforeROImg < .beforeImg
beforeROImg.20.fontColor = #FFD20F
beforeImgLink = 1
}

ACT < .NO
ACT {
RO = 0
beforeImg.20.fontColor = #FF0000
wrapItemAndSub = <li class="act">|</li>
}
}

2 < .1
}

lib.mainMenu < temp.mainMenu
</pre>
Das tolle an dieser Lösung ist nicht nur, dass man wrapItemAndSub verwenden kann, nein auch alle anderen Eigenschaften und Zustände des TMENU stehen einem zur Verfügung!

Ich frage mich, warum wrapItemAndSub bis heute noch nicht in TYPO3 implementiert wurde. Vielleicht wäre es mit der aktuellen Veröffentlichung der TYPO3 4.3 Alpha 2 und der Aufforderung die Feature-Wunschliste zu füllen einmal Zeit diesem Punkt etwas Nachdruck zu verleihen. Falls ihr noch andere Lösungsansätze auf Lager oder bessere Ideen habt, bitte informiert uns in den Comments!

=== Klassisches List Menu ===
Dieses Menü kann als Grundbaustein für alle möglichen Menüs verwendet werden. Man kopiert sich das Menü in ein neues Objekt und modifiziert dort die Eigenschaften wie man sie braucht. Als Alternative gibt es noch das [[Menue als CSS formatierte Liste]] in dem ein fixer Startpunkt vorgegeben ist:

==== Accessible ====
benötigt cronaccessiblemenues

<pre>
temp.listMenu = HMENU

# Falls das Menü nicht bei der obersten Ebene anfangen soll
temp.listMenu.entryLevel = 1

# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#temp.listMenu.excludeUidList = 1,2,3

temp.listMenu.1 = TMENU
temp.listMenu.1 {
wrap = <ul>|</ul>
noBlur = 1
IProcFunc = user_cronaccessiblemenus->makeAccessible

//NO.after = xyz
# Access Keys einschalten
IProcFunc.accessKeys = 1

# Hierarchische Nummerierung der Menüpunkte einschalten
IProcFunc.dfn = 1
IProcFunc.accessKeyWrap = <span class="accessKey">|</span>
IProcFunc.appendWrap = <span class="invisible"> (ALT-|)</span>

# Die folgenden Accesskeys nicht verwenden (bereits belegt)

IProcFunc.forbiddenKeys = 0,D,B,A,F,X,m,p

# Einstellungen für nicht-aktive Seiten

NO {
wrapItemAndSub = |*| <li class="NO"> | <span class="invisible">.</span></li>|*|<li class="NO last"> | <span class="invisible">.</span></li>
stdWrap.htmlSpecialChars = 1
# stdWrap.wrap = |abc
ATagTitle.field = abstract // description
}

# Einstellungen für Seiten, die sich in der Rootline befinden

ACT = 1
ACT {
wrapItemAndSub = |*| <li class="ACT"> | <span class="invisible">.</span></li> |*| <li class="ACT last"> | <span class="invisible">.</span></li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = abstract // description
}

# Einstellungen für die aktuelle Seite

CUR = 1
CUR {
wrapItemAndSub = |*| <li class="CUR"> | <span class="invisible">.</span></li> |*| <li class="CUR last"> | <span class="invisible">.</span></li>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 0
}
}

# Gleiche Einstellungen für die nächsten Ebenen

temp.listMenu.2 = TMENU
temp.listMenu.2 < temp.listMenu.1

temp.listMenu.3 = TMENU
temp.listMenu.3 < temp.listMenu.2

temp.listMenu.4 = TMENU
temp.listMenu.4 < temp.listMenu.2

</pre>

==== Classic (not accessible) ====
<pre>
temp.listMenu = HMENU

# Falls das Menü nicht bei der obersten Ebene anfangen soll
temp.listMenu.entryLevel = 1

# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#temp.listMenu.excludeUidList = 1,2,3

temp.listMenu.1 = TMENU
temp.listMenu.1 {
wrap = <ul>|</ul>
noBlur = 1

# Einstellungen für nicht-aktive Seiten

NO {
wrapItemAndSub = |*| <li class="NO"> | </li>|*|<li class="NO last"> | </li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = abstract // description
}

# Einstellungen für Seiten, die sich in der Rootline befinden

ACT = 1
ACT {
wrapItemAndSub = |*| <li class="ACT"> | </li> |*| <li class="ACT last"> | </li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = abstract // description
}

# Einstellungen für die aktuelle Seite

CUR = 1
CUR {
wrapItemAndSub = |*| <li class="CUR"> | </li> |*| <li class="CUR last"> | </li>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 0
}
}

# Gleiche Einstellungen für die nächsten Ebenen

temp.listMenu.2 = TMENU
temp.listMenu.2 < temp.listMenu.1

temp.listMenu.3 = TMENU
temp.listMenu.3 < temp.listMenu.2

temp.listMenu.4 = TMENU
temp.listMenu.4 < temp.listMenu.2

</pre>

=== Multilanguage Menu ===
[[Typo3 - Multilanguage Menu]]
=== Bilder Menü ===
siehe: [[Typo3 - Bildermenü]]
=== Einfaches Menü mit 1 Ebene (CSS) ===
siehe: [[Menue als CSS formatierte Liste]]

=== Menü mit 2 Ebenen als verschachtelte Liste ===
Dieses Menü ist besonders für vertikale Navigationen geeignet

'''Constants'''
<pre>
# Einstieg Level 1
navi-L12-startID = 1
navi-L12-delimiter =   |  
navi-L12-delimiter =
</pre>

'''Setup'''
<pre>
### Top Navigation ###
temp.navi-L12 = HMENU
temp.navi-L12 {
#stdWrap.case = lower
special = directory
# Seitenid für den Einstieg
special.value = {$navi-L12-startID}
# Ebene für den Einstieg (nicht vergessen wg. 2. Level)
entryLevel = 1
1 = TMENU
1{
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO.linkWrap = |*| <li>|{$navi-L12-delimiter}</li> |*| <li>|</li>
ACT = 1
ACT.linkWrap = |*| <li class="on">|{$navi-L12-delimiter}</li> |*| <li class="on">|</li>
ACTIFSUB = 1
#Wenn Unterpunkte dann li aufmachen
ACTIFSUB.linkWrap = <li class="on">|
}
2 = TMENU
2{
noBlur = 1
NO = 1
#Unterpunkt also neue ul und danach li zu (von L1 geöffnet)
wrap = <ul>|</ul></li>
NO.linkWrap = |*| <li>|{$navi-L12-delimiter}</li> |*| <li>|</li>
ACT = 1
ACT.linkWrap = |*| <li class="on">|{$navi-L12-delimiter}</li> |*| <li class="on">|</li>

#ACTIFSUB = 1
#ACTIFSUB.linkWrap = <li class="on">|</li>
}
}
</pre>
=== Menü mit 2 Ebenen als separate Listen ===
Dieses Menü ist besonders für horizontale Navigationen geeignet.

Da die 2. Ebene relativ angegeben wird muß man bei mehreren Navigationsbäumen aufpassen, daß evt. ein Untermenü einer anderen Navigation (anderer Baum) ebenfalls angezeigt wird. Das läßt sich z.B. umgehen in dem man das Navitemplate erst im Unterbaum setzt oder indem man im Hauptbaum eine Bedingung setzt ([PIDinRootline = 123])

Ebene 1 ist im Prinzip eine einfache Liste:
'''Constants'''
<pre>
# Navi nur Level1
#Startpunkt
navi_startID = 1

#Trennzeichen für horizontale Navi:
naviL1-delimiter =   |  
</pre>
'''Setup'''
<pre>
### Top Navigation ###
temp.naviL1 = HMENU
temp.naviL1 {
#stdWrap.case = lower
special = directory
# Seitenid für den Einstieg
special.value = {$navi_startID}
1 = TMENU
1.noBlur = 1
1.wrap = <ul>|</ul>
1.NO = 1
1.NO.linkWrap = |*| <li>|{$naviL1-delimiter}</li> |*| <li>|</li>
1.ACT = 1
1.ACT.linkWrap = |*| <li class="on">|{$naviL1-delimiter}</li> |*| <li class="on">|</li>
#1.ACTIFSUB = 1
#1.ACTIFSUB.linkWrap = <li class="on">|</li>
}

</pre>

Für Ebene 2 wird eine weitere Liste generiert wenn man sich in einem bestimmten Level befindet:
'''Constants'''
<pre>
# Navigation nur ab Level x als ul (Standard entry Level1=2.Level)

#Trennzeichen für horizontale Navi:
naviLx-delimiter =   |  
naviLx-entryLevel = 1
</pre>

'''Setup'''
<pre>
temp.naviLx = HMENU
temp.naviLx {
# Seitenbaumebene ab Level 1 darstellen (2. Ebene)
entryLevel = {$naviLx-entryLevel}
# Level 2
1 = TMENU
1{
noBlur = 1
wrap = <ul>|</ul>
NO = 1
# Für horizontale Navi mit delimiter bei vertikal einfach nichts setzen
NO.linkWrap = |*| <li>|{$naviLx-delimiter}</li> |*| <li>|</li>

ACT = 1
# Für vertikale Navi ohne delimiter...
#ACT.linkWrap = <li class="on">|</li>
# und horizontal mit delimiter
ACT.linkWrap = |*| <li class="on">|{$naviLx-delimiter}</li> |*| <li class="on">|</li>

#ACTIFSUB = 1
#ACTIFSUB.linkWrap = <li class="on">|
}
}
</pre>

=== Menü als CSS formatierte Liste (allgemein) ===
[[Menue als CSS formatierte Liste]]
=== CSS-Flyout Menü ===
[[Typo3 - CSS-Flyout Menü]]

=== Sauberes grafisches Menü ===
[[Typo3 - Grafisches Menü]]

== Extensions ==
=== Autoparser (automaketemplate und Templateswitcher (tx_rlmptmplselector) konfigurieren ===
Der Template - Switcher benötigt automaketemplate (oder man arbeitet direkt mit TS-Templates).
Am besten gleich beide in einem Basis Template konfigurieren:

<pre>
### SET UP TEMPLATE SELECTOR ###
plugin.tx_rlmptmplselector_pi1 {

// Define the paths leading to our HTML template files
templatePathMain = fileadmin/dinos/templates/main/
templatePathSub = fileadmin/dinos/templates/sub/

// Define the filenames used as the default HTML templates
defaultTemplateFileNameMain = main.html
defaultTemplateFileNameSub = sub01.html

// If there is a page having no template selected, use a template
// selected earlier in the rootline. If there is none, use the default
inheritMainTemplates = 1
inheritSubTemplates = 1
}

### Autoparser Konfigurieren (alle IDs als Marker) ###

plugin.tx_automaketemplate_pi1{
# content = FILE
# content.file = fileadmin/templates/main/main.html

content < plugin.tx_rlmptmplselector_pi1
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.all.rmTagSections = title
DIV.all = 1
TD.all = 1
}
relPathPrefix = fileadmin/dinos/templates/main/
}

</pre>

=== News - Modul ===
Hier gibt es fertige Konfigurationen:
[[News (tt_news)]]

=== eCards - sr_sendcard ===
<pre>
# The Fast Way:
# plugin.tx_srsendcard_pi1._CSS_DEFAULT_STYLE = @import url("fileadmin/dinos/templates/css/srsendcard.css");
# But better is this (more flexible lesser Overhead)

plugin.tx_srsendcard_pi1._CSS_DEFAULT_STYLE >

[PIDinRootline = 14]
page.includeCSS.file2 = fileadmin/dinos/templates/srsendcard/srsendcard.css
[global]

plugin.tx_srsendcard_pi1{

templateFile = fileadmin/dinos/templates/srsendcard/srsendcard.tmpl
locale_all = de_DE
oldYear = 2006
# Vorschauseite (wenn gewünscht)
# previewPID = your_page_id
enableHTMLMail = 1
siteEmail = info@start-reutlingen.de
siteName = Erben der Dinos
# musicDir = EXT:sr_sendcard/music
#cardMusicFiles = autumnleaves.mid, OverTheRainbow.mid, Pomp_and_Circumstance.mid
disableMusic = 1
maxCol = 2
imageSmallWidth = 150
imageSmallHeight = 150
imageBigWidth = 300
imageBigHeight = 300
#logo
#logoAlignHor = right
#logoAlignVert = bottom
#useAlternateImageOnPrint
### For use with other pids use this one too
#createPID
#formPID
#previewPID
#useCAPTCHA = 0
#viewPID
#printPID
### Erscheinungsbild ###
cardStamp = fileadmin/dinos/templates/srsendcard/stamp.gif
#date_stdWrap
disableSendDate = 1
cardBgcolors = #FFFFFF,#A00A1C,#FF993F
cardFontcolors = #000000, #FFFFFF,#A00A1C
#disableFontcolors
#disableFontfaces
#disableCardOptions
#graphicMess
#graphicMessWidth
#graphicMessFontFiles
#graphicMessFontSizes
#fontDir
#doNotShowCardCaptions
cardPresentationOrder = manual
salutation = informal
#disableBgcolors = 1
}
</pre>

=== Zufallsbild tx_ccrandomimage ===

'''TypoScript - Setup'''
<pre>
### zufallsbild erzeugen ###
includeLibs.tx_ccrandomimage = EXT:cc_random_image/pi1/class.tx_ccrandomimage_pi1.php

// USER_INT means 'no caching'
temp.randomImage = USER_INT
temp.randomImage{
userFunc = tx_ccrandomimage_pi1->main
path = fileadmin/randomImage/
fileExt = jpg,jpeg,gif,png
#Das Render Objekt ist ein content object array (COA) mit einem Bild
#Vor dem Rendern werden die ###FILE_x### marker mit den Bildern aus path ersetzt
renderObj = COA
renderObj {
10 = IMAGE
10.file = ###FILE_1###
// ... weitere Bilder wenn benötigt
}
}

</pre>

=== hCard - Microformat ===
Das Thema Semantic Web wird inzwischen immer interessanter, darum kam ich auf die Idee - fast allein mit TypoScript - das bekannte hCard-Microformat in TYPO3 zu integrieren.

Was wir dafür brauchen ist eine eigene kleine Extension, diese benötigen wir lediglich für eine einzige Zeile Code, welche in die Datei ext_tables.php kommt:

1.
t3lib_extMgm::addToInsertRecords('fe_users');

Dazu jetzt noch das TypoScript:

1.
temp.hcard = COA
2.
temp.hcard {
3.
wrap =
4.
<div id="hcard" class="vcard">|</div>
5.

6.
10 = IMAGE
7.
10.file {
8.
import = uploads/pics/
9.
import.field = image
10.
width = 40
11.
params = class="photo"
12.
}
13.
20 = TEXT
14.
20.field = name
15.
20.typolink.parameter.field = url
16.
20.typolink.ATagParams = class="url fn"
17.
30 = TEXT
18.
30.field = company
19.
30.wrap =
20.
<div class="org">|</div>
21.

22.
40 = TEXT
23.
40.field = email
24.
40.typolink.parameter.field = email
25.
40.typolink.ATagParams = class="email"
26.
50 = COA
27.
50 {
28.
wrap =
29.
<div class="adr">|</div>
30.

31.
10 = TEXT
32.
10.field = address
33.
10.wrap =
34.
<div class="street-address">|</div>
35.

36.
20 = TEXT
37.
20.field = city
38.
20.wrap = <span class="locality">|</span>
39.
30 = TEXT
40.
30.field = zip
41.
30.wrap = <span class="postal-code">|</span>
42.
40 = TEXT
43.
40.field = country
44.
40.wrap = <span class="country-name">|</span>
45.
}
46.
60 = TEXT
47.
60.field = telephone
48.
60.wrap =
49.
<div class="tel">|</div>
50.

51.
}
52.

53.
// fe_users dem type shortcut hinzufügen
54.
tt_content.shortcut.20.0.tables = fe_users
55.
// für Tabelle fe_users sagen wir jetzt noch wie es gerendert werden soll.
56.
tt_content.shortcut.20.0.conf.fe_users < temp.hcard
57.

Und was hat uns das jetzt gebracht? Ganz einfach:

1. Wir haben das Content Element "Insert Record" um die Tabelle fe_users erweitert.
2. Wir haben mit dem TypoScript aus dem Object "temp.hcard" eine komplette hCard definiert, welche jetzt mit meinem fe_user Datensatz befüllt werden kann.
3. Durch die CSS-Klassen kann man die Visitenkarte nun auch noch schön aussehen lassen.

Sind alle Daten vorhanden, könnte der erzeugte HTML-Code dann so aussehen:

1.

2.
<div id="hcard" class="vcard">
3.
<img style="float:left; margin-right:4px" src="http://typo3weblog.de/frank.png" alt="photo of " class="photo"/>
4.
<a class="url fn" href="http://typo3weblog.de">Frank Nägler</a>
5.
<div class="org">TYPO3Weblog.de</div>
6.

7.
<a class="email" href="mailto:frank.naegler@e-netconsulting.rl">frank.naegler@e-netconsulting.rl</a>
8.
<div class="adr">
9.
<div class="street-address">Sievekingsallee 150b</div>
10.

11.
<span class="locality">Hamburg</span>
12.
<span class="postal-code">22111</span>
13.
<span class="country-name">Deutschland</span>
14.
</div>
15.
<div class="tel">+49 (0)7000 623 45 37</div>
16.
</div>
17.

Cool oder?

Die komplette Extension fn_hcard als T3X Export habe ich hier für Euch zum Download.

Aus Typo3 Adventskalender2008

===Extension: Direct Shortcuts (sms_directshortcuts)===

http://typo3.org/extensions/repository/view/sms_directshortcuts/current/
TYPO3 generiert, wie jeder weiss, bei internen Verweisen immer eine extra Seite, die selbst wiederum einen redirect macht. Dieses vorgehen hat einerseits den Vorteil, dass man Skripte dazwischen schieben kann um z.B. Klicks zu tracken, anderseits den Nachteil, dass eine “falsche” URL im Menü zu finden ist. Dieser Nachteil macht sich bemerkbar wenn man sich mit der Suchmaschinenoptimierung von TYPO3 Seiten beschäftigt.

== Nützliche TS-Templates ==
=== Tabellen im RTE ===
Details: http://dev.datenwolken.de/index.php?id=195
==== Standardklasse contenttable unterdrücken eigene Klassen zulassen ====
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class >
==== P Tag raus ====
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default >
# gar nichts parsen ist doof deshalb vorerst mal Standards:
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc =< lib.parseFunc

Lösung von Steffen Kamper
# Lösung von SK

#wichtig, damit die nicht in p gewrappt werden
#lib.parseFunc_RTE.externalBlocks = ul,ol,table

#nochmaliges parsen von tabellenzellen auschalten, damit inhalte nicht wieder in p gepackt werden
#lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.callRecursive = 0

#nachträgliches ermöglichen von Links in Tabellenzellen
#lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc {
# makelinks = 1
# makelinks.http.keep = scheme,path,query
# makelinks.mailto.keep = path
# tags {
# link = TEXT
# link {
# current = 1
# typolink.parameter.data = parameters : allParams
# }
# }
#}

=== Externes JavaScript einbinden ===
==== JavaScript im Header ====
Beispiel:
<pre>
temp.addHeaderData=COA
[browser = msie]
temp.addHeaderData{
90 = TEXT
90.value (
<script src="fileadmin/templates/scripts/ielt7.js" type="text/javascript"></script>
)
90.wrap = 
#90.stdWrap.char = 10

}
[global]
</pre>
Hier wird für IE kleiner als Version 7 ein JavaScript File eingebunden.

==== JavaScript als Marker ====
Als Temporäres Objekt, kann natürlich auch Javascript in einen Marker eingebunden werden.
==== JavaScript über Record ====
Eine Möglichkeit die das leichte ändern der Skripte zuläßt wäre folgende.
Man legt irgendwo auf einer Seite ein HTML - Element an hinterlegt das Skript und verweist mit TypoScript auf diesen RECORD. Bzw. bindet ihn im Template ein.

ToDo Beispiel

=== xhtml optimierung ===
Einiges davon braucht man in Version 4+ nicht mehr...
<pre>
#######################################################
############ XHTML optimieren
#######################################################

#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external

#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none

#<html lang="de" xml:lang="de"> auf de setzen
config.htmlTag_langKey = de

#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1

#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >

#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = div, p, h1, h2, h3, h4, h5, h6

#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>

#Content Elemente aufräumen und Kommentare entfernen
#tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
#tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >

#Cleargif entfernen
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

#Auch hinter den Headlines
tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

# Sicherstellen, dass nonTypoTagStdWrap nur im Inhalt außerhalb von
#<typolist> und <typohead> arbeitet:
tt_content.text.20.parseFunc.tags.typolist.breakoutTypoTagContent = 1
tt_content.text.20.parseFunc.tags.typohead.breakoutTypoTagContent = 1

# ... und kein <BR> vor dem typohead.
tt_content.text.20.parseFunc.tags.typohead.stdWrap.wrap >
# Einstellen von nonTypoTagStdWrap, dass der Text mit P-Tags umschlossen wird.
tt_content.text.20.parseFunc.nonTypoTagStdWrap >
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines {
encapsTagList = div, p
remapTag.DIV = P
wrapNonWrappedLines = |
innerStdWrap_all.ifEmpty =
innerStdWrap_all.textStyle < tt_content.text.20.textStyle
}

# Schließlich noch Entfernen der alten textstyle-Formatierung des gesamten Haupttextes.
tt_content.text.20.textStyle >

# ... und der <BR>-Tag nach dem Inhalt wird auch nicht mehr gebraucht...
tt_content.text.20.wrap >

# clear.gif entfernen
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

# clear.gif hinter den Überschriften entfernen
tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

#Attribute für p- und pre-tags entfernen
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
P.style=
PRE.style=
}

# Unterdrückt den Umbruch < br >
lib.stdheader.10.stdWrap.wrap = |
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.textpic.20.noStretchAndMarginCells = 1
tt_content.image.20.noStretchAndMarginCells = 1

# Setup Anker-Tags entfernen
tt_content.noANameTagForFirstRecord = 1
</pre>

=== Inhalte von Backend-Feldern ausgeben ===
Hinweise dazu findest du unter:

[[TypoScript - Daten auslesen]]

=== Ein Breadcrumb Menü (Rootline-Menü) ===
Constants
<pre>
<nowiki>
#[begin-level] | [end-level]
# Variante 1: Seite 1 | Seite 2 | Seite 3
rootlineDelimiter =  | 
# Variante 2: Seite 1 > Seite 2 > Seite 3
# delimiter =  > 
</pre>
Setup
<pre>
temp.rootline = HMENU
temp.rootline {
special = rootline

# zeige komplette rootline an
special.range = 2|-1

# Variation: zeige Link auf die übergeordnete Seite
#special.range = -2|-2

# Text vor dem Rootline Menü
wrap = Sie sind hier: |

special.targets.3 = page
1 = TMENU
1.target = _top
1.NO {
ATagBeforeWrap = 0
stdWrap.htmlSpecialChars = 1
linkWrap = |{$rootlineDelimiter}|*||*| |
}
}

[globalVar = GP:L = 1]
temp.rootline.wrap = You are here: |
[GLOBAL]

[globalVar = GP:L = 2]
temp.rootline.wrap = Vous êtes ici: |
[GLOBAL]
</nowiki>
</pre>

=== Ein CSS-Template mit Markern nutzen ===
Ein CSS File wird eingelesen, enthaltene Marker dynamisch ersetzt und die Styles im Headerbereich der Seite als Inline-Styles eingebunden.

'''Constants'''
<pre>
color1 = FFE292
color2 = F68D6F
color3 = FABD9E

backgroundImage = fileadmin/templates/main/images/navBack-grey.gif
</pre>

''' Setup '''
<pre>
# das Objekt zunächst als Bibliothek zur späteren Verwendung
lib.stylesheet.default = TEMPLATE
lib.stylesheet.default {
# template einlesen
template = FILE
template.file=fileadmin/templates/main/colors.css
# Platzhalter ersetzten
marks{
COLOR1 = TEXT
COLOR1.value = {$color1}
COLOR2 = TEXT
COLOR2.value = {$color2}
COLOR3 = TEXT
COLOR3.value = {$color3}

NAVBACK = TEXT
NAVBACK.value = {$backgroundImage}
}
}

# Stylesheet in Header eintragen
page.headerData{
90 = COA
90{
wrap = <style type="text/css"></style>
50 < lib.stylesheet.default
}
}
}

</pre>

=== Bild aus Media-Feld auslesen ===
siehe auch "Das Media Feld"
<pre>
temp.mediaFieldImage=IMAGE
temp.mediaFieldImage.file {
import.data = levelmedia: 2,slide
import = uploads/media/
import.listNum = 0
#width = 270
#height= 300
}
</pre>

=== Bild aus Ressourcen Feld auslesen ===
Hinweis Seiteneigenschaften > Resourcen
<pre>
temp.mein Bild = IMG_RESSOURCE
temp.mein Bild{
file = hintergrund*.jpg
stdWrap.wrap = <div style="background-image: | ; padding: 5px;"> ein Kasten </div>
}
</pre>

Hinweis: Typo3 vergibt beim vervielfältigen automatisch eine Endung. Damit das Bild trotzdem immer gefunden wird, ein Sternchen setzen (Joker)

=== Bild automatisch mit Alt-Tag versehen ===
Dieses TypoScript füllt das Alt-Tag Feld mit Daten aus dem Bildnamen z.B. wird Unser_Urlaubsort.jpg zu Unser Urlaubsort

[[Bild automatisch mit Alt-Tag versehen]]

=== Logo mit Verlinkung auf die Homepage (1.2)===
'''Constants'''
<pre>
# Link für das Logo
# Zahl (Seiten-ID), URL (www.zielseite.de) oder Email-Adresse
logoLink = 1
logoFile = fileadmin/templates/images/logo.gif
</pre>

''' Setup '''
<pre>
# Fügt ein Logo mit Link ein

temp.logo = IMAGE
temp.logo {
#file = /fileadmin/dinos/templates/main/images/logo-rt.gif
file = {$logoFile}
stdWrap.typolink.parameter = {$logoLink}
}
</pre>

=== Copyright mit immer aktuellem Jahr ===
'''TypoScript Setup'''
<pre>
temp.copyright = COA
temp.copyright{
5= TEXT
5.value = © 
10 = TEXT
#HeUte Timestamp einlesen
10.data = date:U
10.data.strftime = %Y
}
</pre>

ein anderes Beispiel:
<pre>
subparts.footer{
10 = TEXT
10.data = date:Y
10.wrap = <p class="footer">© | Ich</p>
}
</pre>

=== Datum der letzten Änderung anzeigen ===
'''Constants'''
lastChangePrefix = Letzte Änderung: 
'''Setup'''
<pre>
temp.lastChange = COA
temp.lastChange.5 = TEXT
temp.lastChange.5.value={$lastChangePrefix}
temp.lastChange.10 = TEXT
temp.lastChange.10.register:SYS_LASTCHANGED
temp.lastChange.10.strftime = %d.%m.%Y
</pre>

==== Variante ====
<pre>
temp.lastChange = TEXT
temp.lastChange {
data = page:lastUpdated
if.isTrue.data = page:lastUpdated
date = d.m.Y
wrap = Letzte Änderung: |
wrap2 = |
data = register : SYS_LASTCHANGED
if >
}
</pre>
=== Seiten IDs im Seitenbaum anzeigen ===
UserTS
<pre>
options {
pageTree.showPageIdWithTitle = 1
}
</pre>

=== Client Daten des Benutzers ausgeben ===

temp.browserinfo = COA_INT
temp.browserinfo {
10 = TEXT
10.data = TSFE:clientInfo|SYSTEM
10.wrap = <p> | <br />

20 = TEXT
20.data = TSFE:clientInfo|BROWSER
20.wrap = | &nbsp;

30 = TEXT
30.data = TSFE:clientInfo|VERSION
30.wrap = | </p>
}

== Die Ausgabe von Inhalten verändern ==
=== Ein Inhaltselement an einen Marker schicken ===
Man kann im HTML-Template einen Marker oder Subpart definieren und diesen mit einem beliebigen Inhaltselement befüllen, daß dann auf allen Seiten angezeigt wird.

<pre>
temp.teaser = RECORDS

temp.teaser{
// ID des Datensatzes
source = 17477
tables = tt_content
#conf.tt_content < tt_content // Standard muß nicht angegeben werden
wrap = <div id="gifbanner">|</div>
}

page.10.subparts.TEASER < temp.teaser
</pre>

=== Layout-Rahmen verändern===
[[Typo3 - Rahmen (Frames)]]

=== Rendering von Inhalten ===
[[TYPO3 - Automatischer Rollover Effekt für Bilder mit Image Magick Effekten | Rollovereffekt auf Bilder mit Hilfe der ImageMagick Effekte]]

=== Ausgeben von Informationen im head der Seite ===
Wie kann man Stylesheet angaben, Metatags, Skripte etc. im Header ausgeben
[[Typo3 - Tipps und Tricks]] (page.head Objekt)

=== Unnötige Ausgaben im Quelltext verhindern ===
[[TYPO3 - Unnötige Ausgaben im Quelltext verhindern]]

== TypoScript - Basiswissen ==
[[Links mit TypoSkript anlegen]]

== Suche ==

weitere Infos zu Indexed Search:

[[Typo3 - indexed search]]

== Mit HTML und CObj erzeugtes Login ==
Das Beispiel von Tim Lochmüller aus dem Adventskalender 2008, zeigt wie man mit dem Template Objekte größere HTML - Bausteine verwenden kann.

Login mit TS & cObj TEMPLATE
Georg Ringer in TYPO3, Templates, Tutorial, TypoScript

Nach der interessanten Vorstellung von cli-Scripten durch Frank in Türchen 15 zeigt das folgende Tutorial einen guten Weg, einen Login/Logout-Bereich mit TS & HTML zu verwirklichen, ohne dabei auf irgendeine Extension zurückgreifen zu müssen.

Folgendes HTML ist notwendig und wird beispielsweise in fileadmin/template/login.html abgelegt: http://pastebin.com/f4e963e25
Die beiden Subparts sind jeweils für den Login- & Logout-Bereich zuständig und werden mittels Condition umgeschalten.

Das TS ist sehr einfach aufgebaut

lib.login = TEMPLATE
lib.login {
template = FILE
template.file = fileadmin/template/login.html

workOnSubpart = TPL_LOGIN
marks {
URL = TEXT
URL.data = getIndpEnv:TYPO3_REQUEST_URL

PID = TEXT
PID.value = 10789

REGISTER = TEXT
REGISTER {
value = Mitglied werden
typolink {
parameter = 10786
additionalParams = &tx_srfeuserregister_pi1[cmd]=edit
useCacheHash = 1
ATagParams = class=”link link1″
}
}
PWD = TEXT
PWD {
value = Password vergessen?
typolink {
parameter = 10788
ATagParams = class=”link”
}
}
PROFILE = TEXT
PROFILE {
value = Mein Wanderprofil!
typolink {
parameter = 10790
ATagParams = class=”link”
}
}
}
}

[usergroup = *]
lib.login.workOnSubpart = TPL_LOGOUT

[global]

Die notwendigen Variablen sind:

* URL: Die aktuelle URL, auf die nach dem Login/Logout auch weitergeleitet wird
* PID: Id der Seite, die die Benutzer enthält

Nützlich sind weiters:

* REGISTER: Link zu einer Seite, auf der man sich neu registrieren kann
* PWD/PROFILE: Weitere Links zu Seiten nach Bedarf

Die vorgestellte Variante funktioniert out-of-the-box und muss für andere Algorithmen angepasst werden.

Das Tutorial soll dazu anregen, das TEMPLATE-Objekt öfters als nur 1x zu verwenden, denn gerade wenn es um das Inkludieren von etwas mehr HTML geht, ist dies der beste, schnellste und sauberste Weg.

== Benutzer ==
=== Autor-Feld bei neuen Seiten automatisch anlegen ===
TCAdefaults.pages.author = <Name des Redakteurs>
TCAdefaults.pages.author_email = <EMail-Adresse des Redakteurs>

Das funktioniert aber nur dann wenn eine Seite neu angelegt wird. Will man viele Seiten einem Redakteur zuordnen kann man das über eien MySQL abfrage machen:

UPDATE `pages` SET `author` = '<Name des Redakteurs>', `author_email` =
'<EMail-Adresse des Redakteurs>'
WHERE 1 AND `perms_userid` = <UserId des Redakteurs>

in perms_userid steht die ID des Besitzers der Seite, deshalb kann man diesen mit Hilfe des Whereclause ausfiltern.

=== Author Feld, Email-Feld und News Author automatisch anlegen ===
Als weitere Möglichkeit gibt es die Extension cron_setdefaultauthor die genau diese Aufgaben übernimmt. Sie arbeitet im Prinzip wie oben angeführt.

== Ändern von Extension Meldungen durch den Redakteur ==

Adventskalender 2008 von Tim Lochmüller
Immer wieder erlebe ich es, dass der Kunde Texte selber ändern möchte, klar dafür hat er ja auch von uns TYPO3 bekommen. Leider Zum Glück, möchte der Kunde aber manchmal alles pflegen, also auch Texte die aus LocalLang-Dateien oder Templates kommen.

Eine sehr einfache aber durchaus effektive Lösung dafür ist mal wieder ein wenig TypoScript:

1.
plugin.tx_myplugin_pi1.searchError = RECORDS
2.
plugin.tx_myplugin_pi1.searchError {
3.
tables = tt_content
4.
source = 123
5.
}

Jetzt noch das ContentElement mit der UID 123 im Seitenbaum anlegen und folgenden PHP Code in der Extension verwenden:

1.
$marker['###ERR_SEARCH###'] = $this->cObj->cObjGetSingle(
2.
$this->conf['searchError'],
3.
$this->conf['searchError.']
4.
);

Das war es schon, jetzt enthält der Marker ###ERR_SEARCH### den Content, den der Kunde selbst eingepflegt hat. Natürlich muss man kein RECORD nehmen, sondern kann auch alle anderen TS-Objekte wie TEXT oder IMAGE.

== TYPO3 - CSS ==
CSS Beispiele und Schnipsel für Extensions und Standardelemente gibt es unter:
[[TYPO3 - CSS]]

== Geschützter Login Bereich ==

Früher schön mit der New Login Box. Diese ist ab 4.3 integriert.

=== Weiterleitung nach Login ===

CSS - Hacks

2012-04-11T08:13:30Z

79.240.85.1:

== IE Hacks und IE Switches ==

Wie man dem Internet Explorer Sonderregeln beibringt.

===Internet Explorer Conditions===

Generell ist die offizielle von MS empfohlene Methode eine Condition der Form:
<pre>





</pre>

lt bedeutet less than. Die Regeln betreffen also aller Versionen unter IE 8 (die es im Moment noch nicht gibt;-) Außerdem gibts noch lte (lower than and equal) und gte (greater than and equal)
important Hack

Unter Umständen kann auch die important- Klausel weiterhelfen, die der IE nicht kennt, wohl aber FF/ Opera/ Konqueror; zudem macht man sich dabei keines neuen Bugs zu Hilfe.

Wichtig: Immer erst die important- Klausel!

Die Klausel bewirkt bei entsprechend kompatiblen Browsern, dass diese Eigenschaft nachfolgend nicht mehr überschrieben werden kann.

Beispiel:
<pre>
1. box {
min-height: 300px;
height: auto !important;
height: 300px;
...
}
</pre>

=== Sternchen Hack ===

Anwendung: Anweisungen nur für IE 5 und 6 z.B.

* html {...} /*das sehen nur IEs*/

Zukunftssicher: funktioniert nicht mehr bei IE 7

=== Box Model Hack / Tantek Hack ===

IE 5 und IE 5.5

Anwendung: Box Model Fehler von IE 5/5.5 korrigieren

Beispiel:
<pre>
#kasten{
width: 360px;
}

* html #kasten{ /*Das beachten nur IEs*/
width: 400px; /* der 'Falsche' Wert für alte IEs */
w\idth: 360px; /* das sieht nur der IE 6 */
}
</pre>
Zukunftssicher: ja

===Kind Selektor Hack===

IE versteht den KindSelektor nicht. Z.B.

body > p

Anwendung: Höhe nur für IE setzen (IE braucht Höhenangaben z.B. wg. Inline Padding Bug.)

Beispiel:
<pre>
#inhalt {height: 100px;} /*für IE*/
html>body #inhalt { /*für andere Browser zurücksetzen*/
height: auto
}

</pre>

==Browser Bugs==

IE:mac CSS overflow-Bug

Der Internet Explorer für Mac stürzt ab, wenn man overflow: auto auf ein Input-Element des Typs Submit anwendet und auf die Schaltfläche klickt.

Lösung/Fix: Statt overflow: auto muss overflow: visible zugewiesen werden.

Weitere Info: http://www.bernd-lutz.de/css_overflow-bug_ie_mac-51.php
Box Model Bug

IE 5 / 5.5

Standard: Elementbreite = width + paddings + margins + borders IE: Elementbreite = width + margin

Wenn also eine width und borders bzw. paddings angegeben sind werden die Boxen im IE 5 und 5.5 zu klein weil die paddings und borders nicht dazu gezählt werden. Lösung:

1. Wenn width angegeben kein padding oder border verwenden. Stattdessen Ränder auf die Kindelemente anwenden.
2. Box Model Hack / Kind Hack

=== Kommentar Hack ===

Anwendung: vor IE/Mac verstecken z.B. bei 3px Bug der nur in Win Versionen auftaucht.

Beispiel (in Kombination mit * Hack)

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #floatbox {
margin-right: 10px;
}
* html p {
height: 1%;
margin-left: 0;
}
/* End hide from IE5/mac */

=== Inline Padding Bug ===

Horizontales Padding und Margin funktioniert bei Inline-Elementen im IE nur wenn eine Höhe angegeben ist. Dann kann es allerdings zu anderen Seiteneffekten kommen.

Lösung Höhe mit Kind Selektor Hack setzen.
3px Bug bei Bildern

Oft taucht beim IE im Zusammenhang mit floatenden Elementen eine Lücke unterhalb oder links rechts eines Bildes auf. Selbst eine Höhe für das Div hilft nichts.

Lösungsansätze: negatives padding für (Win IEs) overflow: hidden;
Double Margin Bug

IE6 und kleiner berechnen den Margin einer floatenden Box manchmal doppelt.

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won't show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left. (Position Is Everything)

Lösung: Die floatende box bekommt den Wert:

display: inline;

Der Bug ist damit behoben und die Box bleibt (nach W3C Definition trotzdem ein Block Element, weil floatende Boxen automatisch immer Block-Elemente werden.

=== IE7 Update ===

Aus: IE-Blog http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
Korrigierte Bugs
Bugs we fixed

* All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)
o Peekaboo Bug
o Internet Explorer and Expanding Box Problem
o Quirky Percentages
o Line-height bug
o Border Chaos
o Disappearing List-Background bug
o Guillotine Bug
o Unscrollable Content bug
o Duplicate Characters Bug
o IE and Italics
o Doubled Float-Margin bug
o Duplicate Indent bug
o Three pixel text jog
o Creeping Text bug
o Missing First letter bug
o Phantom box bug

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

* Overflow now works correctly! (That means boxes do not automatically grow any more.)
* Parser bugs: * html, _property and /**/ comment bug
* Select control: CSS style-able and not always on top
* Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
* Addressed many relative positioning issues
* Addressed many absolute positioned issues
* % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
* <?xml> prolog no longer causes quirks mode
* HTML element truly independent of the Body (now gets its own width, height etc.)
* 1 px dotted borders no longer render as dashed
* Bottom margin bug on hover does not collapse margins
* Several negative margin issues fixed
* Recalc issues including relative positioning and/or negative margins are fixed now
* CLSID attribute of <object> tag no longer limited to 128 characters
* :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
* Descendant selector now works properly for grand children when combined with other selectors
* First-line and first-letter now applies when there is no space between word :first-line and opening brace {
* Pseudo-classes now are working as expected if selector is excluded
* The :link selector works now for anchor tag with href set to bookmark
* Addressed !important issues
* PositionIsEverything piefecta-rigid.htm now works
* List-item whitespace bug fixed
* Fixed Absolutely Buggy II
* Absolute positioned elements now use always correct containing block for positioning and size information
* Nested block elements now respect all overflow declarations (hidden, scroll, etc)
* Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
* <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
* We no longer lose the image aspect ratio on refresh
* Cleaned up our ident parsing according to CSS2.1 rules
* Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
* And many more

We also extended our existing implementations to comply with W3C specifications:

* Enable :hover on all elements not just on <a>
* Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
* Improved <object> fallback

Finally, we added new features from CSS2.1:

* Min/max width/height support (also for images, which did not work in IE7b2)
* Transparent borders
* Fixed positioning support
* Selectors: first-child, adjacent, attribute, child
o A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
* Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)

Links

http://css.nu/pointers/bugs-ie.html 2006-06-29

http://websemantics.co.uk/tutorials/useful_css_snippets/
Useful Snippets

aus http://websemantics.co.uk/tutorials/useful_css_snippets/
Leveller

Versuche alle Browser auf möglichts gleiche Werte 'vorzukonfigurieren'

* {margin:0; padding:0}

Removes margin and padding from every element.

html {height:100%}

Sets the window height.

min-height:101%;

Sets the minimum page height to greater than the window height to force Netscape & Firefox to display vertical scrollbars, thereby preventing content jumping on fixed width pages. IE doesn't understand min-height and totally ignores this setting.

font:100.01%/130% Verdana, Helvetica, sans-serif;

Set font-size to a percentage preventing a Windows IE "extreme font re-sizing" bug. Set font-size slightly larger than 100% to repair Opera rounding errors. Set less than 101% to prevent Safari errors. The line-height setting gives nice, clear and easy-read spacing. Verdana is the most readable, and readily available screen font in Windows. Helvetica most readable, and readily available screen font on Macintosh computers. Sans-serif is the most readable to the widest audience for body text.

color:#000; background:#fff;

Set general colour & background.

width:760px;

Fixed width set for 800 pixel wide browser displays.

margin:0 auto

Margins are set for centring the content. This works for IE6, Firefox, Opera, Safari and Netscape but IE5 and IE5.5 require further treatment.

text-align:center

Added to the body element to force IE to centre all content

body * {text-align:left}

Resets all text aligns to the left

#wrapper {width:760px}

States the wrapper width. All centred content goes inside a div with an id="wrapper.

* {
margin:0;
padding:0}
html {
height:100%;
font-size:100.01%
}
body {
text-align:center;
min-height:101%;
font:100.01%/130% Verdana, Helvetica, sans-serif;
color:#000; background:#fff;
width:760px;
margin:0 auto
}
body * {text-align:left;}
#wrapper {width:760px}