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.
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.
