Hallo Leute,
ich habe auf der Seite http://www.1a-pension-berlin.de links eine schöne Menüführung gefunden, wo jeder Hauptmenüpunkt mit seinen jeweiligen Untermenüpunkten eine andere (Hintergrund-)Farbe haben.
Wie lässt sich so etwas in TYPO3 umsetzen?
Viele Grüße
David
Ich würde es mit einzelnen Directory Menüs machen, entsprechend formatieren mit den BG's und die dann mit nem COA nacheinander auflisten.
Das mit den einzelnen Verzeichnissen ist eine gute Idee. Ich würde dann gern noch die Überschriften (H1) in der jeweiligen Farbe (sie Menü) darstellen. Wie kann ich das umsetzen?
Gruß David
Kleiner CSS-Exkurs:
Du kannst die einzelnen Menüpunkte auch ohne unterschiedliche Klassen (also ohne irgendwas am TYPOSCRIPT zu ändern) per CSS ansprechen. Beispiel:
// Menü im ausgegebenen HTML:
<ul class="menue">
<li><a href="...">Punkt 1</a></li>
<li><a href="...">Punkt 1</a></li>
<li><a href="...">Punkt 1</a></li>
</ul>
// im CSS-Stylesheet:
.menue li { background-color: red;}
.menue li + li { background-color: blue;}
.menue li + li + li { background-color: green;}
Jede Regel gilt für alle li, die mindestens so viele andere li direkt (also ohne anderes Element dazwischen) vor sich haben, wie "li +" in der Regel stehen. Dabei "gewinnt" aber jeweils die spezifischste Regel, die noch zutrifft.
- Für den ersten Menüpunkt trifft nur die erste Regel zu.
- Für den zweiten werden die ersten beiden Regeln angewendet, die zweite gewinnt.
- Für den dritten Menüpunkt gelten alle Regeln, aber die dritte setzt sich durch.
Das funktioniert in allen aktuellen Browsern, nur nicht im IE6 (würde ich persönlich wenns nur um Farben geht aber für verschmerzbar halten).
Okay, ich versuche mich mal an der Umsetzung.
Hat noch jemand eine Idee bezüglich der farblichen Anpassung des Inhalts (z.B. H1 in Abhängigkeit des Menüpunktes)?
Unterschiedliche Website-Bereiche würde ich per id oder class am body-Tag machen:
page.bodyTagCObject = COA
page.bodyTagCObject {
1 = COA
1.1 = TEXT
1.1.value.field = uid
1.1.value.wrap = <body id="page|" class="bereich1">
}
So habe ich schonmal für jede Seite eine eindeutige id (kann man immer mal brauchen für seitenspezifische Styleänderungen) und eine Klasse.
Die Klassen für die anderen Bereiche kann man entweder einfach in einem jeweils eigenen TS-Template auf der obersten Seite überschreiben:
page.bodyTagCObject.1.1.value.wrap = <body id="page|" class="bereichX">
Oder Du arbeitest im Haupttemplate mit Conditions:
[PIDupinRootline=2]
page.bodyTagCObject.1.1.value.wrap = <body id="page|" class="bereich2">
...
[GLOBAL]
im CSS dann:
.bereich1 h1 { color: red;}
.bereich2 h1 { color: blue;}
...
Erst einmal vielen Dank.
Was bedeutet in der Bedingung "PIDupinRootline"? Kann ich anstelle des Bodybereichs das ganze auch an einer bestimmten DIV festmachen? Wenn ja, wie wäre dann der Syntax?
Danke
David
Einfach mal googlen: "PIDupinRootline typo3", oder direkt hier in der Scriptreferenz. Dort gibt es eine gute Erklärungsseite.
Bei der Gelegenheit eine kleine Korrektur:
"PIDinRootline" ist wahrscheinlich in deinem Fall praktischer.
ich würde für solche übergeordneten Klassen immer das äußerst mögliche Element nehmen, dann bist du nachher am flexibelsten, wenn auf einmal auch noch anderes angepasst werden soll.
Wenn du trotzdem ein anderes Element als body nehmen willst, bleibt der Aufbau im Prinzip gleich, du musst eben ein anderes Objekt (als "page.bodyTagCObject") ansprechen und den wrap anpassen. Allerdings musst du dafür überhaupt erstmal an das Objekt herankommen (am besten an der Stelle wo es erzeugt wird).
ciao,
Wolfgang