Hack 43 Overriding eBay's Fonts and Styles
Use Cascading Style Sheets to change the look of more than just the description.
The <font> tag, introduced in [Hack #40], 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 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.
The following code, for instance, will turn all text on the page green:
<style> [1] BODY,FONT,TD,A { [2] font-size: 10pt !important; font-family: Verdana,Arial,Helvetica !important; color: green !important; [3] } </style>
Here's how it works. First, the <style></style> structure [1] sets apart our CSS definitions, which will take effect regardless of where the code is placed on the page. Next, a single CSS definition [2] lists the HTML tags to modify with our new styles. In this case, we are applying our 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 [2].
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, our glorious green color [3]. The !important keywords ensure that our styles override any other 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 our 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, except for links, which will appear orange (this will look pretty awful, by the way). Note the absence of font-size style, which will ensure that the original size of all text is preserved.
|
You can also use this technique to alter other aspects of the page. Don't like the blue shading section headers? Well, you can do 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.
See [Hack #41] for further auction-page hacking.
4.12.1 Override Other Sellers' Hacks
You'll eventually encounter an auction that has been hacked up pretty well, possibly by a seller with even worse taste than you. Fortunately, you may still have some control over the pages you view with your own browser.
|
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 Netscape 6.x/Mozilla 1.x and later, and Internet Explorer 5.x and later.
4.12.2 See Also
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.
