Customize this Site

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

Sitewide Customization

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.

Section- and Page-specific Customization

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.

Customizable Classes

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.

Structural Classes

offsite-link
Indicates that a link destination is offsite. There's no corresponding 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
The breadcrumb lines at the top and bottom of each page. Only applied to p elements.
prev-next
The line at the bottom of a page with links to previous and next pages, if a page has them. Only applied to p elements.
marker
The base style for text icons such as . Specialized by the additional classes new, updated, download, added, and review. Only applied to span elements.
first-para
The first paragraph in a block of text. Only applied to p elements.
body-para
The remaining paragraphs. Only applied to p elements.
timestamp
An ISO date [yyyy-mm-dd], usually on its own line, which records when something was added or changed. Applied to i elements.
colophon
The text at the bottom of the page containing date of last update, page URL, and copyright information. Only applied to div elements.
pageURL
The page's URL, which is found in each page's colophon. Only applied to tt elements.
highlight
Used to create highlight bars for alternate rows of tables. Only applied to tr elements.

Media Classes

artwork
Paintings, sculpture, etc. Applied to i elements. Example: The Suspendered Balloon, or the Trace of Hours.
book
Book titles. Usually applied to i elements, sometimes strong. Example: Gödel, Escher, Frank.
column
Magazine & newspaper columns. Applied to i elements. Example: From Under a Soapbox.
comic
Comic strips, comic books, & graphic novels. Applied to i elements. Example: The Wondrous Glumph.
game
Board games, card games, computer games, etc. Applied to i elements. Example: Riskopoly.
law-case
Applied to i elements. Example: Prudence v. Reason.
lyric
Song lyrics. Applied to i and span elements. Example: been around the world and found that only stupid people are breeding.
magazine
Applied to i elements. Example: Scientific European.
monologue
Applied to i elements. Example: A Guide to Errors in Living.
movie
Applied to i elements. Example: To Live and Die in Smithville.
musical
Applied to i elements. Example: Can't But Reap.
newspaper
Applied to i elements. Example: The Daily Stoic.
opera
Applied to i elements. Example: Das Welkommen.
play
Theatrical plays. Applied to i elements. Example: Alarums & Discursions.
poem
Poem titles. Applied to i elements. Example: To a Gull, to Make Light of Time.
radio-show
Recurring radio shows. Applied to i elements. Example: Nettertrop's Nightly Mulligan Stew.
radio-serial
Applied to i elements. Example: Tune In Soon, Son.
recording
CDs, LPs, tapes, etc. Applied to i elements. Example: Different Planes.
software
Applied to span elements. Example: System Embalmer.
television-show
Applied to i elements. Example: Meeting of the Mounds.
Web-site
Applied to i elements. Example: In Living B&W.
zine
Underground magazines. Applied to i elements. Example: Coldcranked.

Text Classes

foreign-text
Non-English text, usually aphorisms. Applied to i elements. Example: In vino veritas.
jargon
Abuse of the language. Applied to i elements. Example: proactive.
part-of-speech
Part of speech, primarily used in definitions. Applied to i elements. Example: prep.
term
Technical terms that might be unfamiliar. Applied to i elements. Example: end-to-end.
theorem
Mathematical theorems, lemmas, conjectures, etc. Applied to i elements. Example: Gödel's First Incompleteness Theorem.

Other Classes

ingredient
Recipe ingredients. Applied to li elements, to remove unwanted bullets.
pattern
The name of an Alexandrian pattern. Primarily used in Patterns for Personal Web Sites. Applied to span elements. Example: Useful Home Page.
species
Latin names of plants, animals, protists, etc. Applied to i elements. Example: Burkholderia cepacia.
vessel
Ships, either ocean- or spacegoing. Applied to i elements. Example: Apollo XII.

Suggestions Are Welcome

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