The Blog

The Blog is running on the WordPress package. I've set it up so that it reads the same stylesheet as the rest of the site. So far I've been very happy with the way it runs, and it wasn't too difficult to set up ... even for someone like me who doesn't know php at all.

The coding in the Themes is pretty easy to understand and modify, there aren't that many different files to worry about and it's easy to find the lines you want to modify. I've been having good luck sourcing a thoroughly generic theme from somewhere, and modifying that to suit my layout. That was especially helpful in the Drupal implementation I've been working on, because that code really is hairy to work with.

One gotcha was the referrer requirement for posting. Apparently the version of Firefox I was working in didn't send refererrs properly, and WordPress would reject the post. This happened to me after spending forty minutes on a long post, clicking "submit," and getting an error message. Clicking the "back" button got me a blank entry form, work lost. I found a way to get it back, by launching an Ethereal session, reloading the page, and capturing the hex code from the raw HTTP transaction. It sucked, but I got my article back.

If you're using Firefox with this, install the RefControl extension.

Well It Was Really Just An Excuse

Updated 6/11/06

I liked the idea of dark curves moving across the sides, and stumbled on Eric Meyer's method of slicing images to get text to wrap around a shape.

The problem with that was, it necessitated adding display code -- and lots of it -- into the page to render each and every one. Since I wanted a pure css design (I'm not going to be infatuated with wrapped text forever) having 86 image tags in every page of HTML wasn't going to do.

So instead I made a simple javascript loop to document.write the images for me. Embedded in a separate file and called by functions, the source file can be manipulated to generate something else, or nothing at all, when that function is called. Here's what it did:

function drawbackgrounds(side) { for(i=1; i<=43; i++) { document.write ("<img src=\"/images/backgrounds/" + side + i + ".gif\" class=\"" + side + "\" />"); } return true; } drawbackgrounds('l'); //draws the left drawbackgrounds('r'); //draws the right

After reading up on "Unobtrusive Javascript" (I really need to get out more), a metaphysical light went on, and I realized that this was a cheap shortcut, and that I'd still mixed in presentation with content in a way that I'd hoped to avoid. So back to the drawing board, this time taking a DOM approach.

By accessing the individual page elements by ID, in this case the div that contained the background, I wrote a new script which only appeared in the HEAD, and as an onload event in the BODY tag.

function insertBackgrounds() { leftBlock = document.getElementById("content-left"); leftColumn = document.getElementById("text-l"); rightBlock = document.getElementById("content-right"); rightColumn = document.getElementById("text-r"); for ( i=1; i<=43; i++ ) { if (navigator.appName == "Microsoft Internet Explorer") { var lCurve = document.createElement (''); } else { var lCurve = document.createElement("img"); lCurve.setAttribute ("src", "/images/backgrounds/l" + i + ".gif"); lCurve.setAttribute ("class", "l"); } leftBlock.insertBefore (lCurve, leftColumn); if (navigator.appName == "Microsoft Internet Explorer") { var rCurve = document.createElement (''); } else { var rCurve = document.createElement("img"); rCurve.setAttribute ("src", "/images/backgrounds/r" + i + ".gif"); rCurve.setAttribute ("class", "r"); } rightBlock.insertBefore (rCurve, rightColumn); } }

By stacking each image after the other by using the "insertBefore" function, it has the same effect as the older document.write did. IE of course doesn't play nicely with adding an image as an element and then setting the parameters for it, so instead the image is set as a complete HTML tag. Once nice side effect of this whole thing is, by running a browser check the visual problems IE for Mac was giving me went away entirely.

I also did all-css rollover effects, incorporating the behavior file that allows IE to display them.

Current Look