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-link
onsite-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.breadcrumbs
p
elements.prev-next
p
elements.marker
new
, updated
, download
, added
, and review
. Only applied to span
elements.first-para
p
elements.body-para
p
elements.timestamp
i
elements.colophon
div
elements.pageURL
tt
elements.highlight
tr
elements.artwork
i
elements. Example: The Suspendered Balloon, or the Trace of Hours.book
i
elements, sometimes strong
. Example: Gödel, Escher, Frank.column
i
elements. Example: From Under a Soapbox.comic
i
elements. Example: The Wondrous Glumph.game
i
elements. Example: Riskopoly.law-case
i
elements. Example: Prudence v. Reason.lyric
i
and span
elements. Example: been around the world and found that only stupid people are breeding.magazine
i
elements. Example: Scientific European.monologue
i
elements. Example: A Guide to Errors in Living.movie
i
elements. Example: To Live and Die in Smithville.musical
i
elements. Example: Can't But Reap.newspaper
i
elements. Example: The Daily Stoic.opera
i
elements. Example: Das Welkommen.play
i
elements. Example: Alarums & Discursions.poem
i
elements. Example: To a Gull, to Make Light of Time.radio-show
i
elements. Example: Nettertrop's Nightly Mulligan Stew.radio-serial
i
elements. Example: Tune In Soon, Son.recording
i
elements. Example: Different Planes.software
span
elements. Example: System Embalmer.television-show
i
elements. Example: Meeting of the Mounds.Web-site
i
elements. Example: In Living B&W.zine
i
elements. Example: Coldcranked.foreign-text
i
elements. Example: In vino veritas.jargon
i
elements. Example: proactive.part-of-speech
i
elements. Example: prep.term
i
elements. Example: end-to-end.theorem
i
elements. Example: Gödel's First Incompleteness Theorem.ingredient
li
elements, to remove unwanted bullets.pattern
span
elements. Example: Useful Home Page.species
i
elements. Example: Burkholderia cepacia.vessel
i
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