In diesem Tutorial werde ich euch am Beispiel des Angel Shops fw-angeln-pur.com zeigen wie man die unterschiedlichen Sektionen des Oxid eShop Themes „Basic“ grafisch den eigenen Wünschen bzw. dem Firmendesign des entsprechenden Unternehmens anpasst.

Übersicht der Bereiche die verändert werden:

  1. Änderung der Hintergrundfarbe vom Oxid Shop
  2. Oxid Shop Hintergrundbild einbinden
  3. Seitenabstand des Hauptteils vergrößern
  4. Service Box und Warenkorb im Header ausblenden
  5. Banner einbinden
  6. Hintergrundfarbe anpassen im Inhaltsbereich
  7. Hintergrundfarbe im Header ändern
  8. Obere Navigationsleite / Link-Leiste entfernen
  9. Kategorie Navigation Farbe anpassen
  10. Home Button Farbe ändern
  11. Alle orangenen Elemente anpassen
  12. Abstand zwischen Kategorie Navi und Hauptbereich anpassen
  13. Hintergrundfarben im Content Bereich ausblenden
  14. Pfad Leiste verkleinern
  15. Rechte Spalte nach oben verschieben
  16. Box-Überschrift Hintergrundfarbe anpassen (linke Spalte)
  17. Alle (anderen) hellgrauen Flächen anpassen
  18. Pfad-Leiste farblich anpassen und Abstände nach innen erzwingen
  19. Basic Template Artikel Box Hintergrundfarbe anpassen
  20. Basic Template Hintergrundfarbe anpassen rechte & linke Spalte
  21. Mein Konto & Newsletter Hintergrundfarbe anpassen
  22. Formularfelder anpassen
  23. Nach Marke / Hersteller anpassen
  24. Oxid Basic Template Buttons ändern
  25. Kategorie und Hersteller Auswahlfeld Farben und Größe ändern
  26. Willkommen Bereich Fehler ausbessern
  27. Angebot der Woche Box anpassen
  28. Hersteller Leiste ändern
  29. Partner und Siegel Bereich entfernen
  30. News Bereich entfernen & Warenkorb umpositionieren
  31. Schnäppchen Box Überschrift Farbe ändern
  32. Frisch eingetroffen Leiste anpassen
  33. Überschrift Kategorieboxen anpassen
  34. Stichworte / Tag Box anpassen
  35. Footer stylen
  36. Navi Unterkategorie Links ändern
  37. Kategorie Navi: Unterkategorie Hintergrundfarbe anpassen

1. Änderung der Hintergrundfarbe vom Oxid Shop

Wir suchen folgenden Code in der oxid.css Datei:

body {

background: none repeat scroll 0 0 #FFFFFF;

margin: 0;

padding: 0;

}

Noch sieht die Seite so aus, es wurde bisher garnichts verändert:

Oxid Basic Theme unverändert

wenn wir in der obersten Zeile den Farbcode #FFFFFF verändern bekommt die Oxid Seite eine andere Hintergrundfarbe. In diesem Beispiel werden wir einen Orange-Ton für den Hintergrund verwenden:

body {

background: none repeat scroll 0 0 #E97C2A;

margin: 0;

padding: 0;

}

nachdem wir den Code verändert haben sieht die Seite nun so aus:

oxid-basic-theme-hintergrundfarbe-aendern

2. Oxid Shop Hintergrundbild einbinden

Im nächsten Schritt werden wir den Code aus Punkt 1 etwas erweitern, um ein Hintergrundbild einzubinden. Vorher muss jedoch ein entsprechendes Bild auf unseren Server hochgeladen werden. Hierfür verwende ich das FTP Programm Filezilla und lade ein Bild mit dem Namen angel-shop-hintergrund.png auf den Server. Hierfür wähle ich den Ordner: out/basic/img – dort liegen auch alle anderen zum Design gehörigen Bilder. Im folgenden Beispiel wird das Bild nicht wiederholt (background-repeat), ist oben links in der Ecke (background-position) und fixiert (background-attachment).

Der neue Code mit Hintergrundbild sieht dann so aus:

body {

margin:0;padding:0;

background:#E97C2A;

background-image: url(‚../img/shop-hintergrund.png‘);

background-repeat: no-repeat;

background-position: top left;

background-attachment: fixed;

}

Und so sieht das Ergebis aus:

Oxid basic Theme Hintergrundbild

3. Seitenabstand des Hauptteils vergrößern

Damit der Shop nicht so zsammengedrückt aussieht werde ich als nächstes die Abstände des „page“ divs anpassen.

Der Code vor der Anpassung…

div#page {

background: none repeat scroll 0 0 #FFFFFF;

margin: 0 auto;

padding: 0;

position: relative;

width: 980px;

}

… und der Oxid Code nach der Anpassung

div#page {

background: none repeat scroll 0 0 #FFFFFF;

margin: 10px auto 0;

padding-left: 20px;

padding-right: 20px;

padding-top: 10px;

position: relative;

width: 980px;

}

Jetzt ist ein Innen-Abstand der Menüs nach rechts und links von 20px eingebunden, sowie ein Innenabstand von 10px nach oben und ein Außenabstand von 10px nach oben – damit die Seite nicht ganz oben im Browser „klebt“.

Das Ergebnis:

Oxid Basic Template mit vergrößrten Seitenabständen

4. Service Box und Warenkorb im Header ausblenden

Den Warenkorb des Oxid Basic Templates kann man zwar auch über den Admin Bereich ausblenden ( Erweiterungen -> Themes -> Basic -> Anzeige -> ), aber wo wir schonmal die style.css Datei geöffnet haben und auch in Zukunft nicht daran denken den Warenkorb im Header irgenwann mal wieder einzuschalten müssen wir uns dabei auch keine Gedanken machen. Die Seite sieht mit gefülltem Warenkorb vor der Modifikation so aus – im Header werden die Service Box und der Warenkorb angezeigt:

Oxid Basic Template Banner mit Service Box und Warenkorb

Um die Boxen auszublenden verändere ich folgenden Code:

div.bar.oxid dl.box {

margin: 0 0 1px 2px;

min-height: 98px;

min-width: 150px;

padding-bottom: 5px;

}

und ergänze es um die Zeile display: none; was dem Brwoser befiehlt, das Element auszublenden.

so sieht dann der neue Oxid Code aus:

