Jan
4

7


Using CSS on eBay

Some tags are designed to be used or work only in the <head> section of the page such as some Javascript and all <meta> tags. Some tags such as <style> will work within the <body> tag even though it is considered “bad” coding.

Use <style> tags with caution. You MUST give classes/ids unique names, and define your tags such as <p>, <h1> with these classes/ids to avoid changing any predefined eBay styles. Changing ANY portion of eBays code can result in your listings being pulled, your eBay store being closed, or even suspension.

Members using the eBay site shall only modify or add content in those areas specifically designated for member use. All content must also abide by all other eBay policies. Designated member areas are the description area of the View Item page, the posting input or reply box on the eBay discussion, chat and help boards, the members’ About Me page, the feedback comments area of the Feedback Forum, the bid box and the eBay email system text box. In no case shall a user block, obscure, overwrite or modify any eBay generated content or pages. All other site locations or components of eBay pages are strictly for eBay use.

Wrong Way

The code as shown below would change eBays <p> and <h1> tags to YOUR styles!

Select Code
1
2
3
4
5
6
<style>
h1 { font-family: verdana, helvetica, sans-serif; font-size: 16px; color: #7db171; }
p { font-family: verdana, helvetica, sans-serif; font-size: 12px; color: #292929; }
</style>
<h1>Headline</h1>
<p>Nunc eu orci mauris? Nunc congue, lorem sit amet varius gravida.</p>

Better Way

Using CSS to style HTML is actually the best way to code for eBay. It insures that your listing will always look the way that you intended, and will also look correct cross platform/browser.

Select Code
1
2
3
4
5
6
<style>
h1.myheader { font-family: verdana, helvetica, sans-serif; font-size: 16px; color: #7db171; }
p.mytext { font-family: verdana, helvetica, sans-serif; font-size: 12px; color: #292929; }
</style>
<h1 class="myheader">Headline</h1>
<p class="mytext">Nunc eu orci mauris? Nunc congue, lorem sit amet varius gravida.</p>

Best and Correct Way

The best and proper way to style your HTML is to use inline styles. Yes, it means a little more coding, but you will never have to worry about over writing eBays styles, and your listing will always look the same, no matter how eBay changes the default styles for the description area.

Select Code
1
2
<h1 style="font-family: verdana, helvetica, sans-serif; font-size: 16px; color: #7db171;">Headline</h1>
<p style="font-family: verdana, helvetica, sans-serif; font-size: 12px; color: #292929;">Nunc eu orci mauris? Nunc congue, lorem sit amet varius gravida.</p>

7 Responses to “Using CSS on eBay”

  1. Dave says:

    I blame Ebay’s messy method of only allowing you to edit drips and drabs of html code for certain elements and not allowing you to change a css master file. They should issue a developers guide that has all the id elements in it. I have had to use firefox’s firebug to find out what the id of every little element is and change it accordingly. It is almost like they have designed the whole custom css sections for complete beginners, who wouldnt know css anyway. I hate having to switch this off, swithc that off, and create a promotion box and use that as a static menu, etc. Its very shoddy.

    Reply
  2. Vitaliy says:

    Thanks for tutorial , how to use custom fonts in ebay store template?

    Reply
  3. Akash Nayak says:

    Nice tutorial Using CSS on eBay. thanks kdwhd

    Reply
  4. Darren says:

    There is an even better way to write CSS for eBay without risking altering any of eBay’s formatting – put your entire listing into a div container e.g.

    div#mycontainer { font-family : arial, sans-serif ; font-size : 12pt }
    div#mycontainer h1{ font-family : times-new-roman, serif ; font-size : 150% }

    My listing
    This is my item it’s super cool

    that way by adding div#container to each of the styles it only affects the styling of the items within the container and not outside.

    Reply

Leave a Reply