eBay Design Trick: So wird die Angebotsseite zum Hingucker!

// 02092008 / Allgemein, Mittagspause, Webprogrammierung / 13 Kommentare

Mit ein paar CSS Kniffen lässt sich ein eBay Angebot auch "drumherum" ganz nett aufhübschen, z.B. mit ein paar Icons bei den Artikelmerkmalen oder einem großen Banner über dem Angebot. Hierzu werden die nachfolgenden CSS-Styles einfach in das ebay Angebot eingebunden.

eBay Artikelmerkmale mit Icons schmücken

h2.itemSpecifics
{
color:#555;
padding-left: 20px;
background:url(http://www.url.de/zum/icon.png) no-repeat left;
}

Headerbild über das Angebot einfügen

Ja, das Beispielbild selbst ist plump - aber es tut seinen Zweck:


div.itemBox
{
margin-top: 5px;
padding-top: hoehe_des_Bildes px;
background:url(http://www.url.de/zum/bild.jpg) left top no-repeat #fff;
}

Lust auf mehr?

Ihr könnt auch ganz einfach selbst kreativ sein, indem Ihr im Firefox mal ein eBay Angebot aufruft und dann mit der Web Developer Toolbar über “Outline › Current Element” im Ebay Angebot nach HTML-Elementen sucht, die mit einer CSS Klasse oder ID ausgezeichnet sind. Diese Klasse / ID überschreibt Ihr dann einfach mit dem gewünschten CSS Style (z.B. andere Schrift, Huntergrundbild, Highlights,…).

Wie werden diese CSS-Styles nun eingebunden?

eBay Angebot erstellen / bearbeiten: ebay › reguläres Verkaufsformular › HTML-Modus!

Als erstes wird die CSS Deklaration eingebunden:

<!--
-->

Anschließend werden dazwischen die CSS Stückchen eingefügt.

Beispiel:

Nein, die URL zum grünen Haken in diesem Beispiel stimmt nicht, ist nur eine Dummy-URL, Ihr müsst den Haken schon auf Euren eigenen Webspace hochladen ;-) Den grünen Haken aus dem Beispiel gibts übrigens bei famfamfam (Silk Icons).

Natürlich kann man die CSS Styles auch in ein externes Stylesheet verlagern, funktioniert ebenfalls.

Achtung Internet Explorer

Es kann passieren, dass der Internet Explorer im eBay HTML-Editor die Zeilen mit der CSS-Deklaration raushaut, sobald man das Angebot neu bearbeitet, daher empfehle ich, hierzu z.B. den Firefox zu benutzen.

Read other interesting articles:

Be Sociable, Share!

13 Kommentare zu "eBay Design Trick: So wird die Angebotsseite zum Hingucker!"

  1. Daniel Daniel September 2nd, 2008 at 20:10

    Nur mal so am Rande: Das o.g. Unternehmen schreibt sich nach deren Gestaltungsrichtlinien eBay, mit kleinem e und großem b. Auch am Satzanfang ;o)

    Ansonsten ein sehr interessanter Trick. Wenn ich mal wieder was loswerden will, werde ich es mal ausprobieren.

  2. Nicole Nicole September 3rd, 2008 at 07:52

    Hi Daniel, danke für den Hinweis, hab’s korrigiert.

  3. Reichweite.de Reichweite.de September 3rd, 2008 at 19:52

    Darf man sowas überhaupt nach eBay-Richtlinien? Wirkt irgendwie unlauter…

  4. Daniel Daniel September 4th, 2008 at 06:23

    Hm… Ich habe mal nach weiteren Infos gesucht. Es gibt unter http://pages.ebay.de/help/policies/listing-javascript.html Hinweise auf den Verbot von Skripten. In erster Linie bezieht sich dies aber auf JavaScript und Flash.

    Entweder die haben an CSS nicht gedacht oder sehen darin kein Risiko oder Problem.

  5. Nicole Nicole September 4th, 2008 at 08:09

    Soweit ich weiß, ist nur Javascript verboten. Wahrscheinlich haben die nicht an die Möglichkeiten von CSS gedacht ;-)

  6. Desktop-Publishing Weblog Desktop-Publishing Weblog September 16th, 2008 at 12:58

    CSS-Tricks für Auktionsseiten bei eBay…

    Dass man seine Auktionsseite mit HTML und CSS schöner gestalten kann ist nun wirklich kein Geheimtipp. Ziemlich unbekannt könnten aber die CSS-Tricks für Auktionsseiten bei eBay sein.
    Es ist mit Hilfe von Inline-Styles zum Beispiel m……

  7. Steven Steven September 24th, 2008 at 18:16

    Edler Tipp! Danke! Kreativität ist durch nichts zu bezahlen ;-)

  8. Sebastian Sebastian Oktober 8th, 2008 at 15:19

    Bei mir will es irgendwie nicht funktionieren, geht es überhaupt in der eBay-Vorschau?

  9. Hannes Hannes Dezember 15th, 2008 at 06:34

    Bei mir wills auch nicht funktionieren.

    Ich habs einfach so ganz oben eingefügt:

    falsch?

  10. Sascha Sascha Juni 8th, 2009 at 17:59

    Danke für den Artikel, wir erstellen ganze Artikelbeschreibungen in Css für eBay. Kann ich nur empfehlen das mal auszuprobieren!

  11. Alex Alex September 3rd, 2009 at 16:49

    Ich glaube nicht sowas erlaubt ist. Mit Skripte werden alle Skripte jeglicher Art gemeint auch CSS, welche die Seite von eBay außerhalb eurer Artikelbeschreibung verändern. ;)
    siehe:
    http://pages.ebay.de/help/policies/listing-javascript.html

    Welche aktiven Skript- oder HTML-Funktionen sind bei uns generell verboten?

    Skripte, die Inhalte außerhalb der Artikelbeschreibung überschreiben.

  12. Nicole Nicole November 7th, 2009 at 00:00

    CSS ist doch keine Skriptsprache…

  13. Erik Herbert Erik Herbert Mai 19th, 2010 at 18:24

    Danke für den interessanten Tip. Werde es gleich mal ausprobieren. Ach, und nochmal zu den Merkmalen von Scripts:
    implizit deklarierte Variablen, dynamische Typisierung, automatische Speicherverwaltung, dynamische Klassenzugehörigkeit oder prototypenbasierte Vererbung & ungetrennte Übersetzungsphase. (Auszug aus Wikipedia)
    Fazit: Skript ungleich CSS.


Kommentieren




  • www.goneo.de