Einleitung Dieses Tutorial entstand, um das doch sehr unauffällige Design der Breadcrumbs im EyeCandy-Template zu einem EyeCatcher umzugestalten. Das Tutorial wurde zwar für GX2 v.2.0.14.4 erstellt, sollte aber theoretisch ab der v.2.0.7 funktionieren, da ab dieser Version die verwendeten Möglichkeiten der Overloads eingeführt wurden. ACHTUNG: Die verwendeten Anweisungen funktionieren nur in moderneren Webbrowsern, die CSS3 unterstützen. Also Firefox ab Version 4, Internet-Explorer ab Version 9, Chrome ab Version 11, Opera ab Version 11.1, Safari ab Version 5. Die Darstellung in älteren Browsern kann stark abweichen. Ich übernehme keine Haftung für Ausfälle bei nicht fachgerechter Umsetzung! Im Zweifel buchen Sie lieber einen Installationsservice bzw. lassen Sie sich ein individuelles Angebot für eine Installation in einem bereits angepassten Shopsystem erstellen. Es empfiehlt sich, Tutorials immer zuerst in einer Testumgebung auszuprobieren und nicht direkt im Live-Shop! Heute möchte ich einmal kurz vorstellen, wie man im EyeCandy-Template von Gambio die Breadcrumb-Navigation aufwerten kann. Bisher fristet sie ja ein eher langweiliges Dasein. Dieses Tutorial bezieht sich auf die Shop-Version Gambio GX2 v.2.0.14.4! Es sollte aber mit evtl. nötigen, geringfügigen Anpassungen auf alle anderen Shopversionen ab 2.0.7. anwendbar sein. Zuerst schauen wir uns einmal an, wie die Breadcrumbs erstellt werden. Verantwortlich zeigt sich dafür die class „breadcrumb_ORIGIN“. Halt! Da war doch noch was? Richtig! Der Zusatz „_ORIGIN“ an eine Klasse in Gambio GX2 zeigt uns schon deutlich an, dass hier eine Klassenüberladung vorgenommen werden kann. Praktisch, da unsere Anpassung so updatesicherer wird. Wir öffnen also die Datei /includes/classes/breadcrumb.php in einem geeigneten Editor (z.B. Notepad++) und erstellen uns auf dieser Basis einen Overload. Dazu brauchen wir eine neue Datei, die ich skypc_breadcrumb.inc.php nenne und unter user_classes/overloads/breadcrumb abspeichere. Natürlich könnt ihr diese Datei auch meier_breadcrumb.inc.php nennen. Dann müsst ihr nur die Namensgebung der überladenden Klasse ebenfalls anpassen. Diese Datei bekommt nun folgendes Grundgerüst: PHP: <?phpclass skypc_breadcrumb extends skypc_breadcrumb_parent { var $_trail; }?> Die für uns interessante Ausgabe der Breadcrumbs wird in der Funktion „trail“ vorgenommen. Also kopieren wir uns diese Funktion in unsere erweiterte Klasse. Danach ändern wir noch die Zeile: PHP: $trail_string .= '<a href="' . $this->_trail[$i]['link'] . '" class="headerNavigation">' . $this->_trail[$i]['title'] . '</a>'; in PHP: $trail_string .= '<li><a href="' . $this->_trail[$i]['link'] . '">' . $this->_trail[$i]['title'] . '</a></li>'; Anschliessend löschen wir noch die folgende Zeile aus der Funktion: PHP: if (($i+1) < $n) $trail_string .= $separator; Jetzt sollten wir folgenden Inhalt der skypc_breadcrumb.inc.php haben: PHP: <?php class skypc_breadcrumb extends skypc_breadcrumb_parent { var $_trail; function trail($separator = ' - ') { $trail_string = ''; for ($i=0, $n=sizeof($this->_trail); $i<$n; $i++) { if (isset($this->_trail[$i]['link']) && xtc_not_null($this->_trail[$i]['link'])) { $trail_string .= '<li><a href="' . $this->_trail[$i]['link'] . '">' . $this->_trail[$i]['title'] . '</a></li>'; } else { $trail_string .= $this->_trail[$i]['title']; } } return $trail_string; } }?> Nun öffnen wir noch die index.html im Hauptverzeichnis des EyeCandy-Templates, suchen HTML: <div id="breadcrumb_navi"> <span>{$navtrail}</span> </div> und entfernen das überflüssige span-Element: HTML: <div id="breadcrumb_navi"> {$navtrail} </div> Wo wir schon einmal hier sind, bauen wir uns am Ende der head_toolbox noch ein Hilfskonstrukt. Dies entspricht zwar nicht dem Semantic Mark-Up, ist aber hier an dieser Stelle die einzige mir bekannte Möglichkeit eine Höhenanpassung für eine evtl. nötige 2. oder gar 3. Zeile der Breadcrumb-Navigation zu erreichen. Also fügen wir nach HTML: {$SHOPPING_CART_HEAD} </div> noch HTML: <div id="ghost"> </div> ein. Danach speichern wir das Ganze unter /templates/EyeCandy/index-USERMOD.html Damit haben wir die Ausgabe für eine weiter reichendere Gestaltung mit css vorbereitet. Zum einen entfällt nun die Ausgabe der „>>“ zwischen den einzelnen Punkten, zum anderen können wir nun jeden Punkt als Listenpunkt einzeln ansprechen. Im Moment wird es allerdings tatsächlich als untereinander stehende Liste mit einem Listenpunkt davor angezeigt. Das werden wir natürlich gleich schnell ändern. Zuerst erstellen wir eine neue CSS-Datei in dem Ordner templates/EyeCandy/usermod/css/ - ich habe meine breadcrumbs.css genannt. Die hier gemachten Angaben überschreiben die Standard-CSS. Bevor wir uns um die breadcrumb_navi kümmern, machen wir erst einmal ein paar ergänzende Angaben für die head_toolbox und schreiben folgendes in unsere Datei: Code: #head_toolbox { height: auto; } Damit setzen wir die Angabe zur Höhe auf auto, damit die head-toolbox bei einer 2. Zeile mitwachsen kann – dies ist wichtig, wenn man z.B. die Toolbox mit anderen Designelementen wie z.B. einem Hintergrund (der ja standardmäßig schon definiert ist) oder einem unteren Rahmen versehen möchte – sonst würde die zweite Zeile über diese Elemente herausragen. Danach fügen wir die Definition für unser Hilfskonstrukt hinzu: Code: #ghost { clear: both; height: 0px; } Für die Breadcrumb-Navigation nehmen wir folgende Einträge vor: Code: #breadcrumb_navi { float: left; height: auto; width: 550px; list-style-type: none; display: inline-block; padding-left: 5px; padding-bottom: 8px; } #breadcrumb_navi li { display: inline-block; } #breadcrumb_navi li a { display: inline-block; color: #fff !important; padding: 4px 5px 5px 20px; margin: 0; background: #333; background: hsla(0,0%,20%,20); position: relative; text-decoration: none; } #breadcrumb_navi li a:after { content: " "; display: inline-block; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 10px solid hsla(0,0%,20%,20); position: absolute; top: 50%; margin-top: -12px; left: 100%; z-index: 2; } #breadcrumb_navi li a:before { content: " "; display: inline-block; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 10px solid white; position: absolute; top: 50%; margin-top: -12px; margin-left: 1px; left: 100%; z-index: 1; } #breadcrumb_navi li:first-child a { padding-left: 5px; } #breadcrumb_navi li:nth-child(2) a { background: hsla(0,0%,25%,20); } #breadcrumb_navi li:nth-child(2) a:after { border-left-color: hsla(0,0%,25%,20); } #breadcrumb_navi li:nth-child(3) a { background: hsla(0,0%,30%,20); } #breadcrumb_navi li:nth-child(3) a:after { border-left-color: hsla(0,0%,30%,20); } #breadcrumb_navi li:nth-child(4) a { background: hsla(0,0%,35%,20); } #breadcrumb_navi li:nth-child(4) a:after { border-left-color: hsla(0,0%,35%,20); } #breadcrumb_navi li:nth-child(5) a { background: hsla(0,0%,40%,20); } #breadcrumb_navi li:nth-child(5) a:after { border-left-color: hsla(0,0%,40%,20); } #breadcrumb_navi li:nth-child(6) a { background: hsla(0,0%,45%,20); } #breadcrumb_navi li:nth-child(6) a:after { border-left-color: hsla(0,0%,45%,20); } #breadcrumb_navi li:nth-child(7) a { background: hsla(0,0%,50%,20); } #breadcrumb_navi li:nth-child(7) a:after { border-left-color: hsla(0,0%,50%,20); } #breadcrumb_navi li:nth-child(8) a { background: hsla(0,0%,55%,20); } #breadcrumb_navi li:nth-child(8) a:after { border-left-color: hsla(0,0%,55%,20); } #breadcrumb_navi li:nth-child(9) a { background: hsla(0,0%,60%,20); } #breadcrumb_navi li:nth-child(9) a:after { border-left-color: hsla(0,0%,60%,20); } #breadcrumb_navi li:last-child a { background: hsla(0,0%,10%,0) !important; color: #333 !important; margin-right: 20px; pointer-events: none; cursor: default; } #breadcrumb_navi li:last-child a:after { border: 0; } #breadcrumb_navi li:last-child a:before { border: 0; } #breadcrumb_navi li a:hover { background: hsla(0,0%,10%,20) !important; } #breadcrumb_navi li a:hover:after { border-left-color: hsla(0,0%,10%,20) !important; } Wie Sie sehen können, haben wir somit eine viel umfangreichere Definition erstellt. Als erstes unterbinden wir mit list-style-type: none die Anzeige der Punkte vor den Listeneinträgen. Da wir über die Klassenüberladung die Breadcrumb-Navigation ja jetzt als Liste definiert haben, brauchen wir in der CSS als nächstes einen passenden Eintrag zu den Listen. Also #breadcrumb_navi li. Dort definieren wir über display: inline-block, dass die Einträge nun nebeneinander und nicht mehr untereinander angezeigt werden. Die Ränder werden über die untergeordneten Links also durch den nächsten Eintrag #breadcrumb_navi li a definiert. Mit padding und margin setzen wir Werte für Innen- und Außenabstand. Als Textfarbe ein reines weiß wegen der Kontraste und der damit verbundenen Lesbarkeit. Hier brauchen wir ein !important als zusätzliche Angabe, da der Eintrag sonst durch eine höherrangige css-Klasse wieder überschrieben wird. Text-Dekoration setzen wir auf none, da wir verhindern wollen, dass der Text unterstrichen dargestellt wird. Mit den nächsten Pseudoklassen :after und :before gestalten wir nun den Pfeil über entsprechende Rahmenwerte. Die Breadcrumbs werden jetzt als Pfeile dargestellt und für bis zu 9 Listeneinträge haben wir einzeln über die Pseudoklasse nth-child die Farbe der Pfeile definiert, d.h. erst mit dem 10. Eintrag beginnt es wieder von vorn. Statt der html- oder rgb-Schreibweise bedienen wir uns der weniger verbreiteten hsla-Notation. Diese hat den Vorteil, dass wir damit ganz leicht für eine Grundfarbe unterschiedliche Helligkeitswerte angeben können. Somit ist es sehr einfach, den Pfeil von links nach rechts immer heller werden zu lassen. Die Farbwerte sind natürlich erst einmal auf die Farben eines unveränderten EyeCandy-Template abgestimmt und müssten von Ihnen evtl. entsprechend angepasst werden. Mit einigen Grundkenntnissen oder mit Hilfe einschlägiger CSS-Wikis im Internet und etwas Mut zum Ausprobieren kann man die Gestaltung beliebig in Größe und Farbe anpassen. Das letzte Element hat noch einmal eine gesonderte Definition über die Pseudoklasse last-child erhalten. Hier nehmen wir den Hintergrund komplett raus, so dass der letzte Pfeil auf das letzte Element weist. Zusätzlich unterbinden wir über „pointer-events: none“ ein Anklicken des letzten Elementes, da wir uns ja schon auf dieser Seite befinden und somit nicht mehr dorthin wechseln brauchen. Über :before und :after wird auch der Pfeil nach dem letzten Element durch border=0 deaktiviert. Über die Pseudoklasse :hover setzen wir noch eine dunklere Farbe für die Elemente, wenn man mit der Maus darüberfährt um ein visuelle Feedback zu geben, wo man sich gerade in der Brotkrümelnavigation befindet. Dieses Tutorial kann im Anhang auch als PDF heruntergeladen, sowie die fertigen Dateien als zip-Datei gepackt im Shop unter http://www.sky-pc.de/Software/Gambio-GX2/microModule-Breadcrumb.html kostenlos gedownloadet werden.