Override eBay’s Fonts and Styles

Use Cascading Style Sheets to change the look of more than just the description.

The <font> tag [Hack #52] , allows you to set the font for any block of text. But it won’t have any effect on text outside the <font></font> structure, which means you can never use it to control the appearance of any text outside the description area (e.g., the rest of the auction page). Instead, you’ll have to use Cascading Style Sheets (CSS) if you want to apply your styles to the entire page.

Tip

CSS purists may balk at the presence of the following <style></style> structure inside the body of an HTML page. If you had control over the entire page, the technique used in this hack would not be entirely proper, but since you only have control over a portion of the body, you’ll have to break from good practice to hack the listing page.

The following code, for instance, will turn all text on the page green:

               <style>
   BODY, FONT, TD, A {
       font-size: 10pt !important;
     font-family: Verdana, Arial, helvetica !important;
          color: green !important;
    }
    </style>

Here’s how it works. First, the <style></style> structure sets apart your CSS definitions, which will take effect regardless of where the code is placed on the page. Next, a single CSS definition lists the HTML tags to modify with your new styles. In this case, you’re applying your styles to all <body> text, as well as to any text inside <font></font> tags, <td></td> tags (used for tables), and <a></a> tags (used for links). If you don’t want to modify link colors, for instance, just remove , A from line .

The actual styles applied are listed between the curly braces {}, separated one per line for clarity. This includes the font size, the typeface, and, of course, your glorious green color . The !important keywords ensure that your styles override any styles defined elsewhere in the page, which is why even the section headers and the light gray text in the “Time left” section are overpowered by your choice.

If you feel that making all text the same color is a little drastic, you can customize it further:

    <style>
    BODY, FONT, TD {
      font-family: Verdana, Arial, helvetica !important;
            color: blue !important;
    }
    A {
      font-family: Verdana, Arial, helvetica !important;
            color: orange !important;
    }
    </style>

This sets all ordinary text blue and links to orange (which will look pretty awful, by the way). Note the absence of the font-size style, which ensures that the original size of all text is preserved.

Tip

For a complete list of all the CSS styles you can use, you’ll need dedicated CSS documentation such as Cascading Style Sheets: The Definitive Guide (O’Reilly), or the official W3C CSS specification (www.w3.org/Style/CSS/).

You can also use this technique to alter other aspects of the page. Don’t like the blue shading section headers? Well, try something like this:

       <style>
	   TD { background-color: white !important; }
	   </style>

You may find this particular solution somewhat extreme, since it removes the shading used in every table on the page. But it will give you a taste of the power of CSS.

While you’re at it, try playing around with the background [Hack #55] as well.

Override Other Sellers’ Hacks

You’ll eventually encounter an auction that has been hacked up pretty well, possibly by a seller with worse taste than yours. Fortunately, you may still have some control over the pages you view with your own browser.

Tip

Have you ever opened a page with a text/background combination that rendered the page nearly impossible to read? Here’s a quick fix: just press Ctrl-A to highlight all text on the page. This makes all text appear white on a dark blue background, which will likely be a significant improvement.

You can set your browser preferences to favor your own color choices over those made by web site designers, but this can be a pain to turn on and off as needed. Instead, you may wish to set up a user stylesheet, a set of carefully constructed preferences and rules that will trump any crazy code like the stuff at the beginning of this hack. User stylesheets are supported by Mozilla, Fire-Fox, Netscape 6.x and later, and Internet Explorer 5.x and later.

  • Probably the best source for information about user stylesheets is Eric Meyer’s “CSS Anarchist’s Cookbook” at www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html. There, you’ll find ways to “wreck” tables, disable banner ads, and render font coding pretty much useless, all worthwhile pursuits for the anarchist in each of us.

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.