Hallo
Ich versuche durch das ungefähre nachbauen der www.typo3.com Page den Umgang mit dem Programm zu erlernen.
3 Probleme kann ich leider nicht lösen.
Ich erwarte nicht, dass alle meine Fragen beantwortet werden. Würde mich aber über jede Hilfe freuen.
Um die Probleme zu verdeutlichen, habe ich zwei Screenshots gemacht.
http://www.aaron.de/test/frage1.png
http://www.aaron.de/test/frage2.png
1. Ich würde gerne beim Auswahl der Menüpunkte das Bild links oben verändern.
2. Wenn mein Content links etwas länger wird, soll mein div-frame auf der rechten Seite auch verlängert werden.
3. An welche Stelle kann ich Sitemap formatieren ?
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="frame">
<div id="logo">###LOGO###</div>
<div id="menu_oben">###MENU_TOP###</div>
<div id="header"><div id="bilder">###BILDER###</div>###HEADER###</div>
<div id="menu_links"><p>###MENU_LEFT###</p></div>
<div id="content">###CONTENT###</div>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>
TYPOSCRIPT:
seite = PAGE
# CSS einbinden
#seite.includeCSS {
# file1 = fileadmin/layout.css
#}
seite {
typeNum = 0
bodyTag = <body bgColor = "#ffffff">
# CSS einbinden
stylesheet = fileadmin/typo3_css.css
meta.AUTHOR = Aaron Kreis
meta.DESCRIPTION = typo3 - ein Versuch, die Seite nachzubauen
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/typo3.html
10.workOnSubpart = DOKUMENT
10.marks {
# Logo
LOGO = IMAGE
LOGO.file = fileadmin/images/logo.gif
HEADER = IMAGE
HEADER.file = GIFBUILDER
HEADER.file {
XY = 300, 120
backColor = #bcd54b
# Titel
10 = TEXT
10.text.field = title
10.fontSize = 20
10.fontColor = #fffffff
10.niceText = 1
10.offset = 150, 90
# Titel
20 = TEXT
20.text.field = subtitle
20.fontSize = 12
20.fontColor = #fffffff
20.niceText = 1
20.offset = 150, 115
}
# Ende HEADER.file
#Bild
BILDER = IMAGE
BILDER.file = fileadmin/images/statur.png
BILDER.file.width = 230
BILDER.file.height = 140
# Menü top
MENU_TOP = HMENU
MENU_TOP.special = directory
MENU_TOP.special.value = 2
MENU_TOP.1 = TMENU
MENU_TOP.1.NO = 1
MENU_TOP.1.NO.linkWrap = | | |*| | | |*| |
# Menü left
MENU_LEFT = HMENU
MENU_LEFT.special = directory
MENU_LEFT.special.value = 7
MENU_LEFT.entryLevel = 1
MENU_LEFT.1 = GMENU
MENU_LEFT.1.NO = 1
MENU_LEFT.1.NO {
backColor = #eef6ff
wrap = |<br>
XY = 200,30
10 = TEXT
10.text.field = title
10.fontColor = #000000
10.fontSize = 10
10.niceText = 1
10.offset = 7, 10
}
# Ende MENU_LEFT.1.NO
MENU_LEFT.1.RO < .MENU_LEFT.1.NO
#MENU_LEFT.1.RO.backColor = #ffffff
#MENU_LEFT.1.RO {
# tmp < .backColor
# backColor = #ffffff
# 5 < .10
# 5.fontColor < .tmp
# 5.offset = 9,23
#}
# Ende MENU_LEFT.1.RO
MENU_LEFT.1.CUR < .MENU_LEFT.1.RO
# Submenü von 'Über uns'
MENU_LEFT.2 < .MENU_LEFT.1
MENU_LEFT.2 {
NO.backColor = #E2F5E5
NO.10.fontColor = #478951
NO.20.file.backColor = #478951
RO < .NO
RO.backColor = #FFFFFF
RO.5 >
CUR < .RO
}
# weisse Linien
20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 250,1
backColor = #FFFFFF
}
20.offset = 0, 29
# Content - mitte - colPos = 0
CONTENT = CONTENT
CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
}
# Ende marks
}
# Ende seite
# Definition der Überschrift
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
1 = TEXT
1.field = header
1.wrap = <font face="Arial" size="2"><b> | </b></font><br>
2 = IMAGE
2.file = GIFBUILDER
2.file {
XY = [10.w]+10, 28
backColor = white
10 = TEXT
10.text.field = header
10.fontColor = #00aa4b
10.fontFile = fileadmin/fonts/arialb.ttf
10.fontSize = 14
10.offset = 1, 22
10.niceText = 1
}
2.wrap = |<br>
default < .1
}
# Definition des Contents
tmp_tt_content_text < tt_content.text
tt_content.text >
tt_content.text = COA
tt_content.text.10 < lib.stdheader
tt_content.text.20 = TEXT
tt_content.text.20 {
field = bodytext
fieldRequired = bodytext
wrap = <font face="Arial" size="2">|</font><br>
parseFunc < tmp_tt_content_text.20.parseFunc
editIcons < tmp_tt_content_text.20.editIcons
}
CSS
body {
background-color:#FFFFFF;
width:850px;
}
#logo {
text-align:right;
padding:5px;
}
#menu_oben {
background-color:#FFFFFF;
color:#444444;
text-align:left;
padding-left:5px;
padding-bottom:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
#header {
background-color:#BCD54B;
height:140px;
color:#FFFFFF;
text-align:right;
padding-right:50px;
}
#bilder {
background-color:#FFFFFF;
float:left;
width:230px;
height:140px;
}
#menu_links {
background-color:#EEF6FF;
width:220px;
float:left;
margin-top:1px;
padding-top:10px;
padding-left:10px;
}
#content {
background-color:#FFFFFF;
width:600px;
float:left;
padding-top:20px;
padding-left:10px;
margin-top:1px;
}
zu 1.)
Du kannst die Belegung der Headerbilder durch eine Condition regeln. Die Zahlen 42,41,40,39 sind page-Ids
und müssen für dich entsprechend angepaßt werden.
temp.headerimage = IMAGE
temp.headerimage.file = {$CONST_TEMPLATEDIR}/images/headerimage0.jpg
temp.headerimage.wrap = <div id="headerimage"|</div>
[PIDinRootline = 42]
temp.headerimage.file = {$CONST_TEMPLATEDIR}images/header_unternehmen.jpg
[PIDinRootline = 41]
temp.headerimage.file = {$CONST_TEMPLATEDIR}images/headerimage2.jpg
[PIDinRootline = 40]
temp.headerimage.file = {$CONST_TEMPLATEDIR}images/headerimage3.jpg
[PIDinRootline = 39]
temp.headerimage.file = {$CONST_TEMPLATEDIR}images/header_kunden.jpg
[global]
3.) Sitemap
Die Sitemap als solche kannst du über
tt_content.menu.20.2
ansprechen. Die einzelnen Level dann über ".1", ".2" usw.
Hier ein Beispiel für eine Sitemap, in der das TS für Level 1 definiert wird, dann für alle anderen Level übernommen wird und jeweils der gerade definierte wrap für die Level 2-5 überschrieben wird. Die einzelnen Bestimmungen im Typoscript sind weitgehend selbsterklärend, ansonsten einfach mal ausprobieren :-))
temp.menu {
target = _self
noBlur = 1
expAll = 1
wrap = <ul class="sitemap">|</ul>
NO {
allWrap = |
stdWrap.htmlSpecialChars = 0
wrapItemAndSub = <li class="sm_nofirst">|</li> |*| <li class="sm_no">|</li> |*| <li class="sm_nolast">|</li>
ATagParams = class="sm_nofirst" |*| class="sm_no" |*| class="sm_nolast"
doNotLinkIt = 0
}
}
tt_content.menu.20.2.1 < temp.menu
tt_content.menu.20.2.2 < temp.menu
tt_content.menu.20.2.2.wrap = <ul class="sitemap_f">|</ul>
tt_content.menu.20.2.3 < temp.menu
tt_content.menu.20.2.3.wrap = <ul class="sitemap_f">|</ul>
tt_content.menu.20.2.4 < temp.menu
tt_content.menu.20.2.4.wrap = <ul class="sitemap_f">|</ul>
tt_content.menu.20.2.5 < temp.menu
tt_content.menu.20.2.5.wrap = <ul class="sitemap_f">|</ul>
zu 1.) sollen die Bilder aus Mouseover funktionieren oder so wie es imu erklärt hat?
Hi
Danke für die schnelle Antwort 🙂
@imu:
Habe mein Typoscript nach Deine Beschreibung verändert:
PIDinRootline und die Bild-Pfade habe ich angepasst.
Ich kann leider beim auswählen der Menüpunkte die Bilder nicht wechseln.
Wenn ich die Page starte , wird
[PIDinRootline = 16]
BILDER.file = fileadmin/images/haende.png
Ausgeführt ?!
D.h. die letzte PIDinRootline wird ausgeführt, obwohl ich nicht die ID ausgerufen habe.
Die Menüs sind Unterpunte von Root.
In der Referenz steht folgendens:
Diese Bedingung überprüft, ob eine der Angaben in PIDinRootline eine Seiten-ID der rootline ist.
Die anderen Menüs sind zwar Unterpunkte von Root, aber nicht in der gleiche Linie. Oder habe ich etwas falsch verstaden?
Anbei ein Screenshot:
http://www.aaron.de/test/frage4.png
[PIDinRootline = 9] zeigt auf "Über uns"
BILDER = IMAGE
BILDER.file = fileadmin/images/statur.png
BILDER.file.width = 230
BILDER.file.height = 140
BILDER.wrap = <div id="bilder"|</div>
# Diese Bedingung überprüft, ob eine der Angaben in PIDinRootline eine Seiten-ID der rootline ist.
[PIDinRootline = 9]
BILDER.file = fileadmin/images/wasser.png
[PIDinRootline = 10]
BILDER.file = fileadmin/images/gesicht.png
[PIDinRootline = 11]
BILDER.file = fileadmin/images/haus.png
[PIDinRootline = 16]
BILDER.file = fileadmin/images/haende.png
@Nicklas:
Ich Muss beide Varianten anwenden. Rollover fehlt mir auch noch. Das Ganze soll wie auf www.typo3.com funktionieren.
Gruß
Aaron
Hallo
wenn du die PIDs der Seiten Über uns, Gästebuch, Forum usw. verwendest, sollte es eigentlich gehen.
Was ich vermisse: das [global] am Ende. habe keine Ahnung, was ein vergessen bewirkt, mit einiger Wahrscheinlichkeit aber, daß das ganze nicht als Condition gewertet wird und eben die letzte Eintragung alle anderen überschreibt ...
was rollover, also javascript angeht - gebe ich gern an niklas weiter :-)))
hi ..
Ich dachte das [global] hättest du bei copy/paste aus versehen eingefügt 🙂
Habe [global] dazu geschrieben. Anschliessend werden alle Marker nicht mehr erkannt !
Werde mich gleich mit "Condition" auseinander setzen.
Gruß
Aaron
Der ganze Abschnitt steht nicht zufällig in {} geschweiften klammern? Conditions dürfen nämlich nicht innerhalb von
Klammern stehen. Deshalb habe ich in meinem Beispiel mit einer temp-"Variable" gearbeitet und diese dann später dem Marker zugewiesen, also
[Condition-Konstruktion wie oben]
[weiterer Template-Inhalt]
....
irgendwann
workOnSubpart = HTMLBODY
marks{
...
HEADERBILD = IMAGE
HEADERBILD.file < temp.headerimage.file
...
}
Hi
Irgendwie funktioniert das Ganze bei mir noch nicht 🙁
Habe alles an die richtige Stelle kopiert und die Pfade verändert.
Fällt dir irged etwas auf ?
Gruß
Aaron
p.s.: Warum benutzt du temp ? Muss ich ein Tempobjekt angelegen ?
seite = PAGE
# CSS einbinden
#seite.includeCSS {
# file1 = fileadmin/layout.css
#}
seite {
typeNum = 0
bodyTag = <body bgcolor="#ffffff">
# CSS einbinden
stylesheet = fileadmin/typo3_css.css
meta.AUTHOR = Aaron Kreis
meta.DESCRIPTION = typo3 - ein Versuch, die Seite nachzubauen
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/typo3.html
10.workOnSubpart = DOKUMENT
10.marks {
# Logo
LOGO = IMAGE
LOGO.file = fileadmin/images/logo.gif
HEADER = IMAGE
HEADER.file = GIFBUILDER
HEADER.file {
XY = 300, 120
backColor = #bcd54b
# Titel
10 = TEXT
10.text.field = title
10.fontSize = 20
10.fontColor = #fffffff
10.niceText = 1
10.offset = 150, 90
# Titel
20 = TEXT
20.text.field = subtitle
20.fontSize = 12
20.fontColor = #fffffff
20.niceText = 1
20.offset = 150, 115
}
# Ende HEADER.file
# #Bild
# BILDER = IMAGE
# BILDER.file = fileadmin/images/statur.png
# BILDER.file.width = 230
# BILDER.file.height = 140
BILDER = IMAGE
BILDER.file < headerimage.file
# Menü top
MENU_TOP = HMENU
MENU_TOP.special = directory
MENU_TOP.special.value = 2
MENU_TOP.1 = TMENU
MENU_TOP.1.NO = 1
MENU_TOP.1.NO.linkWrap = | | |*| | | |*| |
# Menü left
MENU_LEFT = HMENU
MENU_LEFT.special = directory
MENU_LEFT.special.value = 7
MENU_LEFT.entryLevel = 1
MENU_LEFT.1 = GMENU
MENU_LEFT.1.NO = 1
MENU_LEFT.1.NO {
backColor = #eef6ff
wrap = |<br />
XY = 200,30
10 = TEXT
10.text.field = title
10.fontColor = #000000
10.fontSize = 10
10.niceText = 1
10.offset = 7, 10
}
# Ende MENU_LEFT.1.NO
MENU_LEFT.1.RO < .MENU_LEFT.1.NO
#MENU_LEFT.1.RO.backColor = #ffffff
#MENU_LEFT.1.RO {
# tmp < .backColor
# backColor = #ffffff
# 5 < .10
# 5.fontColor < .tmp
# 5.offset = 9,23
#}
# Ende MENU_LEFT.1.RO
MENU_LEFT.1.CUR < .MENU_LEFT.1.RO
# Submenü von 'Über uns'
MENU_LEFT.2 < .MENU_LEFT.1
MENU_LEFT.2 {
NO.backColor = #E2F5E5
NO.10.fontColor = #478951
NO.20.file.backColor = #478951
RO < .NO
RO.backColor = #FFFFFF
RO.5 >
CUR < .RO
}
# weisse Linien
20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 250,1
backColor = #FFFFFF
}
20.offset = 0, 29
# Content - mitte - colPos = 0
CONTENT = CONTENT
CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
}
# Ende marks
}
# Ende seite
# Definition der Überschrift
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
1 = TEXT
1.field = header
1.wrap = <font face="Arial" size="2"><b> | </b></font><br />
2 = IMAGE
2.file = GIFBUILDER
2.file {
XY = [10.w]+10, 28
backColor = white
10 = TEXT
10.text.field = header
10.fontColor = #00aa4b
10.fontFile = fileadmin/fonts/arialb.ttf
10.fontSize = 14
10.offset = 1, 22
10.niceText = 1
}
2.wrap = |<br />
default < .1
}
# Definition des Contents
tmp_tt_content_text < tt_content.text
tt_content.text >
tt_content.text = COA
tt_content.text.10 < lib.stdheader
tt_content.text.20 = TEXT
tt_content.text.20 {
field = bodytext
fieldRequired = bodytext
wrap = <font face="Arial" size="2">|</font><br />
parseFunc < tmp_tt_content_text.20.parseFunc
editIcons < tmp_tt_content_text.20.editIcons
}
headerimage = IMAGE
headerimage.file = fileadmin/images/statur.png
headerimage.wrap = <div id="bilder"|</div>
# Diese Bedingung überprüft, ob eine der Angaben in PIDinRootline eine Seiten-ID der rootline ist.
[PIDinRootline = 8]
headerimage.file = fileadmin/images/wasser.png
[PIDinRootline = 9]
headerimage.file = fileadmin/images/gesicht.png
[PIDinRootline = 11]
headerimage.file = fileadmin/images/haus.png
[PIDinRootline = 16]
headerimage.file = fileadmin/images/haende.png
[global]
Hallo Aron,
ich würde diesen Abschnitt
headerimage = IMAGE
headerimage.file = fileadmin/images/statur.png
headerimage.wrap = <div id="bilder"|</div>
# Diese Bedingung überprüft, ob eine der Angaben in PIDinRootline eine Seiten-ID der rootline ist.
[PIDinRootline = 8]
headerimage.file = fileadmin/images/wasser.png
[PIDinRootline = 9]
headerimage.file = fileadmin/images/gesicht.png
[PIDinRootline = 11]
headerimage.file = fileadmin/images/haus.png
[PIDinRootline = 16]
headerimage.file = fileadmin/images/haende.png
[global]
weiter nach oben setzen, und zwar bevor "seite {"
Bei richtiger Programmierung wäre das sowieso klar, bei Typoscript ist das nicht immer so offensichtlich. Aber eine "Variable", die du verwendest (headerimage) sollte ganz sicher erstmal definiert werden, bevor sie dann verwendet wird.
Hi
@imu: 1000x Dank für die Mühe..
Deine letzte Antwort hat das Problem gelöst 🙂
Gruß
Aaron