Design Workshop - Teil 5

Im letzten Teil haben wir den Inhalt für die linke Spalte, sowie das Modul "Kopftext" in unser Design eingebunden und so gestylt, dass es aussieht wie im Original. Nun wollen wir das Menü einbinden. Die Vorgehensweise ist dabei die gleiche wie bei dem Modul "Kopf-Text". Auch das Menü ist ein Papoo-eigenes Modul, das wir zunächst in das Design einbinden und es dann designtechnisch anpassen.

Gehen Sie in das Backend Ihrer lokalen Papoo-Installation und binden Sie das Modul "Navigationsmenü komplett" in die linke Spalte ein. Das Menü erscheint nun im Frontend direkt unter dem Modul "Kopf-Text" und ist auch voll funktionstüchtig; nur das Design stimmt noch nicht. Um das Design anzupassen, gehen wir im Prinzip genauso vor wir bei dem Modul "Kopf-Text". Zuerst ermitteln wir, wie das Originalmenü ausgezeichnet ist, suchen dann heraus, wo sich die Style-Auszeichnungen für das Papoo-Menü befinden und passen diese entsprechend an. Allerdings bietet sich hierbei eine etwas andere Arbeitsweise an:

Schauen Sie mal in die Datei "style.css" vom memoranda-Design. Sie finden hier einen Abschnitt mit der Überschrift /* Menu */. Dieser Abschnitt beschreibt das Originalmenü komplett. Sie sehen, dass das Originalmenü durch die ID "menu" repräsentiert wird und mit firebug finden Sie heraus, dass die ID, die das Papoo-Menü beschreibt, "mod_menue" heisst. Man könnte jetzt einfach in diesem Abschnitt alle strings "#menu" durch "#mod_menue" ersetzen und das Papoo-Menü würde fast genauso aussehen wie das Originalmenü. Doch dieses Vorgehen hätte zwei Nachteile: Erstens verliert das Originalmenü dadurch seine CSS-Anweisungen und damit sein Design, wir wollen es allerdings noch als Vorlage behalten, bis die Anpassungen an dem Papoo-Menü abgschlossen sind. Zweitens befinden sich in Papoo die CSS-Anweisungen für die Module in der Datei "module.css" und nicht in "style.css", und das wollen wir auch so beibehalten.

In der Datei "module.css" finden Sie einen Abschnitt "Navigations-Menü",  in dem alle Auszeichnungen für die ID "mod_menu" stehen. Sie können nun der Reihe nach

1. diesen Abschnitt (alle Auszeichnungen für "#mod_menue") komplett löschen;
2. den Abschnitt "Menu" (alle Auszeichnungen für "#menu" aus der Datei "style.css" in die Datei "module.css" kopieren;
3. in dem eben kopierten Abschnitt (und nur dort) alle strings "#menu" durch "#mod_menue" ersetzen.

Wenn Sie diese Schritte durchgeführt haben, sieht das Ergebnis im Browser wie folgt aus:

(Klick zum Vergrößern)

Zwei Dinge fallen auf: Zum einen ist über dem Menüpunkt "Startseite" ein weiterer, leerer Menüpunkt hinzugekommen. Zum anderen ist der aktive Menüpunkt noch nicht orange eingefärbt.

Der leere Menüpunkt stellt sich nach einer Untersuchung mit firebug als ein Anker mit der ID "menux" heraus. Dabei handelt es sich um einen Anker, der aus Gründen der Barrierefreiheit eingefügt worden ist, also nicht einfach gelöscht werden sollte. Wohl aber gibt es die Möglichkeit, bestimmte Elemente der Webseite optisch auszublenden. In der Datei "module.css" finden Sie bei Zeile 275 einen Abschnitt "Unsichtbare Elemente". Tragen Sie in die Zeile, wo schon einige ausgeblendete Elemente stehen, einfach noch ", #menux" am Ende ein, dann wird dieser "leere Menüpunkt" ausgeblendet.

Im Moment ist die Startseite der aktive Menüpunkt. Eine Untersuchung mit firebug ergibt, dass die Klasse, die den aktiven Menüpunkt auszeichnet, "menuxaktiv_back" heisst. Weiterhin finden Sie mit firebug heraus, dass die Klasse, die den orange hinterlegen Menüpunkt "Home" im Originalmenü auszeichnet, "current_page_item" heisst. Sie müssen nun also in der Datei "module.css" die CSS-Anweisungen der Klasse "current_page_item" auf die Klasse "menuxaktiv_back" übertragen.

Für die Klasse "menuxaktiv_back" sind noch gar keine Auszeichnungen vorhanden. Da das Design für den hover-Modus das gleiche sein soll wie für den aktiven Menüpunkt können Sie die entsprechenden Anweisungen zusammenfassen:

#mod_menue a:hover, #mod_menue .menuxaktiv_back {
           background: url(images/img05.jpg) no-repeat left top;
           text-decoration: none;
}

