Missunderstood

One of the things that I found attractive about missunderstood was how Will handled code block display, using a background image that helped the code block stand out distinctly as code/script, with pseudo line numbering. Well, here’s an example:

#content .code {
color:#444;
background:#F4f4f4 url(images/codenums.png) repeat-y;
border:1px solid #ccc;
padding:1px;
padding-left:25px;
font: 12px/18px "courier new", helvetica, "times new roman", monospace;
width:470px;
margin:2px auto;
white-space:nowrap;
overflow:auto;}

I had to add 1 pixel to the top and bottom of the codenums.png image to make the numbers line-up (a breeze with IrfanView, didn’t bother launching PhotoShop ;’) and use a fixed font size/style. Note that long lines are not wrapped, but scroll off to the right (should help avoid copy/paste issues).

This method currently requires “Use Visual Rich Editing” to be turned off (under Users:Your Profile). Here is how to put code blocks into your post: Start with a <div class=”code”> (will call the class style properties, beackground, etc.) immediately followed by a <pre> (’pre’-formatted, to maintain original structure) so the beginning looks like this:

<div class=”code”> <pre>

Enter your code right after that:

<div class=”code”> <pre>
if $girlfriend(’hair’) == ‘blonde’ then {
dispose($sharpobjects);
} else {
exit;
}

and then close the div and pre:

<div class=”code”> <pre>
if $girlfriend(’hair’) == ‘blonde’ then {
dispose($sharpobjects);
} else {
exit;
}
</pre> </div>

And there ya go…

Currently I am using a css-based blockquote that looks like this:

Two and two are merely four, and though often less, never more.
And I, for all the world’s advance, am an upright mammal, wearing pants…
-Author unkown to me

In a modern browser you will see a large open-quote graphic in the top left and a close-quote graphic to the bottom right of the blockquote. For IE it will degrade to a simpler vertical-bar on the left of the blockquote.

For pullquotes, I usually just use a bit of css, but this does mean duplication of the text (once for the post and a second time for the pullquote div). Viper007Bond wrote a simple plugin that uses JavaScript to get around the duplication issues. I have integrated the plugin with this theme (functions.php).

I’m adding some filler text here do you can see how it wraps around the pullquote. The styling is css based so for anyone with some basic css skills it’s pretty simple to mofify to your taste. I should note that I do attempt to contact any authors of plugins I include with my theme(s). Although not required (usually) it makes for more World Peace and Harmony. Really, it does.
To use pullquotes in your posts, find the text you wish to ‘pull’ and insert <span class=”pullquote”> before the text, and </span> at the end. Simple as that. I can hear the strings of Harmony falling into place right now… Hear that?

Oh, it’s the frikkin’ neighbor’s radio…

I included the WordPress Theme Toolkit by Ozh for user-friendliness. This gives the user some ability to make style changes without having to muck around in the code. I have set some defaults, but feel free to play with them…