div.bar.oxid dl.box {

margin: 0 0 1px 2px;

min-height: 98px;

min-width: 150px;

padding-bottom: 5px;

display: none;

}

und so das Ergebnis auf dem Bildschirm:

Basic Template Service Box und Warenkorb ausblenden

Zum Vergleich könnt ihr euch das Bild aus Punkt 1 noch einmal anschauen.

5. Banner einbinden

Um den Shop grafisch so gut wie möglich an die eigentliche Webseite des Shops anzupassen ist es in diesem Beispiel notwendig einen Banner einzubinden, der über die ganze Breite des Shops geht. Durch das Ausblenden der Boxen (s Punkt 4) steht dem nun nichts mehr im Weg. Ich lege einen Banner im png Format an und nenne ihn logo.png im img Ordner des Basic Templates wird dort nun die eigentliche Datei mit dem neuen Banner überschrieben.

So sieht die Seite jetzt aus:

Oxid Basic Template Banner austauschen

6. Hintergrundfarbe anpassen im Inhaltsbereich

Im Folgenden werde ich die weiße Hintergrundfarbe des page divs löschen und gegen ein halbtransparentes Bild austauschen. Hierfür gehe ich wieder zum page div Code und füge dort ein Hintergrundbild ein. Zusätzlich lösche ich die alte Hintergrundfarbe, so dass der Hintergrund nicht mehr einfach weiß ist sondern eine halbtransparente weiße Ebene. Das verleiht der Seite einen etwas edleren Look. Es müssen jedoch später noch ein paar Elemente angepasst werden. (siehe folgende Punkte)

Natürlich müssen wir auch vorher noch ein Bild hochladen um es später im Code zu verlinken. Ich nenne das Bild shop-hintergrund-page.png und lege es wie gewohnt im img Order des Templates ab.

Alter Code

div#page {

background: none repeat scroll 0 0 #FFFFFF;

margin: 10px auto 0;

padding: 10px 20px 0;

position: relative;

width: 980px;

}

Neuer Code:

div#page {

background: url(„../img/shop-hintergrund-page.png“) repeat scroll 0 0 transparent;

margin: 10px auto 0;

padding: 10px 20px 0;

position: relative;

width: 980px;

}

Hier das aktuelle Ergebnis in unserem Oxid Shop System mit dem Basic Template als Grundlage:

Oxid Basic template page div Hintergrund

7. Hintergrundfarbe im Header ändern

Damit unser neu angelegter halbtransparenter besser zur Geltung kommt werde ich die Hintergrundfarbe im Header entfernen oder um gena zu sein entfernen.

Das ist die alte Version des Codes:

div#header {

background: none repeat scroll 0 0 #FFFFFF;

clear: both;

}

Und so sieht die neue Version aus, ich habe einfach nur das #FFFFFF entfernt:

div#header {

background: none repeat scroll 0 0 transparent;

clear: both;

}

Das alleine verändert noch nichts, es muss zusätzlich auch noch ein weiterer Bereich „entfärbt“ werden.

Der alte Code so sah so aus:

div.bar.oxid {background:#ffffff;}

}

Der neue Code sieht so aus:

div.bar.oxid {

background: none;

}

Das Ergebnis sieht so aus:

Basic Template Header Hintergrundfarbe anpassen

8. Obere Navigationsleite / Link-Leiste entfernen

In der oberen Navigationsleiste werden die Links zum Impressum und den AGB angezeigt, außerdem hat man hier die Auswahlbuttons für die unterscheidlichen Währungen. Die Links zum Impressum und den AGB hat man zusätzlich auch im Footer – also weg damit. Auch die Links zu den Währungen können bei Bedarf an anderer Stelle wieder eingefügt werden.

Hierfür ändere ich folgenden Code in der oxid.css:

