Gruppierte Menüblöcke und Farb-Leitsystem
Ich habe mich mit 2 Fragen beschäftigt, die immer wieder mal auftauchen – und aus der Antwort dazu ein kleines WebsiteBaker Template gemacht.
- Wie mache ich im Menü Zwischenüberschriften und gruppiere so die Menüpunkte, ohne mit mehreren Menüs zu frickeln.
- Wie mache ich es, dass in verschiedenen Kapiteln /Seiten verschiedene Farben sind.
Das WebsiteBaker Template „BlockIt“:
Jedes Kapitel hat seine eigenen Farben: Der vertikale Balken, Überschriften, Links, Hintergrundfarben. 7 Kapitel sind angelegt, weitere können einfach im CSS angehängt werden. Fluid, valide, stabil.
Showmenu2 muss installiert sein, das Template hat 2 Blöcke (wie immer bei mir ;-)
Angemerkt sein noch: Das HIER funktioniert natürlich nicht wie gewünscht, weil die Struktur der restlichen Website nicht dafür angelegt ist. Ich wills ja nicht gleich übertreiben.Wenn auf meiner Site "Templates" die erste Gruppe wäre, wären hier die Überschriften und Hintergrundfarben (auch im Header oben) grün. So ziemlich alles, was hier nicht grau ist, lässt sich im CSS anpassen.
Gehen wirs an:
Gruppieren der Menüpunkte
Irgendwie muss man es ihm sagen – und das einfachste ist, die oberste Ebene aus leeren Seiten oder Menu-Links anzulegen und diesen Hauptmenüpunkten die einzelnen Unterseiten zuzuordnen. So etwas macht natürlich nur Sinn, wenn die Hauptpunkte keinen Link haben und folglich die Unterseiten auch gleich „offen“, also bereits aufgeklappt sind. (Ausgenommen natürlich die Startseite, die die soll mit Klick auf das Logo aufrufbar sein)
Da WebsiteBaker das von sich aus nicht kann, wird bereits im Head der Seite das Menü aufgerufen und mit etwas PHP umgebastelt: Alle Seiten in der Ebene 0 werden der Links beraubt und zu <h3> mit etwas div herum.
Warum das Ganze gleich im Head der Seite?
Einfärben je nach Kapitel oder Seite:
Praktischerweise werden die Gruppen durchgezählt und die aktive mit der Nummer $activeblock herausgesucht. Damit könnte man schon im <head> verschiedene CSS aufrufen: "/style$activeblock.css". So weit bin ich hier nicht gegangen, aber schon im <body> steht:
<body id="bodyid<?php echo $page_id.'" class="bodyclass'.$activeblock;?>">
Damit habe ich zb die ID "bodyid28" und die class "bodyclass3", die ich beide verwenden kann, um über CSS verschiedenste Farbspielereien aufzuführen.
Einige Beispiele:
.bodyclass3 h3 {color: #70b35d;}
macht alle Überschiften 3 auf Seiten im Kapitel 3 (=3. Block) grün.
Oder:
#bodyid28 a {color: #70b35d ! important;}
macht alle Links auf Seite Nr 28 grün, egal, welche Farbe sie sonst haben.
Ein Blick ins CSS "colors.css" zeigt, wie es geht. Keine Angst, das sieht schlimmer aus als es ist; ist nur Copy/Paste und ein paar Zahlen ändern.
Das handliche CMS WebsiteBaker