CSS: Submenu seitenabhängig gestalten

**RoGer** · 07.06.2011, 16:48

Hallo,

ich arbeite gerade an einer Seite, bei der die Navigationsbuttons unterschiedliche Farben besitzen. Je nach ausgewählter Seite, sollen auch die Unterseiten in der linken Navigation entsprechend farblich erscheinen.
Bsp.: Wähle ich "Förderverein" (orange), zeigt links die Überschrift der Unternavigation die gleiche Farbe usw. Klappt soweit.

Sobald ich aber eine Unterseite auswähle, wechselt die Farbe wieder auf gelb.
Ich weiß, es liegt an CSS. Ich hab aber schon Stunden rumprobiert .... :-(
Muss ich hierfür jeder neuen Seite eine entsprechende CSS-Klasse vergeben? Oder gibt's auch eine andere Möglichkeit? Der spätere Redakteur soll die Sache auch bei neuen Unterseiten möglichst einfach haben.

http://sebastian-grundschule.de/typo

Roland

**tio** · 07.06.2011, 20:47

hi,

ps. in firefox 4.x schlägts dir die Unternavi "biblisch-christliches-gottesbild" auf 3 Zeilen

biblisch-
christliches
gottesbild

und

hausaufgabenkonzept

fällt hinten aus dem Rahmen...

verwendest du MenuMatic?
ich habe nämlich ähnliche Probleme...

***lucina*** · 07.06.2011, 20:54

.active sollte Euer Freund sein.

:-)

Carolina-

**tio** · 07.06.2011, 21:01

Zitat von lucina

.active sollte Euer Freund sein.

:-)

Carolina-

Hi,

also ich könnte noch überall für jede Klasse / Unterklasse ein .active machen ...
cool...
danke.

**wotank** · 08.06.2011, 07:11

Wenn du schon crosspostest dann verlink das wenigstens miteinander.

**RoGer** · 08.06.2011, 07:59

@wotank
sorry - hast du ja damit gemacht. Hab dir auch dort schon geantwortet.
@tio
ist kein MenuMatic

ABER:
.active ist doch immer nur der jeweils ausgewählte Menüpunkt. Ich möchte aber eine Farbe "automatisch" allen Unterseiten einer Hauptseite "vererben". Ich meine, irgendwo schonmal sowas gelesen zu haben.

Jetzt hab ich .menu01, menu02 ... allen Seiten zugewiesen. Ist aber extrem unpraktisch beim Anlegen neuer Unterseiten.

Scheint übrigens ein generelles Problem zu sein.

Roland

**MacKP** · 08.06.2011, 08:41

Hallo RoGer,
das ist ein generelles Problem von Leuten die noch nicht viel CSS können ;-)

Schau mal, du wirst ja in der 1. Ebene ja passende Klassen. Nun musst du nur noch diese Klasse auch nutzen um die Elemente darunter anzusprechen.

Also zum Beispiel sowas in der Art:

Code:

li.menu02 li a

Viele Grüße

**Harry** · 08.06.2011, 10:01

Hallo RoGer,

wie so oft gibt es mehrere Lösungsansätze. Einem Redakteur, der eine neue Seite einrichten kann, würde ich ja grundsätzlich zutrauen, dieser Seite auch eine Klasse, quasi als Kategorie zuzuweisen. Aber es stimmt natürlich, dass der Redakteur wieder zusätzliches Know-how benötigt, was zu vermeiden ist. Mehrere Seitenlayouts mit gesonderten Stylesheets wären auch noch denkbar, widersprechen aber dem Grundsatz: So wenig Seitenlayouts wie möglich.

Bleibt die Anpassung des Seitentemplates fe_page.tpl:

1. Templates -> Neues Template -> Originaltemplate = fe_page.tpl
2. Die Klasse des body-Tags per Inserttag {{env::main_alias}} erweitern
3. Ggf. dem Template einen eigenen Namen geben und in der Seitenstruktur neu zuweisen.

Zu Punkt 2:

In der Standard-Seitenvorlage wird für body das Klassenattribut erzeugt mit:

<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; ...

Den String für die Klasse passt Du nun so an, dass der normalen Klassenangabe immer der Alias des Hauptmenüpunktes vorangestellt wird (Leerzeichen beachten):

class="{{env::main_alias}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"

Die komplette Zeile für den body sieht dann so aus:

<body id="top" class="{{env::main_alias}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

