Wenn der Editor nicht ausreicht: Wie Sie mit CSS das Design Ihres ePages-Shops anpassen können - Teil 2

von Volker Schwarz, 01.11.11


Im ersten Beitrag zum Thema CSS haben wir Ihnen hier im ePages Blog gezeigt, wie Sie mit CSS Codes einzelne Elemente Ihres Shops manipulieren können und wie Sie den dazu benötigten Code herausfinden können. Diese Änderungen bezogen sich stets auf den gesamten Shop. Im zweiten Teil der Reihe zeigen wir Ihnen, wie Sie Änderungen per CSS nur für spezielle Seiten durchführen.

 

 

Haben Sie nach unserer Anleitung im ersten Blogbeitrag den richtigen Code herausgefunden, können Sie nahezu jedes Element in Ihrem Shop modifizieren, indem Sie den Code im Menü „Einstellungen -> Allgemeine Einstellungen -> Erweiterte Einstellungen“ einfügen. Doch diese Codes wirken sich stets auf den gesamten Shop aus.
Ein Beispiel: Blenden Sie also zum Beispiel per CSS-Code die linke Menüleiste aus, verschwindet Sie in Ihrem Shop, egal, auf welcher Seite Sie sich gerade befinden. Vielleicht aber möchten Sie das linke Menü nur auf der Startseite ausblenden, um mehr Platz für eine große Grafik auf der Startseite zu haben. Klickt ein Kunde dann auf eine Kategorie oder ein Produkt, soll die Menüleiste wieder angezeigt werden, damit etwa die Warenkorbvorschau angezeigt werden kann.
Wie kann dies erreicht werden?
Zunächst der passende Code, um die linke Menüleiste auszublenden:
<style type=”text/css”>
.NavBarLeft
{
display: none;
}
</style>
Würden wir diesen Code nun in den allgemeinen Einstellungen einfügen, würde die linke Menüleiste verschwinden. Das Problem: Der Contentbereich wird je nach gewähltem Template nicht nach links verschoben, so dass eine Lücke auf der linken Seite stehen bleibt.
Dies beheben wir, indem wir den Code entsprechend anpassen und dem Browser mitteilen, dass der Contentbereich auf der linken Seite keinen Außenabstand besitzen soll. Der Befehl dafür lauten „margin-left: 0px;“
Der CSS-Code sieht nun also so aus:
<style type=”text/css”>
.ContentArea
{
margin-left: 0px !important;
}
.NavBarLeft
{
display: none;
}
</style>
Das Ergebnis im Shop wird nun so aussehen:
Ausblendend der Menüleiste nur auf der Startseite
Gut, wir haben also den CSS-Code, der die Menüleiste ausblendet. Fügen wir ihn im Menü „Einstellungen-> Allgemeine Einstellungen > Erweiterte Einstellungen“ ein, wird dies im gesamten Shop passieren. Doch das wollen wir ja gar nicht. Das Menü soll lediglich auf der Startseite des Shops ausgeblendet werden, um so etwa Platz für eine großflächige Grafik zu machen.
Dazu müssen wir den Code also an anderer Stelle einfügen. Wechseln Sie in das Menü „Inhalt/Content“ und dort in die Datenblatt-Ansicht. Hier können Sie für jede einzelne Seite CSS-Code einfügen und diesen dann nur für diese Seite wirken lassen. Da wir ja die Startseite modifizieren möchten, wechseln wir direkt auf den Reiter „Allgemein“.
Im Feld „Erweiterte Beschreibung“ tragen wir unseren CSS-Code ein. Wichtig: Nutzen Sie dafür nicht den Editor, sondern direkt das Eingabefeld.
Nun noch einmal speichern und den Seiten-Cache aktualisieren. Fertig, Sie haben erfolgreich auf der Startseite die linke Menüliste ausgeblendet.

Über den Autor


studierte Germanistik, Geschichte und Politik an der Ruhr-Universität Bochum, an dass er ein PR-Volontariat in Hamburg anschloss. Von 2004 bis 2009 betreute er als Freelancer für Marketing und Kommunikation mehrere Hamburger Unternehmen, darunter verschiedene aus dem Bereich E-Commerce. Zwischen August 2009 und Dezember 2011 arbeitete er als Online-Redakteur bei ePages.

Ähnliche Beiträge


Kommentare


  1. 17.12.2011

    Hallo zusammen, nachdem ich mich duch Teil 1 und 2 der Anleitungen gelesen habe, bin ich begeistert von den Möglichleiten welche Epages bietet.
    Nun aber zu meinem Problem, ich möchte auf unserem Shop die im Warenkorb befindlichen Buttons “zur Kasse” in “zur Anfrage” umändern.
    hat jemand einen Tipp wie das funktioniert.
    Ich wäre euch sehr dankbar.

    Gruß
    Danny

  2. 21.12.2011
    Michael

    Hallo!
    Wie kann ich denn per CSS die Standard -Produktboxen für die Produktübersicht ändern? Die Bilder sind einfach zu klein und der Text darunter stellt zu wenig Zeichen dar.
    Was kann ich tun?

  3. 14.02.2012

    Ok. Die hier gezeigten Beispiele sind ja wirklih recht simpel. Bitte postet etwas z.B. zu den “input” – elementen. Da werden so viele Klassen verwendet, dass einem schwindelig wird. Und gerade die Anpassung der optik der Buttons und Input-Felder kann wichtig sein für das CI eines Unternehmens. Leider breche ich mir noch regelmäßig einen ab bei den Versuchen, das Eingabefeld für die Produktsuche genau auszupositionieren. Denn es kann je nach Zustand eine andere Klasse annehmen (z.B., wenn man mit der Maus drüber geht, oder nichts in das Feld eingibt und auf “Absenden” klickt”) und dann ist *schwupps* alles wieder verstellt.

  4. 06.04.2013

    Aber wie passe ich denn die Seiten an, die nicht offensichtlich sind. Z.B. ‘Mein Konto’, ‘Kontaktformular’, etc. ???

Teilen Sie uns ihre Meinung mit


*Pflichtfeld

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>