Hack 41 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 with the ability to reach out and affect the entire page.

Why would you want to do this? Well, as the theory goes, a more distinct auction will get more attention from bidders. However, anyone who looks at your auction has already given you their 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.

Never build an auction such that it will be rendered inoperable if a bidder has disabled JavaScript support in his or her browser. For instance, if you place white text on a dark background but the background remains white due to the JavaScript code not working, 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>

Valid colors include aqua, black, blue, fuchsia, green, gray, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For more control, you may wish to use RGB (red-green-blue) color coding instead, 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.

Convenient color tables can be found at www.utexas.edu/learn/html/colors.html. 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.

Unfortunately, the eBay logo and menu bar that appear at the top of auction pages aren't intended to be used with colored backgrounds and will have an unsightly white matte instead of the ideal transparent background.

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 of the background image you wish to use. See [Hack #59] for details on making your photos available to use as wallpaper.