Die Auszeichnungen für "#mod_menue .current_page_item" können Sie löschen, da diese Klasse nicht von dem Papoo-Menü benutzt wird.

Wenn Sie die Seite nun wieder im Browser aufrufen, sieht alles augenscheinlich so aus, wie es soll. Doch leider nicht mehr, sobald Sie auf "Plugins" klicken:

Folgende Designfehler treten auf: Die Schrift ist zu dunkel und nach unten gerutscht, die Hintergrundbilder sind zu breit, der Abstand vom zweiten Unterpunkt nach unten ist zu gross und unter den Unterpunkten tritt eine nicht gewollte gestrichelte Linie auf. Eine Untersuchung der Unterpunkte mit firebug ergibt, dass diese von der Klasse "untermenu1" sind. Für diese Klasse sind in unserer Datei "module.css" noch gar keine Auszeichnungen vorhanden, der Einfachheit übernehmen wir erstmal die Auszeichnungen für die Hauptmenüpunkte und passen diese an.

Gehen Sie dazu in die Datei "module.css" und duplizieren sie die Anweisungen für die "#mod_menue a", also den folgenden Block:

#mod_menue a {
           display: block;
           width: 310px;
           height: 32px;
           margin: 0px;
           padding: 12px 0px 0px 30px;
           background: url(images/img06.jpg) no-repeat left top;
           text-decoration: none;
           text-transform: uppercase;
           font-family: Arial, Helvetica, sans-serif;
           font-size: 14px;
           font-weight: bold;
           color: #FFF;      
}

In dem duplizierten Block ersetzen Sie nun "#mod_menue a" durch "#mod_menue .untermenu1 a". Ein Reload der Seite zeigt, dass zumindest die Schrift schonmal weiss geworden ist; allerdings nicht im hover-Modus. Durch firebug findet man heraus, dass diese (falsche) Schriftfarbe durch die Auszeichnung "#sidebar li li a:hover" in der Datei "style.css" gegeben ist. Wenn Sie diese Auszeichnung löschen, ist die Schrift auch im hover-Modus weiss.

Für die restlichen Designfehler müssen wir wieder firebug bemühen. Sie haben mit firebug die Möglichkeit, einzelne CSS-Auszeichnungen temporär auszublenden. Dieses Feature eignet sich ganz gut, wenn man nicht weiss, welche Auszeichnung man verändern muss, um das gewünschte Resultat zu erzielen. Markieren Sie mit firebug mal den ersten Unterpunkt vom Menüpunkt "Plugins", "Kalender 1". In der rechten spalte können Sie jetzt mit dem Mauszeiger die einzelnen Style-Anweisungen abfahren.

(Klick zum Vergrößern)