div.bar.links {background:#e2e2e2;border-bottom:1px solid #ffffff;}

un die Version umt:

div.bar.links {background:#e2e2e2;border-bottom:1px solid #ffffff; display: none;}

und bekomme folgendes Ergebnis geliefert:

Basic Template obere Navigationsleiste ausblenden

9. Kategorie Navigation Farbe anpassen

Die Farbe der Kategorie Navigation wird vom div.bar.categories div gesteuert.

Code vorher:

div.bar.categories { background:#fc6634; border-bottom: 1px solid #ffffff;}

Code nachher:

div.bar.categories { background:#E97C2A; border-bottom: 1px solid #ffffff;}

Ergebnis:

Kategorie Navi Farbe anpassen

10. Home Button Farbe ändern

Die Home Button Farbe, ganz Links in der Kategorie Navi, muss beim Basic Template noch einmal gesondert geändert werden.

Alter Code:

div.bar.categories a.fixed { padding: 10px 0; text-align: center; background-color: #fc6634;color:#ffffff;}

Neuer Code:

div.bar.categories a.fixed { padding: 10px 0; text-align: center; background-color: #E97C2A; color:#ffffff;}

Das Ergebnis:

Home Link Farbe ändern

11. Alle orangenen farbenen Elemente anpassen

Da wir nun wissen mit welcher Farbe wir das ursprüngliche orange aus dem Basic Template ersetzen wollen können wir nun in der kompletten oxid.css Datei folgenden Farbcode #fc6634 ersetzn mit unserem eigenen Farbton: #E97C2A.

An dieser Stelle werde ich nicht zu jeder einzelnen Änderung ein Screenshot einfügen. Vollständigkeitshalber ist hier jedoch die Liste der Stellen in der oxid.css Datei, die geändert werden müssen:

dl.box.open dd.dropdown ul li a:hover{background-color:#fc6634;color:#ffffff;background-position:0 -75px;}

dl.box.open dd.dropdown ul li a:hover{background-color:#fc6634;color:#ffffff;background-position:0 -75px;}

dl.box.basket.open dt {background-color:#fc6634;}

dl.box.basket.open dd.dropdown ul li a:hover{background-color:#fc6634;color:#ffffff;}

div.bar.links a.currency.act{color:#fc6634;}

div.bar.links.single{background:#fc6634;}

div.bar.categories ul.menue.vertical li a:hover { background-color:#fc6634;color:#ffffff;}

div.bar.copy{ height:13px;background:#fc6634;border-top:2px solid #ffffff;color:#ffffff;padding:5px 10px 5px 200px;}

ul.tree li a.act{background-color:#fc6634;color:#ffffff;}

#body .box ul.list li a:hover{text-decoration: underline;color:#fc6634;}

#body div.bar.prevnext input {background:#fc6634;color:#ffffff;border:1px solid #e2e2e2;cursor:pointer;font-size: 11px;font-weight:bold;padding:5px 35px;margin:0;line-height: 1.1em;}

#body .locator a.active {font-weight: bold; color: #fc6634;}

#body .product.head.topshop strong.h4{color:#555555;border-color:#fc6634;}

#body .product.head.topshop{border-color:#fc6634}

#body .product.details .exturls a{color:#fc6634;font-size:10px;margin-right:1em;}

#body .product.moredetails .longdesc .question a {font-size: 10px; font-weight: bold; color:#fc6634;}

#body div.bar.prevnext .arrowdown input {background: url(bg/oxid_ce_.gif) no-repeat 15px -342px; background-color: #fc6634; padding-left: 38px; padding-right: 25px;}

#body div.bar.prevnext .arrowright input {background: url(bg/oxid_ce_.gif) no-repeat 15px -318px; background-color: #fc6634;}

#body .account_header dt a.active{color: #fc6634;}

Mit dieser Änderung wird die Änderung, wie man sieht, an zahlreichen Stellen auf einmal geändert. Viele davon sieht man erst bei der Bestellung oder wenn man mit der Maus über einen Link geht. Wer nicht will dass sein Shop nach einen 08/15 Shop con der Stange aussieht sollte sich die Zeit dazu nehmen.

So sieht die Startseite nach der Massen-Veränderung aus:

Basic Template Primärfarbe

12. Abstand zwischen Kategorie Navi und Hauptbereich anpassen

Hier verändere ich den Abstand zwischen der Kategorie Navigationsleiste und dem Hauptbereich unseres Oxid eShops. Nebenbei habe ich auch noch die untere Rahemnfarbe angepasst dor vorher weiß war und dann noch einen oberen Rahmen in der selben Farbe angelegt.

Alter Code:

div.bar.categories { background:#E97C2A; border-bottom: 1px solid #ffffff; }

Neuer Code:

div.bar.categories { background:#E97C2A; border-bottom:1px solid #E97C2A; border-top:1px solid #E97C2A; margin-bottom:18px;}

Das Ergebnis der Anpassung:

Oxid Basic Abstand zwischen Navi und Content

13. Hintergrundfarbe im Content Bereich ausblenden

Als erstes suchen wir folgenden Code – :

div#content { clear:both; background:url(bg/bd_ce_.gif) repeat-y;}

und machen das hier daraus:

div#content { clear:both;}

Das Ergebnis:

Hintergrund raus im Content Bereich 1

14. Pfad-Leiste verkleinern

Damit die Seite noch etwas sauberer aussieht werde ich die Pfad Leiste in der Breite verkleinern um dann im nächsten Schritt den rechten Balen nach oben zu verschieben.

Alter Code:

div#path { margin:0 0 0 195px;background:#ffffff;padding:15px 0 0 0;border-bottom:1px solid #e2e2e2;color:#555555;}

Neuer Code:

div#path { margin:0 0 0 195px;background:#ffffff;padding:15px 0 0 0;border-bottom:1px solid #e2e2e2;color:#555555; width:570px;}

Ergebnis:

Basic Template Pfadleiste verkleinern

15. Rechte Spalte nach oben verschieben

Um die aus dem letzten Punkt resultierende Lücke zu schließen bedarf es einer Verschiebung des rechten Balkens um 29px nach oben. Das wird dann so gemacht:

Alter Code:

div#right { float:right; width:204px;background:#ffffff;}

Neuer Code:

div#right { float:right; width:204px;background:#ffffff; margin-top:-29px;}

Ergebnis:

Oxid Basic Template rechte Spalte nach oben verschieben

16. Box-Überschrift Hintergrundfarbe anpassen (linke Spalte)

Da das staubige grau nicht wirklich ins Farbkonzept passt, wird es nun gegen ein helles beige ausgetauscht. Ebenso wird die Schiftfarbe weiß gemacht.

Alter Code:

#left strong.h2{background:#e2e2e2;padding:10px 5px 5px;margin:0;color:#555555;}

Neuer Code:

#left strong.h2{background:#DB9A69;padding:10px 5px 5px;margin:0;color:#ffffff;}

Ergebnis:

Basic Template Box Überschrift Hintergrundfarbe ändern

17. Alle anderen hellgrauen Flächen anpassen

Ich gehe jetzt ähnlich wie bei Punkt 11 hin und suche mir alle hellgrauen Stellen raus und tausche die Farbe gegen das beige aus Punkt 16 aus. Oder anders gesagt: Ich tausche jetzt in der kompletten oxid.css Datei jedes #e2e2e2 gegen ein #db9a69 aus. Hier ist die Liste der veränderten Stellen (bevor sie verändert wurden):

div#left { float:left; width:180px;background:#ffffff;border-right:4px solid #e2e2e2;}

dl.box {background:#ffffff;border:1px solid #e2e2e2;width:150px;}

dl.box dt {background:#e2e2e2;color:#555555;}

dl.box.open dd.dropdown ul li a { display:block;padding:0 5px 0 15px; line-height: 20px; text-decoration: none;background:#e2e2e2 url(bg/oxid_ce_.gif) 0 -50px no-repeat;color:#555555;}

dl.box.basket{background:#ffffff;border-color:#e2e2e2;}

dl.box.basket dt {background:#e2e2e2;}

dl.box.basket.open dd.dropdown ul li a{background-color:#e2e2e2;color:#555555;}

div.bar.links {background:#e2e2e2;border-bottom:1px solid #ffffff; display:none; }

div.bar.links.single a.act{color:#e2e2e2;}

div.bar.categories a.fixed:hover { background-color: #e2e2e2;color:#555555;text-decoration: none; }

div.bar.categories li.open a, div.bar.categories li a.exp{ background-color: #e2e2e2;color:#555555;text-decoration: none; }

div.bar.categories ul.menue.vertical li a { text-align:left;padding: 7px 10px; background: #e2e2e2;color:#555555;font-weight: normal;}

#left ul.info li a {background:url(bg/oxid_ce_.gif) no-repeat right -250px; text-indent: 10px; color: #555555;display: block;padding:10px 0; border-bottom:1px solid #e2e2e2;}

ul.tree li a {background:#ffffff url(bg/oxid_ce_.gif) no-repeat right 500px;color:#555555;display:block;padding:10px 2px;border-top:1px solid #e2e2e2;}

ul.tree li a.root{text-indent:15px;padding-right:0;background-position:0 -175px;font-weight: bold;border-color:#e2e2e2;}

#right strong.h2{position:relative;border-left:4px solid #e2e2e2;background:#e2e2e2;padding:10px 5px 5px;margin:0;color:#555555;}

#right div.box {border-left:4px solid #e2e2e2;padding:7px 10px;}

#right div.forms strong.h2 {background-color: #e2e2e2;color:#555555;border-left-color:#e2e2e2;}

#right div.forms div.box{border-left-color:#e2e2e2;background-color:#ffffff;}

#right .listitem .picture{position: absolute; display: block; left: 0; top: 0; width: 56px; height: 42px; text-align:center; background: #ffffff; border: 1px solid #e2e2e2;}

#right .listitem.rightlist {border-bottom: 1px solid #e2e2e2; height:auto;}

#body div.bar.prevnext {background-color:#e2e2e2; border:1px solid #555555;margin:5px;padding:0;height: 27px; float: left; width: 568px;}

#body div.bar.prevnext input {background:#E97C2A;color:#ffffff;border:1px solid #e2e2e2;cursor:pointer;font-size: 11px;font-weight:bold;padding:5px 35px;margin:0;line-height: 1.1em;}

#body .locator .lochead {background: #e2e2e2; color: #555555; padding: 8px .6em; height: 1.1em;}

#body .product.head strong.h4.thin{width: 549px;border-color:#555555;;color:#555555;background:#e2e2e2;padding:1px 5px 8px 7px;}

#body .product.head strong.h4.thinest{width: 556px;border-color:#555555;color:#555555;background:#e2e2e2;padding:1px 5px 8px 7px;}

#body .product.details strong.h4 {border-color:#555555;color:#555555;background:#e2e2e2;padding:1px 5px 8px 7px; display: block;}

#body .product.details a.sbookmarks {border-right:1px solid #e2e2e2; height: 20px; display:block; float:left; padding: 0px 3px 0px 3px; margin: 0px;}

#body .product.moredetails .morepics{margin-top: 10px; padding: 5px 0; height: 44px; border-top: 1px solid #e2e2e2; }

#body .product.moredetails .morepics a{border: 1px solid #e2e2e2; width: 56px; height: 42px; margin: 0 11px 0 2px; float: left;}

#body .product.moredetails .longdesc {margin-top: 10px;padding: 15px 0 0; border-top: 1px solid #e2e2e2; line-height: normal;}

#body .product.moredetails .longdesc .question {margin: 10px 0 1px; padding-top: 11px; border-top: 1px solid #e2e2e2;}

#body .box .attributes td{border-bottom:1px solid #e2e2e2;font-size:10px;padding:.5em 0}

#body .box .pricealarm {border-top:1px solid #e2e2e2;}

#body .box .guestbook .head td {border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 5px 0; color: #555555;}

#body .box.compare table.cmp_tbl td, #body .box.compare table.cmp_tbl th {font-size: 10px; padding: 3px 6px 3px 6px; border-left:1px dotted #e2e2e2; border-bottom:1px dotted #e2e2e2;}

#body .ordersteps dl {width: 102px; height: 63px; padding: 3px; margin: 0 5px 0 0; float:left; border: 1px solid #555555; background: #e2e2e2; color: #555555;}

#body .basket .bsk_sep .line {border-bottom: 1px solid #e2e2e2;}

#body .basket .bsk_sep .bigline {border-bottom: 4px solid #e2e2e2;}

#body .basket .picture {border: 1px solid #e2e2e2; background: #ffffff; text-align: center; display: block; height: 42px; width: 56px;}

#body dl.orderinfocol dt {padding:0; margin: 0 0 5px 0; height: 23px; font-weight: bold; border-bottom: 1px solid #e2e2e2;}

#body .wrapping .wrp_sep .line {border-bottom: 1px solid #e2e2e2;}

#body .wrapping .picture {border: 1px solid #e2e2e2; background: #ffffff; text-align: center; display: block; height: 42px; width: 56px; margin-left: 5px;}

#body .morecats dt {background: #e2e2e2; border-bottom: 1px solid #ffffff;}

#body .morecats dd {background: #e2e2e2; border-bottom: 1px solid #ffffff; margin: 0; padding: 0;}

#body .account_header dl{border-bottom: 1px solid #e2e2e2; margin: 2px 0; padding-bottom: 5px; width: 97%;}

div.on.popup input {color:#555555;background:#e2e2e2;border:1px solid #555555;font-weight: bold;padding:2px;width:130px;}

#zoom {padding:0;overflow:auto;min-width:250px;min-height: 150px;background:#e2e2e2;border-color:#000000;}

#zoom a{display:block;padding:5px;background:#e2e2e2;width:20px;text-align: center;border:1px solid #555555;color:#555555;font-weight: bold;}

#body .msg{ float:left;width:548px;color: #000000;background: #ffffff;border: 1px solid #e2e2e2;margin: 0 5px 10px 5px;padding: 5px 10px;}

und dann bin ich nochmal hingegangen und habe die Textfarbe der Überschriften im rechten Balken auch weiß gemacht.

Alter Code:

#right div.forms strong.h2 a{color:#55555;}

Neuer Code:

#right div.forms strong.h2 a{color:#ffffff;}

Außerdem passe ich noch folgende Zeilen an, indem ich auch wieder die 555555 gegen ffffff austausche:

Alter Code:

#right strong.h2{position:relative;border-left:4px solid #db9a69;background:#db9a69;padding:10px 5px 5px;margin:0;color:#555555;}

#right strong.h2 a {text-decoration: none; color: #555555}

Neuer Code:

#right strong.h2{position:relative;border-left:4px solid #db9a69;background:#db9a69;padding:10px 5px 5px;margin:0;color:#ffffff;}

#right strong.h2 a {text-decoration: none; color: #ffffff}

Gesamtergebnis:

Alle grauen Bereiche anpassen Basic Template Oxid

18. Pfad-Leiste farblich anpassen und Abstände nach innen erzwingen

Alter Code:

div#path { margin:0 0 0 195px;background:#ffffff;padding:15px 0 0 0;border-bottom:1px solid #e2e2e2;color:#555555; width:570px;}

Neuer Code:

div#path { margin:0 0 0 195px;background:#DB9A69;padding:15px 0 0 0;border-bottom:1px solid #e2e2e2;color:#555555; width:570px;}

Ergebnis:

Pfad Leisten Hintergrundfarbe ändern

19. Basic Template Artikel Box Hintergrundfarbe anpassen

Um die Hintergrundfarbe der Artikelboxen anzupassen suchen wir folgenden Code raus:

#body .product.head.topshop{border-color:#E97C2A; background:#ffffff;}

und löschen die Hintergrundfarbe raus:

#body .product.head.topshop{border-color:#E97C2A}

Ergebnis:

Basic Template - Hintergrundfarbe Produkt Box ändern

20. Basic Theme Hintergrundfarbe anpassen rechte & linke Spalte

Um die Hintergrundfarbe der rechten und linken Spalte zu ändern sind folgende Codes zuständig:

div#left { float:left; width:180px;background:#ffffff;border-right:4px solid #db9a69;}

div#right { float:right; width:204px;background:#ffffff; margin-top:-29px;}

Dort lösche ich jetzt die Hintergrundfarbe der Elemente und dann sieht es so aus:

div#left { float:left; width:180px;border-right:4px solid #db9a69;}

div#right { float:right; width:204px; margin-top:-29px;}

Und so sieht das Ergebnis aus:

Hintergrundfarbe linke Spalte ändern

21. Mein Konto & Newsletter Hintergrundfarbe anpassen

Da hier noch ein weißer Hintergrunf zu sehen ist, wird dieser Code geändert:

#right div.forms div.box{border-left-color:#db9a69;background-color:#ffffff;}

Neuer Code:

#right div.forms div.box{border-left-color:#db9a69;}

Resultat:

Mein Konto und Newsletter anpassen - Basic template

22. Formularfelder anpassen

Damit die Formularfelder besser ins Bild passen, wird auch hier wieder die Hintergrundfarbe geändert bzw. in diesem Fall hinzugefügt.

Verwendeter Code:

input {color:#000;background:#DB9A69;}

Resultat:

Basic Template Formularfeld Hintergrund anpassen

23. Nach Marke / Hersteller anpassen

Alter Code:

ul.tree li a.root{text-indent:15px;padding-right:0;background-position:0 -175px;font-weight: bold;border-color:#db9a69;}

Neuer Code:

ul.tree li a.root{text-indent:15px;padding-right:0;background-position:0 -175px;font-weight: bold;border-color:#ffffff;background:#e97c2a;color:#ffffff;}

Ergebnis:

Basic Template - Nach Marke Hersteller ändern

24. Oxid Basic Template Buttons ändern

In diesem Beispel werde ich die Buttons der unterschiedlichen Formulare im Oxid Basic Template farblich unserem neuen Template anpassen. Es geht um die Buttons mit den runden Kanten – der Button ist zum Beispiel beim Suchfeld, in der Anmelde Box oder beim Newsletter zu sehen.

Für diese Änderung öffne ich die Datei out/basic/src/bg/buttons_ce_.gif in Photoshop und ändere die Farbe der Balken, die dort zu sehen sind. Ist das getan wird die Datei hochgeladen und die alte Version überschrieben und die Seite sieht danach so aus:

Oxid Basic Template Buttons ändern

25. Kategorie und Hersteller Auswahlfeld Farben und Größe ändern

Als erstes vergrößere ich das Eingabefeld

Alter Code:

#left .search input.txt {width:122px;margin-top:2px;padding:1px 0;}

Neuer Code:

#left .search input.txt {width:157px;margin-top:2px;padding:1px 0;}

dann verbreiter ich auch die Auswahlfelder für die Hersteller und Kategorien. Zusätzlich vergebe ich eine neue Hintergrund- und Textfarbe.

Alter Code:

#left .search select {width:126px;margin-top:2px;padding:1px 0;}

Neuer Code:

#left .search select {width:161px;margin-top:2px;padding:1px 0; background:#DB9A69;color:#fff;}

Als nächtes wird an dieser Stelle auch der GO Button vergrößert – so sieht dann alles einheitlicher aus.

Alter Code:

#left .search span.btn input {font-weight: bold;width:28px;text-align: center;}

Neuer Code:

#left .search span.btn input {font-weight: bold;width:157px;text-align: center;}

und als letztes füge ich noch einen Abstand des GO Buttons von 5px nach oben ein. Mehr sollte es nicht sein, da die Konfiguration auch für Buttons an anderen Stellen (z.B. Warenkorb) gültig ist.

Alter Code:

span.btn{background: transparent url(bg/buttons_ce_.gif) right -150px no-repeat;padding: 0 1px 0 0;height:18px;line-height:18px;display:-moz-inline-stack;display:inline-block;margin:0;outline:0;}

Neuer Code:

span.btn{background: transparent url(bg/buttons_ce_.gif) right -150px no-repeat;padding: 0 1px 0 0;height:18px;line-height:18px;display:-moz-inline-stack;display:inline-block;margin-top:5px;outline:0;}

Jetzt sieht die Artikelsuche-Box schon ganz anders aus. Hier ist das Ergebnis:

Oxid Basic Template Artikelsuche anpassen

So wenn wir auf der Startseite sind, sehen der Banner und die äußeren Balken schonmal ganz gut aus. Jetzt werde ich mich noch etwas um den Inhaltsbereich in der Mitte kümmern.

26. Willkommen Bereich Fehler ausbessern

Wie man sieht ist ein Fehler auf der Startseite. Der Text aus der Willkommen Box wird noch dadrunter angezeigt. Um das zu vermeiden füge ich den Befehl overflow:auto; ein. Dadurch wird alles was zu viel ist durch Scrollen auffindbar und zerprengt nicht mehr das Design. Außerdem habe ich das Feld etwas kleiner gemacht, damit die Scrollbar auch genug Platz hat. Dazu gibt es noch 8px padding (Innen-Abstand) damit der Text nicht am Balken klebt.

Alter Code:

#body .welcome {float:left;width:280px;height:157px;margin:0 5px 10px 5px;padding:0;}

Neuer Code:

#body .welcome {float:left;width:271;height:186px;margin:0 5px 10px 5px;padding-right:8px; overflow:auto;}

Le resultat:

Oxid Basic Template Willkommen Box ändern

Bei der Gelegenheit habe ich auch gleich mal einen passenden Text eingebunden. Das macht man im Admin Bereich beim Punkt Kuneninformationen -> CMS Seiten, aber das ist eine andere Bauchstelle.

27. Angebot der Woche Box anpassen

Alter Code:

#body .product.head strong.h4{margin:0;background:#ffffff; padding:8px 5px 1px 7px;height:20px; position:absolute;top:-30px;left:-1px;border-top:1px solid #555555;border-left:8px solid #555555;border-right:1px solid #555555;width:259px;line-height:20px; font-size: 11px;font-weight: bold;color:#555555;}

Neuer Code:

#body .product.head strong.h4{margin:0;background:#E97C2A; padding:8px 5px 1px 7px;height:20px; position:absolute;top:-30px;left:-1px;border-top:1px solid #E97C2A;border-left:8px solid #E97C2A;border-right:1px solid #E97C2A;width:259px;line-height:20px; font-size: 11px;font-weight: bold;color:#fff; border-bottom:1px solid #E97C2A;}

Das war gerade der Header Bereich der Box und das hier passt den Rahmen der Hauptbox an:

Alter Code

#body .product.head {margin-top:30px;border-top:none;border-color:#555555;}

Neuer Code:

#body .product.head {margin-top:30px;border-top:none;border-color:#fff;}

Um das ganze abzurunden gebe ich noch den Bildern einen Rahemn von 1px Breite:

Alter Code:

img {border:none;}

Neuer Code:

img {border:1px solid #e97c2a;}

was wiederum bewirkt, dass bei den Bildern in der rechten Spalte ein zusätzlicher Rahmen angezeigt wird, den ich nicht haben will. Um das zu verhindern füge ich unter /* + layout - right */ folgenden Code ein:

#right img {border: none}

Das Ergebnis:

Oxid Basic Template Angebot der Woche Box ändern

28. Hersteller Leiste ändern

Die Hersteller Leiste sieht man wenn man auf der linken Seite aus „Nach Marke/Hersteller“ klickt, was dann so aussieht:

Nach Marke Hersteller weißer Hintergrund

Viel zu weiß… das wird jetzt also erst einmal geändert.

Alter Code:

ul.tree li a {background:#ffffff url(bg/oxid_ce_.gif) no-repeat right 500px;color:#555555;display:block;padding:10px 2px;border-top:1px solid #db9a69;}

Neuer Code

ul.tree li a {background:#ff9647 url(bg/oxid_ce_.gif) no-repeat right 500px;color:#000;display:block;padding:10px 2px;border-top:1px solid #db9a69;}

Danach sieht es so aus: Neue Hintergrund + Neue Textfarbe

Basic Template Hersteller Liste Hintergrundfarbe ändern

29. Partner und Siegel Bereich entfernen

Um den Partner und Siegel Bereich zu entfernen öffne ich die Datei: out/basic/tpl/_left.tpl und kommentiere folgenden Bereich folgendermaßen aus:

Oxid Basic Template Partnerbereich ausblenden

Ein Screenshot werde ich mir an dieser Stelle sparen – einfach den Partner & Siegel Bereich wegdenken.

30. News Bereich entfernen & Warenkorb umpositionieren

Der News Bereich ist gleich über dem Partner und Siegel Bereich und wir auf die gleiche Art auskommentiert:

[{* NEWS BEREICH AUSGEBLENDET

[{if $oxcmp_news && count($oxcmp_news) > 0}]

[{include file=“inc/cmp_news.tpl“}]

[{/if}]

NEWS BEREICH AUSGEBLENDET *}]

Da es jetzt ein wenig leer aussieht nehme ich zumindest den Warenkorb schonmal nach rechts rüber. Das geht im Admin Bereich unter: Erweiterungen -> Themes -> Basic -> Anzeige

Hier muss ich noch kurz die Überschrift Farbe folgendermaßen anpassen:

Alter Code:

#left strong.h2 a {text-decoration: none; color: #555555;}

Neuer Code:

#left strong.h2 a {text-decoration: none; color: #fff;}

Das Resultat:

Oxid basic Theme Warenkorb umpositionieren

31. Schnäppchen Box Überschrift Farbe ändern

Die Schrift ist noch grau und wird jetzt weiß gemacht.

Alter Code:

#body .product.head.topshop strong.h4{color:#555555;border-color:#E97C2A;}

Neuer Code:

#body .product.head.topshop strong.h4{color:#fff;border-color:#E97C2A;}

So sieht`s aus:

Basic Theme Schnäppchen Box Überschrift

32. Frisch eingetroffen Leiste anpassen

Um die „Frisch eingetroffen“ Leiste anzupassen suchen wir folgende Code heraus:

#body strong.head2 {margin:0 5px 10px 5px;background: #ffffff;color:#555555;border:1px solid #555555;border-left-width:8px;float:left; width:549px;padding:8px 6px;}

Neuer Code mit orangenem Hintergrund + Rahmen und weißem Text:

Oxid Basic Frisch eingtroffen Leiste anpassen

33. Überschrift Kategorieboxen anpassen

Um die Überschrift Farbe der Kategorieboxen anzupassen passe ich folgenden Code an:

#body a{font-size: 11px; text-decoration: none; color: #555555;}

#body a:hover{text-decoration: underline; color: #fc6634;}

Neue Version:

#body a{font-size: 11px; text-decoration: none; color: #fff;}

#body a:hover{text-decoration: underline; color: #000;}

So siehts`s danach aus:

Basic Theme Kategoriebox Überschrift anpassen

34. Stichworte Box anpassen

Ich nehme die Hintergrundfarbe raus, gebe dem Rahmen eine neue Farbe und mache noch den Header Hintergrund orange.

Hier ein Screenshot vor der Anpassung:

Kategorieboxen Hintergrund und Rahmen anpassen

Alter Code (Header):

#body .boxhead {margin:0 5px;background:#ffffff; padding:6px 5px 6px 7px;height:20px;border-top:1px solid #555555;border-left:8px solid #555555;border-right:1px solid #555555;line-height:20px; font-size: 11px;font-weight: bold;color:#555555;width:549px;float:left;position:relative;

}

Neuer Code:

#body .boxhead {margin:0 5px;background:#e97c2a; padding:6px 5px 6px 7px;height:20px;border-top:1px solid #e97c2a;border-left:8px solid #e97c2a;border-right:1px solid #e97c2a;line-height:20px; font-size: 11px;font-weight: bold;color:#fff;width:549px;float:left;position:relative;}

Alter Code (Tag Box Inhalt):

#body .box{border:1px solid #555555;border-top:none;padding:8px 6px;margin:0 5px 10px;width:556px;float:left;background:#ffffff;}

Neuer Code:

#body .box{border:1px solid #fff;border-top:none;padding:8px 6px;margin:0 5px 10px;width:556px;float:left;}

Das Resultat:

Oxid Basic Theme Kategoriebox stylen

35. Footer stylen

Um den Footer zu stylen bearbeiten wir folgenden Code:

div#footer { clear:both; background:#ffffff;}

wo wir schonmal die Hintergrundfarbe entfernen:

div#footer { clear:both;}

dann nehmen wir uns dieses Stück Code vor und entfernen wieder die Hintergrundfarbe. Außerdem wird hier die Farbe der Balken zwischen den Links definiert. Ich entscheide mich für schwarz.

Alter Code:

div.bar.shop{ background:#ffffff;color:#555555;padding:8px 190px 10px 180px;text-align: center;}

Neuer Code:

div.bar.shop{ color:#000;padding:8px 190px 10px 180px;text-align: center;}

Hier wird die Farbe der Links im Footer angepasst:

div.bar.shop a{color:#555555;margin:0 7px;}

neuer Code:

div.bar.shop a{color:#68030f;margin:0 7px;}

Hier werde ich die Bilder im Footer ausblenden (Visa Card & Oxid Logo):

#footer .shopicons {padding: 0 150px;}

Neuer Code:

#footer .shopicons {padding: 0 150px; display:none;}

und als letztes entferne ich noch die Zeile ganz unten wo „OXID Online Shop – Alles rund um das Thema Wassersport, Sportbekleidung und Mode“ steht.

Alter Code:

#footer .footertext {text-align: center; font-size: 10px; padding: 5px 0; clear: both;color:#555555;}

Neuer Code:

#footer .footertext {text-align: center; font-size: 10px; padding: 5px 0; clear: both;color:#555555; display:none;}

Das Ergebnis:

Oxid Basic Template Footer Bearbeiten

36. Navi Unterkategorie Links ändern

Zuerst ändern wir die Linkfarbe der Hauptkategorie, wenn wir sie ausgewählt haben, so dass eventuelle Unterkategorien dadrunter aufgeklppt werden. Noch ist die Farbe grau bzw #555555 ich ändere das in schwarz bzw. #000

alter Code:

div.bar.categories li.open a, div.bar.categories li a.exp{ background-color: #db9a69;color:#55555;text-decoration: none; }

neuer Code:

div.bar.categories li.open a, div.bar.categories li a.exp{ background-color: #db9a69;color:#000;text-decoration: none; }

dann passe ich noch die Farbe der aufgeklappten Unterkategrien an, was hier passiert:

Alter Code:

div.bar.categories ul.menue.vertical li a { text-align:left;padding: 7px 10px; background: #db9a69;color:#555555;font-weight: normal;}

Neuer Code:

div.bar.categories ul.menue.vertical li a { text-align:left;padding: 7px 10px; background: #db9a69;color:#000;font-weight: normal;}

Ergebnis:

Unterkategorie Link Farbe

37. Kategorie Navi: Unterkategorie Hintergrundfarbe anpassen

Um die Hintergrundfarbe der Unterkategorie Links anzupassen ist folgendes Stück Code anzupassen. Normalerweise ist die Hintergundfarbe an dieser Stelle hellgrau doch ich hatte bei Punkt 17 diese Fläche bereits umgefärbt. Deswegen sieht bei mir an dieser Stelle der „alte“ Code so aus:

Aufgeklappte Unterkategorien:

div.bar.categories ul.menue.vertical li a { text-align:left;padding: 7px 10px; background: #db9a69;color:#000;font-weight: normal;}

Neuer Code:

div.bar.categories ul.menue.vertical li a { text-align:left;padding: 7px 10px; background: #FF9647;color:#000;font-weight: normal;}

Damit es komplett rund ist, ist an dieser Stelle auch die Hintergrundfarbe der aktivierten Oberkategorie, dessen Unterkategorien gerade anzeigt werden, anzupassen. Ich vergebe hier den selben Farbton, wie den aufgeklappten Unterkategorien.

Alter Code:

div.bar.categories li.open a, div.bar.categories li a.exp{ background-color: #db9a69;color:#000;text-decoration: none; }

Neuer Code:

div.bar.categories li.open a, div.bar.categories li a.exp{ background-color: #FF9647;color:#000;text-decoration: none; }

ach ja und der Home Button sollte natürlich auch noch einmal etwas angepasst werden.

Alter Code:

div.bar.categories a.fixed:hover { background-color: #db9a69;color:#555555;text-decoration: none; }

Neuer Code:

div.bar.categories a.fixed:hover { background-color:#FF9647;color:#000;text-decoration: none; }

Ergebnis:

Oxid Basic Template - Unterkategorie Link Hintergrundfarbe anpassen

Wenn man über den Home Button geht hat er jetzt die selbe Hintergrundfarbe.

38. Varianten Auswahl Box

Die Varianten Auswahl Box wird in grau angezeigt und hat anfangs keine festgelegte Hintergrundfarbe.

Alter Code:

#body .product.small .variants select{width: 123px;}

Neuer Code:

#body .product.small .variants select{width: 123px; background:#DB9A69;color:#fff;}

Ergebnis:

Produkt Varianten Auswahl Box Hintergrundfarbe

Somit wären wir fertig mit der Startseite. Jetzt müssen noch einige Änderungen in den diversen Unterseiten vorgenommen werden.

39. Kategorie Übersicht – Linkfarbe anpassen.

Um die Farbe der Links in der Kategorie Übersicht zu ändern ist folgende Zeile zuständig:

#body .morecats dl a {color:#555555; padding: 4px 10px; display: block;font-weight:normal;}

Ich entscheide mich für weiß:

#body .morecats dl a {color:#fff; padding: 4px 10px; display: block;font-weight:normal;}

Kategorie Übersicht Links

40. Kategorie Seite anpassen

Im Moment sieht die Kategorie Ansicht unseres Oxid Basic Templates noch so aus – es besteht noch ein gewisser Anpassungsbedarf:

Basic Template - Kategorieansicht - vorher

Zuerst ändere ich die Breite, Hintergrund- und Textfarbe der Auswahlboxen für den Einsatzbereich und Lieferumfang:

#body .box .catfilter select {margin: 3px; background:#FF9647; width:400px;}

Dann mache ich die Linkfarbe der Seitenzahlen weiß:

#body .locator .lochead {background: #db9a69; color: #fff; padding: 8px .6em; height: 1.1em;}

Passe die Rahmenfarbe der Seutenzahl Box an und gebe dem Text „Artikel pro Seite“ weiß als Farbe:

#body .locator {margin:0 5px 10px 5px; border:1px solid #E97C2A; color: #fff;float:left;width:568px;}

Anpassen der Textfarbe von „Seite 1 / 2“:

#body .locator .lochead strong.h4 {margin: 0; padding: 0; color: #fff; font-size: 11px; font-weight: bold; float: left;}

Rahmenfarbe der Produkt-Boxen von grau in orange ändern:

#body .product{border:1px solid #E97C2A;float:left;width:143px;height:147px;margin:0 5px 10px 5px;padding:5px 5px 5px 130px;position:relative;}

Fertig:

Oxid Basic Template Kategorie Seite neue Version

40. Warenkorb Seite anpassen

Jetzt ist die Warenkorb Seite des Oxid Basic Templates dran. Im Moment sieht die Seite noch so aus:

Warenkorb Seite Basic Template Oxid anpassen

So passe ich die Hintergrundfarbe der aktiven Box an und vergebe zusätzlich weiß als Rahmenfarbe:

#body .ordersteps dl.active {background:#E97C2A; border: 1px solid #FFFFFF;}

Hier passe ich die Text- und Rahmenfarbe der inaktiven Boxen an:

#body .ordersteps dl {width: 102px; height: 63px; padding: 3px; margin: 0 5px 0 0; float:left; border: 1px solid #68030f; background: #db9a69; color: #fff;}

Dann vergrößere ich die Höhe der „Weiter zum nächsten Schritt“ Leiste von 27 auf 29, da der Button überschwappt und gebe orange als Rahmenfarbe ein.

#body div.bar.prevnext {background-color:#db9a69; border:1px solid #E97C2A;margin:5px;padding:0;height: 29px; float: left; width: 568px;}

Der Hintergrund der Artikelübersicht Überschrift Box wird anpeggast – Text: weiß, Hintergrund: orange

#body .basket th {background: #E97C2A; color: #fff; font-weight: bold; height: 25px; padding-left: 6px;}

der linke Balken in der selben Box wird orange gemacht:

#body .basket th .brd_line {background: #E97C2A; width: 7px; height: 25px;}

hier wird der linke Rahmen entfernt der den orangenen überschrieben hat. Vorher wars 1 px.

#body .basket td.brd {border-left: 0px solid #555555;}

das selbe nochmal mit der Überschrift Box:

#body .basket th.brd {padding: 0;border-left: 0px solid #555555;}

Dann setze ich den entfernen Button 5px runter, der aktualisieren Button ist etwas weiter unten da wir span.btn auch einen Abstand von 5px nach oben gegeben haben. (Beim Bearbeiten des Artikelsuche Bereichs)

#body .basket .frombasket { height:18px;line-height:1;width: 100px; background: transparent url(bg/buttons_ce_.gif) no-repeat right -50px; margin-top:8px;; border: 0 none; padding:0 1px 0 0;float: left}

Durch eine vorige Modifizierung hat das Produktbild einen doppelten Rahmen. Diesen entferne ich indem ich in der oxid.css Datei unsres Oxid basic Templates diese Zeile hier einfüge:

#right img {border: none}

Den Code habe ich direkt unter folgende Zeile kopiert:

/* Basket */

So sieht das Ergebnis aus:

Oxid Basic Template Warenkorb Seite 1 - geändert

41. Warenkorb Schritt 2 anpassen

So sieht die Seite für den 2. Schritt im Warenkorb im Moment aus:

Warenkorb Schritt 2

Also werden wir den Überschriftbereichen erst einmal eine neue Hintergrund-, Rahmen- und Textfarbe geben, das mache ich so:

#body strong.useroptboxhead {margin:10px 5px 0;background: #E97C2A; padding:4px 5px 5px 7px;height:20px;border:1px solid #E97C2A;border-left:8px solid #E97C2A;border-right:1px solid #E97C2A;line-height:20px; font-size: 12px;font-weight: bold;color:#fff;width:162px; display: block;}

Jetzt bekommt der Hauptteil der Box einen weißen Rahmen:

#body .useroptbox {border:1px solid #fff; border-top: none; width:151px;height:310px;margin:0 5px 10px 5px;padding:5px 15px;position:relative; font-size: 12px;}

und hier ändere ich noch schnell die Textfarbe in der Box ganz links „Hinweis: …“

#body .useroptbox .errorMsg {color: #68030F;}

das war es auch schon und so sieht das Ergebnis aus:

Oxid Basic Template Warenkorb Schritt 2

Ist man angemeldet, muss man als nächstes die Versandadresse eingeben. Diese Seite sieht im Moment so aus:

Oxid Basic Template Versandadresse eingeben

Da färbe ich als erstes die Sternchen und das Wort „Hinweis“ ganz unten im Fenster:

.req {color:#68030f;}

und als letztes gebe ich dem Text der auf „Hinweis“ folgt auch noch die selbe Farbe:

.def_color_1 {color:#68030f;}

Die Änderung ist so gering, dass ich hier kein Screenshot einfügen werde. Wer sehen will wie es aussieht kann notfalls etwas im Angel Shop bestellen ;)

Auf Seite 3 des Warenkorbs (Bezahlen) unseres modifizierten Oxid Basic Templates bedarf es keiner weiteren Anpassungen, es sieht alles schon ganz gut aus.

Die 4. Seite (Bezahlen) muss gering angepasst werden.

Die graue Schrift muss geändert werden:

#body div.bar.prevnext .termsconfirm td {font-size: 10px; color: #68030f; padding: 3px 3px 3px 0;}

#body div.bar.prevnext .termsconfirm a {font-size: 10px; color: #68030f; text-decoration: underline;}

#body div.bar.prevnext .termsconfirm a:hover {color: #68030f; font-weigt:bold;}

Dier erste Zeile färbt den Text, die zweite den Link und die dritte den Link wenn man drübergeht.