Recovered from the Wayback Machine. The stylesheets still actually work. Pick one, and reload the page in the Wayback Machine.
This page describes both the techniques and the materials I used to create my stylesheets. At the end of the document is links to locations where I’ve borrowed photographs, technology, or graphics – whit my deepest appreciation for same. A permanent link to this page will be added at the bottom of the stylesheet option list.
—
My designs don’t necessarily fit the current mode popular with weblogs–shadow background, with sidebar contained within the same block as the text and floated to the left or right; large, graphical title bar at the top, all against a simple patterned or plain backdrop. Mine are centered, true; and some of the styles do have a graphic at the top. However, there’s nary a shadow anywhere, and there won’t be because shadows aren’t compatible with my ‘floating cloud’ sidebar look.
Relatively simple as my styles are, there is an interesting trick or two used in the stylesheets that I thought I would share. However, before you try any of these yourself, you might as well be warned that I’ve never used CSS in the proper manner; nor are my techniques always the proper techniques. However, they do validate, and they are accessible.
Main page elements
All of my pages have one main element, a DIV block, that’s centered in the middle of the page. The CSS for this is:
div.wholething{
margin: 90px auto 25px auto;
width: 730px;
text-align:center;
}
In this centered block are two columns: one in an element called the sidebar; the other the main content. I make use of the float CSS attribute to float the main content to the right; I set its contents to be left-justified, compensating for the parent container’s using of centered text-align. If I did not do this, the parent element’s text alignment would propagate to all contained elements:
.mainblog {
float: right;
text-align: left;
background:#fff;
width: 450px;
font-family:verdana, arial, sans-serif;
font-size: 10px;
padding: 30px;
border:1px solid #999;
}
Normally, DIV elements would align vertically, but the use of float forces the main content to align horizontally with the sidebar, to the right, rather than the bar flowing beneath it. All that’s left for the sidebar then is remove its margins, set its width, and align the text to the left.
.sidebar
{
text-align: left;
width: 200px;
margin-top: 0px; margin-bottom: 0px;
padding: 0px 10px 20px 0px;
font-family:verdana, arial, sans-serif;
font-size: 8pt;
}
Within the sidebar, all my side images and blocks for comments and whatnot flow naturally within the tall, narrow container, each item set to a width of 200px. To see how these elements are positioned within the main web page, I’ve provided a text-based version of the index page. To see the stylesheets, view the source for this page, grab the URL for each stylesheet and view it directly in your browser.
Feel free to use any of the ideas presented in this document, or copy the stylesheets for experimentation and use in your own pages. A link back would be nice.
There’s nothing special with this layout except that traditionally sidebars items are visually contained within some overall constraining environment. My sidebar elements don’t – not even within the style designated as Walker Evans where I use what looks like a slip of film underneath the items. Even within this stylesheet, the elements break out of the boundary of the film, ever so slightly to the left. So they look like they’re layered on the film, rather than contained in the film.
Accessibility
Though I may make fast and loose with the rules of CSS, my CSS and XHTML is valid, as tested with the W3C validation tools. In addition, I also try to make sure the site is fully accessible. For instance, the main content page is one of the first items in the page, so that someone using a voice browser gets access to the writing, quickly.
I also provide a minimal stylesheet that doesn’t have any image downloads for those not interested in the images, or any of the specialized coloring.
If I miss something needed for accessibility, please let me know.
Sidebar images
The first trick to my stylesheets has to do with the sidebar images. Now, I could have used JavaScript to change the images based on the stylesheet picked, and this is a prefectly good approach. However, I wanted to keep my use of JS to a minimum.
What I did was create nine different DIV elements, each with a different background image. Using this approach, I can alter the images in the DIV elements for each style. If I have a style, like Old Bird or Minimal, that doesn’t use sidebar images, nothing shows for these elements in the page.
Now normally, with proper CSS and XHTML, elements contain something, but what a bother. If my sidebar image blocks must be said to contain something, then let them contain the clothes fairies wear when they’re not flying around naked on diaphanous wings.
See there? Tiny little Mary Janes.
Switching Styles
Stylesheets are linked into the page via the LINK tag, included in the HEAD section. Contrary to expectations, most browsers honor the LINK tag in the body, but not all – Mozilla is one that won’t. I found this out when I tried this shortcut, and that sharp-eyed poet, Joseph Duemer tapped me on the shoulder and asked, “Why is nothing showing?”
(Additionally, embedding a LINK element in the body is an invalid use of the element, and results in invalid XHTML.)
After resolving the issue of what to do with LINK, one stylesheet is then defined to be the primary one, pulled up by default and what people get if they don’t have access to JavaScript. I’ve settled on Fire & Ice as the default stylesheet. All other styles are listed as alternatives, and you can even access these directly if your browser supports listing of alternative stylesheets. Otherwise you can use the JavaScript to switch the styles. Very simple, very uncomplicated JavaScript.
The Javascript to run the styleswitcher comes from A List Apart, which also goes into detail on how to set a primary stylesheet, as well as adding links for alternative stylesheets. You can download the JavaScript from ALA, or here.
Add the JavaScript to the page with the following:
<script type=”text/javascript” src=”http://weblogname.com/styleswitcher.js”></script<
Change the “weblogname.com/styleswitcher.js” to whatever the URL is for the JavaScript file. All that’s needed now is to add the stylesheet entries for people to choose, as mine are listed in the sidebar. The syntax for the links themselves is also listed in the ALA article.
All the elements are in place now for the static stylesheets – the main page components and how to switch between styles. To make the stylesheets dynamic requires a few additional tricks.
Dynamic Stylesheets
In the case of my site, dynamic stylesheets means stylesheets that have been modified by PHP before the stylesheet is returned to the requesting application.
Typically, a stylesheet is defined with a specific extension: css. When served there’s some assumptions associated with this extension about what the server does with the page, and then what the browser does with it. The same with a page with a PHP file extension. In this extension, the web server knows that the PHP needs to be processed before the page is returned.
The two can be combined with a simple little trick–adding the following to the very top of the dynamic stylesheet will return the page to the browser as type text/css:
<?php
// declare the output of the file as CSS
header(’Content-type: text/css’);
?>
Now I can dynamically generate colors for Clashing Colors; or generate new sidebar images for Random Shot.
Or I can test the temperature of the post and adjust everything.
Dynamic stylesheets can have some latency problems. See the end of the post for an effective workaround for this.
Emotive
The last stylesheet I’ll discuss is the Emotive stylesheet style. With this stylesheet, there’s a neutral stylesheet that’s used for the front page, but each individual post has an associated look based on the tone and content of the writing.
This particular technique used the WordPress ability to define a custom field for each post. This custom field has an associated named key/value pair in the database, the values of which can be accessed with a WordPress function, get_post_custom_values, passing in the key, in this case ‘tone’.
Once the value is accessed, it’s then passed to the emotive PHP program, using the following:
<link rel=”alternate stylesheet” media=”screen” title=”emotive” href=”/emotive.php?tone=
Since these keywords are only available within the loop to process a specific post, I had two options for handling the link/php pairing. The first is embed the LINK tag in the body and process it when I process the other individual post’s information; the second is to keep the LINK tag in the head, and move the PHP post processing up.
The first choice works, but not with all browsers, and not especially great, and it doesn’t validate. Since I didn’t want to hear from a series of people about how my page does not validate because I used the LINK tag in the body, I went with the second approach.
The how-tos on moving the loop up is specific to WordPress only, and a better approach would be to just provide a copy of the page, here. The technique can work with other weblog tools, using whatever post-specific value, such as category or other value.
Within the emotive.php itself, the code to manage the different tones is:
?php
// declare the output of the file as CSS
header(’Content-type: text/css’);
$mood=$_GET[’tone’];
if (isset($mood)) {
if ($mood <> “”) {
$file = $mood . “.php”;
include $file;
}
else {
setneutral();
}
}
else {
setneutral();
}
function setneutral() {
global $backgroundcolor, $blockquote, $A, $Avisited, $Ahover, $border, $img1, $image1,$img2, $image2,$img3, $image3,$img4, $image4,$img5, $image5,$img6, $image6,$img7, $image7,$img8, $image8;
$backgroundcolor=”fff”;
$blockquote=”999″;
$A=”666″;
$Avisited=”000066″;
$Ahover=”ccc”;
$border=”000″;
$image1=”/mm/blank.gif”;
$img1=”1″;
$image2=”/mm/blank.gif”;
$img2=”1″;
$image3=”/mm/blank.gif”;
$img3=”1″;
$image4=”/mm/blank.gif”;
$img4=”1″;
$image5=”/mm/blank.gif”;
$img5=”1″;
$image6=”/mm/blank.gif”;
$img6=”1″;
$image7=”/mm/blank.gif”;
$img7=”1″;
$image8=”/mm/blank.gif”;
$img8=”1″;
}
?>
Each of the tones is defined in its own file, such as thinking.php or tranquil.php and so on. The file consists of nothing more than definitions for each of the items replaced, similar to those shown in the setneutral function in the code block just shown.
If the stylesheet is called without passing in a tone, the neutral style is what shows – and it’s pretty plain. Otherwise, the associated tone file is included into the code, and its values are used as replacements in the stylesheet. For instance, the following is the CSS definitions for several elements, using dynamic values:
BODY {
background-color: #<?php echo $backgroundcolor; ?> ;
}
blockquote {
color: #<?php echo $A; ?>;
}
div.update {
color: #<?php echo $A; ?>;
}
A {
color: #<?php echo $A; ?>;
}
A:visited {
color: #<?php echo $Avisited; ?>;
}
A:hover {
color: #<?php echo $Ahover; ?>;
}
You might notice from this example that the stylesheet definitions seem a little sparse. The reason for this is that the other, non-dynamic style settings for each element are defined in a second CSS stylesheet, the one known as “Minimal”.
This second stylesheet is also given the same title as the dynamic stylesheet, but it’s placed first in the header. What happens then is when the JavaScript loads the style titled ‘emotive’, both CSS files are loaded, the static one first. Since this is faster than the dynamic, and can cache, the emotive style suffers minimal disruption between pages. The only things that change are the colors and the images – not the layout or the positioning. Minimizing the changes to the latter helps minimize the latency effect with using a dynamic stylesheet that changes with each page.
In fact, using a static stylesheet in conjuction with a dynamic one, and stripping everything that doesn’t change out of the dynamic sheet, helps to control most stylesheet latency–that disruption that can occur when a stylehsheet is being loaded.
Credits
The ice photos for Fire & Ice are from the NOAA Photo Library, the Antarctica collection. There are some amazing pictures in this collection.
The fire photos for Fire & Ice are photos generously donated into the public domain by Jon Sullivan. The cherry and vegetable photos in Lemon Shake-Ups are also Sullivan’s work, and lovely work it is, too. My thanks for their use.
Most of the rest of the photos used in the sheets are mine, except for the Einstein photo in Emotive and Deep Thoughts. I found it and a couple of other computer-generated images used with Deep Thoughts at this site.
The clipart used with Lemon Shake-ups came from About’s Web clipart pages.
The cabinet member photos for the Presidential Cabinet stylesheet (which started as a gag), came from the White House, except for GW Bush on his horse, which came from the George Bush senior Presidential Library. The photo was morphed by placed Jr in front of the Alamo.
The monkey drawings are public domain drawings that can be found by searching on the terms “copyright free illustrations” in Yahoo, and then clicking on the Images tab. You’ll recognize several images used on O’Reilly books in the collections.