Links neben dem jeweiligen Style-Element erscheint immer ein kleines graues "Verbotsschild" als Icon (im Screenshot ganz oben neben "color: # FFFFFF". Wenn sie auf dieses Verbotsschild klicken, wird das Style-Element deaktiviert und in unserem Fall wird dadurch die Schrift in den Untermenüpunkten grau. Derartige Veränderungen werden aber nicht in der zugehörigen Datei gespeichert!

Wir wollen nun aber nicht die Schrift grau haben, sondern sie in die richtige Position setzen. Hierfür verantwortlich ist ein anderes Auszeichnungselement, und zwar "line-height: 35px;" in der ID "sidebar". Wenn Sie dieses Element wie eben beschrieben ausblenden, sehen Sie, dass die Schrift in die richtige Position rutscht. Diese Auszeichnung müssen Sie also aus der Datei "style.css" entfernen. Während sie das machen, sehen Sie in der Datei nur eine Zeile tiefer die Auszeichnung "border-bottom: 1px dashed #C8B69B;". Diese können Sie gleich mit entfernen und beseitigen damit die gestrichelte Linie unter jedem Menüunterpunkt.

Als nächstes wollen wir uns darum kümmern, dass die Hintergrundbilder für die Menüunterpunkte die richtige Breite haben. Die Hintergrundbilder befinden sich im Verzeichnis "/styles/memoranda/css/images" und heissen "img05.jpg" (orange) bzw. "img06.jpg" (blau). Fertigen Sie von diesen beiden Dateien Kopien an und nennen Sie diese "img05a.jpg" bzw. "img06a.jpg". Mit firebug finden Sie heraus, dass die Schrift in den Unterpunkten des Menüs um 30 Pixel nach rechts verschoben ist - also auch die Hintergrundbilder. Kürzen Sie nun mit einem Bildbearbeitungsprogramm Ihrer Wahl die Kopien der Hintergrundbilder, die Sie eben angelegt haben von 310 auf 280 Pixel Breite. In der Datei "module.css" können Sie nun in der Auszeichnung für das Element "#mod_menue .untermenu1 a" den Dateinamen von "img06.jpg" auf "img06a.jpg" ändern. Damit haben die Hintergrundbilder für die inaktiven Untermenüpunkte schonmal die richtige Breite.

Der jeweils gerade aktive Untermenüpunkt sowie der hover-Modus sollen orange werden. Fügen Sie dazu folgendes in die Datei module.css ein:

#mod_menue .untermenu1 a:hover, #mod_menue .untermenu1 li .menuxaktiv_back {
           background: url(images/img05a.jpg) no-repeat left top;
}

Als weiteres Problem fällt auf, dass der Menüpunkt "Plugins" wieder blau wird, sobald man einen Untermenüpunkt auswählt. Das wollen wir aber nicht. Offensichtlich gibt es für dieses Zustand noch eine weitere Klasse, die wir noch nicht ausgezeichnet haben. Mit firebug finden wir heraus, dass diese Klasse "menuy_aktiv" heisst. ergänzen Sie also den Block in der Datei "module.css", der Elemente mit einem breiten orangenen  Hintergrundbild ausstattet wie folgt:

#mod_menue a:hover,      
#mod_menue .menuxaktiv_back, #mod_menue .menuy_aktiv {
           background: url(images/img05.jpg) no-repeat left top;
           text-decoration: none;
}

Zu guter Letzt müssen wir uns noch um den zu breiten Abstand nach dem letzten Untermenüpunkt kümmern. Markieren Sie dafür mit firebug das Element, welches das komplette Untermenü beinhaltet:

In der rechten Spalte von firebug sehen Sie den Eintrag "padding-bottom: 30px;" in Zeile 290. Entfernen Sie diesen Eintrag aus der Datei "style.css", un das Menü ist komplett gestylt. Jetzt können Sie noch den zugehörigen div-Block (also alles zwischen <div id="menu"> und dem daraufhin folgenden </div>) aus der Datei "__index.html", und damit das originale, statische Menü löschen.

Im nächsten Teil dieses Workshops werden wir dann das Suchfeld von Papoo designtechnisch so anpassen, dass es aussieht wie das originale Suchfeld aus dem memoranda-Design.