Code Snippets für Design-Anpassungen

  1. Code Snippets für Design-Anpassungen
    1. Shop-Breite ändern / volle Fensterbreite nutzen
    2. Header-Höhe vergrößern
    3. Hintergrundbild für Header setzen
    4. Hintergrundfarbe ändern
    5. Kategorieabhängige Styles
    6. Kategoriebox: individuelle Styles für Kategorien
    7. Labels links neben Formularfeldern (anstatt über Formularfeldern)
    8. Kategorie-Box: aufgeklappt aber nur bis Unterkategorien
    9. Andere Bildgrößen im Shop einstellen

Die folgenden CSS-Codeschnipsel sind Beispiele für individuelle Anpassungen am Modi-Art-WAI Template.
Der Code wird idealerweise in die Datei css/custom.css eingetragen, um die eigenen Anpassungen vom Template-Code zu trennen.

Shop-Breite ändern / volle Fensterbreite nutzen

#outer_wrapper, #header, #footer { max-width:99%; }

Header-Höhe vergrößern

/* vergrößert den Header-Bereich */
#header_wrapper, #header { height:157px; }             
#wrapper { margin-top:157px; }                  
#header_wrapper { background-position:0px 30px; background-color: #fff; }
#header #searchbar { top:90px; }
#header #maincat { top: 60px; }

Hintergrundbild für Header setzen

Die Breite des Modi-Art-WAI Templates ist standardmäßig nicht auf eine feste Breite festgelegt, darum sollte das Hintergrund-Bild ausreichend breit sein (ca 1200px). Bei kleineren Auflösungen oder Fenster-Verkleinerung wird dann einfach der rechte Teil des Hintergrundes abgeschnitten. 

/* Background-Image für Header setzen */
#header { background: #fff url(../images/mein_hintergrundbild.jpg) top left no-repeat;

Hintergrundfarbe ändern

Standardmäßig ist der Hintergrund (rechts und links neben seitlichen Panels) hellblau eingefärbt. 

/* Hintergrund-Farbe vom Body setzen */
body { background-color: #fffff; }

Kategorieabhängige Styles

Bitte zuerst in der settings.conf (im Templateordner) die Einstellung body_class_categoryname auf 1 setzen.

Jetzt wird automatisch im Body-Tag (<body>) das Class-Attribut mit dem aktuellen Kategorienamen gesetzt (z.B. class="gummibaelle"). Kategoriename ist der Name aus der Breadcrumb, allerdings in Kleinschreibung und ohne Sonderzeichen. Beispiel: Für die Kategorie "Kinder & Jugendbücher" steht im xHTML-Dokument: <body class="kinderjugendbuecher">

In der custom.css können dann beliebige, kategorieabhängige Anpassungen vorgenommen werden, z.B. 

/* kategorieabhängiges Ausblenden der Kategoriebox */
.kinderjugendbuecher #sidebox_categories1 { display: none; }
/* kategorieabhaengiger Header */
.kinderjugendbuecher #header_wrapper { background-image: url(../images/head_bg_red.gif); }
.kinderjugendbuecher #header { background-image: url(../images/head_bg_red2.gif); }

D.h. die Styles z.B. aus der style.css können kategorieabhängig überschrieben werden, indem die entsprechende Zeile in die custom.css kopiert wird und ein .klassenname davor gesetzt wird.

Kategoriebox: individuelle Styles für Kategorien

Möchte man die Kategorien in der Kategoriebox individuell gestalten, z.B. mit einem Icon oder einer anderen Schriftfarbe, dann müssen diese Kategorien per CSS-Selektor angesprochen werden können. Im Modi-Art-WAI Template wird dazu das Kategorieattribut "css_klasse" im Template ausgewertet (in der functions.php) und in das <a>-Tag als Wert für die Eigenschaft "class" gesetzt.

Beispiel: Als Kategorieattribut in der Wawi css_klasse=kochen setzen und mit dem Shop synchronisieren, dann wird beim nächsten Seitenaufruf automatisch der folgende HTML-Code in der Kategoriebox ausgegeben: 

...<li class="node"><a class="kochen" href="#"><span>Kochen</span></a></li>...

Das Design der Kategorie kann nun z.B. mit der folgenden CSS-Regel angepasst werden: 

/* Individuelles Icon für Kategorie */
.categorybox a.kochen { background: transparent url(../images/icon_kochen.gif) top left no-repeat; }

Tipp: Der Code für Kategorieboxen (tpl_inc/sideboxes/sidebox_categories.tpl) kann auch für andere Zwecke wiederverwendet werden (z.B. Hauptkategorien als horizontale Reiter anzeigen). Auch hier lassen sich mithilfe des Kategorieattributs individuelle CSS-Regeln schreiben.

Labels links neben Formularfeldern (anstatt über Formularfeldern)

#content form label, .popup_box form label { display: block; width: 10em; float: left; text-align: right; margin-right: 0.4em; font-weight: bold; }
#content .city label, #content .country label, #content .lastname label { width: auto; }

Kategorie-Box: aufgeklappt aber nur bis Unterkategorien

Dieser Code blendet standardmäßig alle Unter-Unterkategorien aus. Erst wenn man eine Unterkategorie anklickt, dann werden deren Unter-Unterkategorien wieder aufgeklappt.
Voraussetzung: Kategoriebox aufklappen Einstellung ist in der settings.conf aktiviert. 

.categorybox .node .node a { display: none; }
.categorybox .node .active a { display: block; }

Andere Bildgrößen im Shop einstellen

Bei größeren Bildmaßen als die Standard-Bildmaße bitte folgende Werte überschreiben und an die neuen Bildmaße anpassen: 

/* Fix für IE6 und Artikelempfehlungen */
* html #recommendations .box .article_wrapper { height: 16em; }
/* Fix für IE7 und Artikelempfehlungen */
*+html #recommendations .box .article_wrapper { height: 18em; } /* IE7 Fix */

Attachments