Customize Auction Page Backgrounds

Make your item stand out with a little personalization of the auction page using JavaScript.

Although the description area occupies only a portion of the auction page, it’s possible to include code that affects the entire page.

Why would you want to do this? Well, as the theory goes that a more distinct auction will get more attention from bidders. However, anyone who looks at your auction has already given you her attention, so the effect will not be earth-shattering. Still, a little tweaking may make your auction look nicer, or at least let you express your own personal style and have a little fun with your auctions.

Warning

Never build an auction that will be rendered inoperable if a bidder has disabled JavaScript. For instance, if you place white text on a dark background but the background remains white due to the nonworking JavaScript code, then all you’ll have is white text on a white background and a very frustrated bidder.

This code, when placed anywhere in your auction description, will change your auction’s background color:

    <script language=javascript><!--
      document.bgColor='blue';
    --></script>

Basic colors include aqua, black, blue, fuchsia, green, gray, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For fancier colors, use an HTML color code chart, like the one at www.computerhope.com/htmcolor.htm. Or for more control, you can use RGB (red-green-blue) color coding like this:

    document.bgColor='#C5D0EE';

The six-digit color code (here, C5D0EE) is comprised of three pairs of hexadecimal numbers, ranging from 00 (zero, no color) to FF (256, full color). Each pair represents the amounts of red, green, and blue to be used, respectively. For instance, #FF0000 is solid red (no green or blue components), and #FF00FF is purple (red and blue, but no green). Likewise, #000000 represents solid black and #FFFFFF represents solid white.

If you have Adobe Photoshop, you can mix colors in the Photoshop color picker, and the corresponding hex code will appear right next to the red, green, and blue values. See www.utexas.edu/learn/html/colors.html for a hex-based color code table.

Warning

Unfortunately, the eBay logo and menu bar that appear at the top of auction pages aren’t intended to be used with colored backgrounds; they have an unsightly white matte background instead of the ideal transparency. If you don’t like the effect, you can still use these colors to paint the cells of HTML tables [Hack #52] .

To change your auction’s background wallpaper image, insert this code into your auction description:

    <script language=javascript><!--
    document.body.background='http://www.ebayhacks.com/pictures/stone.gif';
    --></script>

Simply replace http://www.ebayhacks.com/pictures/stone.gif with the full URL [Hack #76] of the background image you wish to use.

If you’re interested in changing the appearance of the eBay listing page, you might as well go all the way and change the look of all the text [Hack #57] on the page as well.

Get eBay Hacks, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.