If you're familiar with cascading style sheets and your browser supports user style sheets, you can customize how this site (and this site alone) appears in your browser. As a matter of fact, you can customize the appearance of the whole site, a section or sub-section of the site, a single page, or the title of every book/recording/opera/etc. mentioned on the site. I'll show you how to do this by example, then follow the explanation with a long list of classes you can customize.
(If your browser supports alternate style sheets, you can see a demonstration by choosing the style sheet crayon.)
To make all the text in paragraphs on this site dark green Verdana, add this rule to your user style sheet:
#www-rdrop-com-half p {
color: #006000;
font-family: Verdana, sans-serif;
}
You can use a similar technique to modify the appearance of any HTML element that can appear inside a body element; just change the p in the rule's selector into the element you want to modify.
The key is #www-rdrop-com-half, called a CSS signature. It selects only elements with an id attribute of www-rdrop-com-half. All the pages on this site have this CSS signature. To make a long story short, if you precede any rule's selector by #www-rdrop-com-half, the rule should apply only to this site. So
#www-rdrop-com-half pre {
background-color: #F8F8FF;
color: #000000;
border: thin solid #8080FF;
padding: .5em
}
gives all preformatted text on my site a light blue background with a slightly darker border, with a bit of padding for legibility.
To make this technique even more flexible, the body of each page on this site is enclosed in a unique set of nested div elements with unique IDs. This allows customization on a per-section and per-page level. It's easiest to understand by example, so we'll use this page for convenience.
If you take a look at the HTML for this page, you'll see the following:
<body id="www-rdrop-com-half"> <div id="site-info"> <div id="customize-this-site"> ...lots of HTML... </div> <!-- customize-this-site --> </div> <!-- site-info --> </body>
The ID customize-this-site is unique to this page; the preceding ID, site-info, is common to all pages in the Site Info section of this Web site. (Note that the names of these IDs parallel the breadcrumbs at the top and bottom of the page.) You can use them like we used #www-rdrop-com-half before, only now we're selecting parts of the site:
#www-rdrop-com-half #site-info p {
padding: 0.5em;
}
#www-rdrop-com-half #customize-this-site p {
font-weight: bold;
}
The first rule gives all the paragraphs in the "Site Info" section some extra padding; the second makes this page's paragraphs boldface.
In addition to site-wide, section-wide, and page-specific IDs, this site's pages also use many classes whose appearance you can modify. Let's say you want all paragraphs of class first-para to be justified. Here's the rule:
#www-rdrop-com-half p.first-para {
text-align: justify;
}
Use the same technique for all the classes below.
The list of classes has gotten so long that I've broken it into four parts: structural, media, text, and other classes.
offsite-linkonsite-link class; if you want to change onsite links, then create a rule for a elements and another rule to override a.offsite-link. (I use this in my browser to add underlines to offsite links, while omitting them from onsite links.) Only applied to a elements.breadcrumbsp elements.prev-nextp elements.markernew, updated, download, added, and review. Only applied to span elements.first-parap elements.body-parap elements.timestampi elements.colophondiv elements.pageURLtt elements.highlighttr elements.artworki elements. Example: The Suspendered Balloon, or the Trace of Hours.booki elements, sometimes strong. Example: Gödel, Escher, Frank.columni elements. Example: From Under a Soapbox.comici elements. Example: The Wondrous Glumph.gamei elements. Example: Riskopoly.law-casei elements. Example: Prudence v. Reason.lyrici and span elements. Example: been around the world and found that only stupid people are breeding.magazinei elements. Example: Scientific European.monologuei elements. Example: A Guide to Errors in Living.moviei elements. Example: To Live and Die in Smithville.musicali elements. Example: Can't But Reap.newspaperi elements. Example: The Daily Stoic.operai elements. Example: Das Welkommen.playi elements. Example: Alarums & Discursions.poemi elements. Example: To a Gull, to Make Light of Time.radio-showi elements. Example: Nettertrop's Nightly Mulligan Stew.radio-seriali elements. Example: Tune In Soon, Son.recordingi elements. Example: Different Planes.softwarespan elements. Example: System Embalmer.television-showi elements. Example: Meeting of the Mounds.Web-sitei elements. Example: In Living B&W.zinei elements. Example: Coldcranked.foreign-texti elements. Example: In vino veritas.jargoni elements. Example: proactive.part-of-speechi elements. Example: prep.termi elements. Example: end-to-end.theoremi elements. Example: Gödel's First Incompleteness Theorem.ingredientli elements, to remove unwanted bullets.patternspan elements. Example: Useful Home Page.speciesi elements. Example: Burkholderia cepacia.vesseli elements. Example: Apollo XII.If you create styles that make this site better, please let me know. I'm always interested in suggestions for improving this site.
Last updated 5 August 2004
http://www.rdrop.com/~half/General/customize.html
All contents ©2002-2003 Mark L. Irons