Im CSS kannst Du Seitenelemente nun unter Bezug auf die Klasse des Hauptmenüpunktes gestalten. Da {{env::main_alias}} immer den Hauptmenüpunkt ausgibt, funktioniert diese Methode in beliebiger Verschachtelungstiefe.

Ich meine, MacKP hat das hier im Forum auch schon mal vorgeschlagen.

EDIT: Hab den Beitrag von MacKP gefunden. Anschließend gibt es dort noch eine Lösung für mehrsprachige Sites.

Viele Grüße
Harry

***xchs*** · 08.06.2011, 12:03

Ergänzend zu den Ausführungen von Harry:

Der Inserttag {{env::main_alias}} kann selbstverständlich auch im (Standard)"Seitenlayout" unter "Experten-Einstellungen" im Feld "Body-Klasse" eingetragen werden.

Vorteil: Man erspart sich die direkte Anpassung des Seitentemplates "fe_page.tpl".

**RoGer** · 08.06.2011, 13:07

schonmal danke für die zahlreichen Antworten.
Die Sache mit dem Inserttag {{env::main_alias}} hatte ich schon in meinem verlinkten Thread gesehen. Scheint wohl das Beste zu sein. Besonders der Vorschlag von "xchs".
Allerdings: Wenn ich das richtig sehe, müsste man nach jeder Änderung eines Hauptmenüpunktes auch die entsprechende CSS-Klasse ändern ... Richtig ?

@MacKP

Hallo RoGer,
das ist ein generelles Problem von Leuten die noch nicht viel CSS können ;-)

joh, danke für die Blumen. Du kannst mir bestimmt erklären, wie das funktionieren soll, ohne auf Unterseiten Klassen anzugeben ?

Code:

li.menu02 li a

Roland

**Harry** · 08.06.2011, 13:26

Stimmt, der Inserttag im Seitenlayout ist deutlich komfortabler - wenn man denn daran denkt, dass es das Feld gibt und es genau für diesen Zweck vorgesehen ist

.

Und ja, wenn man die Aliasse der Hauptseiten ändert, müssen selbstverständlich die CSS-Selektoren entsprechend angepasst werden. Das sehe ich aber nicht als Manko. Wie oft wird man seine Hauptmenüpunkte ändern? Es ging in erster Linie ja um eine Lösung, mit der sich beliebige neue Unterseiten erstellen lassen, ohne diese besonders kennzeichnen zu müssen.

**MacKP** · 08.06.2011, 13:31

Hallo RoGer,
die Unterpunkte sollen ja die selbe Farbe haben soweit ich das verstanden habe.
Du musst also nur wissen welcher Oberpunkt das ist. Das steht dann so im CSS wie ich geschrieben habe. Du brauchst die Unterpunkte dann ja nicht anders anzusprechen jeweils. Das funktioiniert so, weil die Unterpunkte ja IN dem Hauptpunkt drinn liegen.

Was genau willst da noch wissen?

Viele Grüße

***xchs*** · 08.06.2011, 14:03

Zitat von RoGer

Allerdings: Wenn ich das richtig sehe, müsste man nach jeder Änderung eines Hauptmenüpunktes auch die entsprechende CSS-Klasse ändern ... Richtig ?

Nur soviel: Die kommende Contao-Version wird diesbezüglich einige Erleichterungen bringen. Über entsprechende Platzhalter in den Stylesheets können dann solcherart Änderungen blitzschnell umgesetzt werden.

Bleiben wir gespannt.

**RoGer** · 08.06.2011, 21:11

Aah, Hilfe!
Klang doch zu schön um wahr zu sein - oder hab ich jetzt ein Brett vorm Kopf?

Den Inserttag {{env::main_alias}} hab ich eingefügt und die CSS-Klasse (nur) für die Seite "Förderverein" umbenannt. Klappt soweit, auch für neue Unterseiten:

http://sebastian-grundschule.de/typo/index.php/F%C3%B6rderverein.html

1. Problem:
Wenn ich über die anderen Menüs (z.B. Unterseiten von Schulleben) hovere, erscheint dort auch die Farbe von "Förderverein"

2. Problem
Wenn ich eine andere Seite auswähle und über "Förderverein" hovere, ist dort die Farbe weg. Ist doch klar - im body steht ja schließlich eine andere Klasse anstatt .Föderverein

War das jetzt ein Denkfehler oder klappt das wirklich nicht ???? (uurrrrgg!)

Roland