Hallo,
ich habe jetzt noch ein Problem ich möchte gerne, das der aktive Menüpunkt anders formatiert wird... das geht irgendwie über ACT variable, aberi ch bekomme es nicht hin.
Mein Typoscript Setup
#Kompatibiltität Typo3 4.0
config.simulateStaticDocuments_replacementChar = _
#Erzeugen eines Pageobjekt in ?page?
page = PAGE
#Zuweisen des Sytlesheet Files
page.stylesheet = fileadmin/my_template.css
#Typ der Seite ist 0, hiermit können verschiedene
#Typen ausgewählt werden z.b. für eine Druckansicht
page.typeNum = 0
page.20 = TEMPLATE
#Template ist eine Datei
page.20.template = FILE
#Der Dateiname ist template.html
page.20.template.file = fileadmin/my_template.tpl
#Den Subpart DOCUMENT BODY bearbeiten
page.20.workOnSubpart = DOCUMENT_BODY
#Innerhalb von Documtent Body weitere Subparts bearbeiten
page.20.subparts {
#Der Subpart CONTENT wird mit
#der Ausgabe von styles.content.get ersetzt
#dies entspricht der mittleren Contentspalte
CONTENT < styles.content.get
#Der Subpart MENU ist ein hierachisches Menü
MENU = HMENU
#Die 1. Ebene des Menüs ist ein Textmenü
MENU.1 = TMENU
MENU.1 {
NO = 1
1.ACT < .1.NO
1.ACT.10.fontColor = #6FA9A6
1.ACT.15.fontColor = #6FA9A6
#Die Einträge werden umschlossen von
#<div class="level1"> </div>
NO.allWrap = <div class="level1"> | </div>
}
#Die 2. Ebene ist ebenfalls ein Textmenü
MENU.2 = TMENU
MENU.2 {
NO = 1
#Die Einträge werden umschlossen
#von <div class="level2"> </div>
NO.allWrap = <div class="level2"> | </div>
}
MENU.3 {
NO = 1
#Die Einträge werden umschlossen
#von <div class="level3"> </div>
NO.allWrap = <div class="level3"> | </div>
}
}
#An dieser Stelle werden die Marker
#im Template (page.20) bearbeitet
page.20.marks{
#Der Marker LOGO ist ein Bild
LOGO = IMAGE
#Die Datei für das Bild ist die
#Datei logo-typo3.gif
LOGO.file = fileadmin/logo-typo3.gif
#Der Marker Rootline ist ein hierachisches Menü
ROOTLINE = HMENU
ROOTLINE.special=rootline
ROOTLINE.special.range= 0 | -1
ROOTLINE.1=TMENU
#Die einzelnen Einträge werden durch Slashes getrennt
ROOTLINE.1.NO.allWrap= | / |*| | / |*| |
}
Mein Typo3 Template:
<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="Page">
<div id="TopLayer">###ROOTLINE###</div>
<div id="LogoLayer">###LOGO###</div>
<div id="RootlineLayer"></div>
<div id="Middle">
<div id="Menu">
<!-- ###MENU### START-->
<a href="einfuehrung.htm">Navigationslink</a>
<!-- ###MENU### END-->
</div>
<div id="Content">
<!-- ###CONTENT### START-->
<h1>Willkommen zum ersten Template</h1>
<h2>Erstes Template.</h2>
<p>An dieser Stelle soll später der Inhalt von Typo3 eingefügt werden....</p>
<!-- ###CONTENT### END-->
</div>
</div>
<div id="FooterLayer"></div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>
</html>
Meine Typo3 CSS Template Datei:
body {
color: black;
background-color: rgb(170, 170, 170);
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
text-align: center;
}
div#Middle {
text-align: left;
margin: 0 auto;
height: 500px;
}
div#Page {
text-align: left;
margin: 0 auto;
width: 800px;
padding: 0.5em;
background-color: rgb(200, 200, 200);
}
html>body div#Page {
border-color: gray;
}
div#Menu {
font-size: 9pt;
float: left;
width: 200px;
height: 100%;
margin: 0; padding: 0;
background-color: rgb(102, 165, 82);
}
div#Menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
div#Menu a:link {
color: black; background-color: #eee;
}
div#Menu a:visited {
color: #666; background-color: #eee;
}
div#Menu a:hover {
color: black; background-color: white;
}
div#Menu a:active {
color: white; background-color: red;
}
.level1 {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.level2{
margin-left: 20px;
margin-right: 10px;
}
.level3{
margin-left: 20px;
margin-right: 10px;
}
.menu1-level1-act {
color: redk; background-color: green;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.menu1-level2-act {
color: redk; background-color: green;
margin-left: 20px;
margin-right: 10px;
font-color: red;
}
.menu1-level3-act {
color: redk; background-color: green;
margin-left: 30px;
margin-right: 20px;
font-color: red;
}
div#Content {
margin-left: 200px;
padding: 0 1em;
border: 1px dashed silver;
}
div#Content h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#Content h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#Content p {
font-size:1em;
margin: 1em 0;
}
div#TopLayer {
width: 100%;
background-color: rgb(250, 136, 0);
height: 20px;
}
div#LogoLayer {
width: 100%;
background-color: rgb(255,255,255);
height: 70px;
}
div#RootlineLayer {
width: 100%;
background-color: rgb(102, 165, 82);
height: 20px;
}
div#FooterLayer {
width: 100%;
background-color: rgb(250, 136, 0);
height: 20px;
}