Download Tolarski v.1.3.2 here.

To install, login to WordPress as admin and browse to Appearance -> Themes -> Install Themes -> Upload. I’d appreciate it if someone else could test this and leave feedback with any issues.

I don’t intend to turn Tolarski into a fully supported theme. But I am happy to answer questions. Some notes:

1. Tolarski displays the full date and time on posts. Tarski only prints the date, and this is not configurable. You can disable this by commenting out the “add_action … init_tolarski_post_metadata” line at the bottom of functions.php.
2. You must modify tolarski_headerimage() in functions.php. This specifies the 7 header images by filename, which should be placed in tolarski/headers/. Please don’t use my images on your live blog, but if you just want to play with the theme you can find links in the page source and manually download them. If you want to change the floating positions of the images, or use more/less of them, edit style.css.

I’ve been maintaining my own hacked-up theme based on Tarski for several years now. This required modifying the theme source, which meant that every update to Tarski would overwrite my customisations. The better way to do this is to write a child theme.

Behold Tolarski, a Tarski child theme for variable width. Tolarski isn’t intended for general release, and I don’t intend to support it for external use. However, I regularly get questions from people wanting to know how I did it, so I’m making the code available.

The details are similar to my previous blog post. The variable-width columns are implemented in CSS, and the header images are positioned in CSS and implemented by a new function which modifies th_header. Tolarski ignores the WordPress “header image” setting.

From functions.php:

function tolarski_headerimage() {
	$header_img_url_base = get_bloginfo('stylesheet_directory') . '/headers/';
	echo "
<div id=\"header-image\">
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level1_black.png\" id=\"header_image_blackbg\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level2_blue.png\" id=\"header_image_bluebg\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level3_gradient.png\" id=\"header_image_gradient\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level4_cmda.png\" id=\"header_image_cmd\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level5_sat.png\" id=\"header_image_satellite\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level6_science.png\" id=\"header_image_engineer\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level7_tolaris.png\" id=\"header_image_tolaris\" />
</div>\n\n";
}

function init_tolarski_header() {
	remove_all_actions('th_header');
	add_action('th_header', 'tolarski_headerimage');
	add_action('th_header', 'tarski_titleandtag');
	add_action('th_header', 'navbar_wrapper');
	add_action('th_header', 'tarski_next_prev_posts');
}

add_action('init', 'init_tolarski_header');

To use Tolarski, you’re going to have to modify tolarski_headerimage(). This specifies the 7 header images by filename, which should be placed in tolarski/headers/. Please don’t use my images on your live blog, but if you just want to play with the theme you can find links in the page source.

Today I discovered that someone has patched Gears to work with Firefox 64-bit, and released a precompiled installer. Warning: after installation, when Firefox restarts, you will see a warning that the plugin could not be installed (‘”Google Gears” could not be installed because it is not compatible with your Firefox build type (Linux_x86_64-gcc3). Please contact the author of this item about the problem.’). However, it is installed and works just fine. Unfortunately this message is repeated each time Firefox restarts.

I can now browse my admin page with Firefox in offline mode. Sniffing proves that not a byte is passing. Now I can write blog posts on planes, without having to use an offline text editor.

Update 2009-05-29: My old colleague from my days at Greenpeace, Niels Peen, now provides the latest version (5.21.0) with proper build tagging. So you will no longer see the warning about Linux_x86_64-gcc3 being the wrong build type. Thanks, Niels!

Update 2009-07-24: 5.31.0 and 5.32.0 are now available here, also with build instructions so you can do it yourself!

You may have noticed the slick new header images on tolaris.com. Try resizing your browser. The site’s theme and header images will resize to match, sliding apart as needed while maintaining the right depth.

The artwork was done by my talented friend Josh Smith. Several of his photographs grace the walls of my home, and his daughter – in convincing us that breeding may be pretty neat after all – is incidentally responsible for the existence of my own child. I commissioned Josh to replace the boring old header image (and its limiting static width) with a sliding array of images late last year. I am extremely pleased with the work. From time to time, I may change the command-line text (currently using dpkg to install “Hello World”), just for fun.

The resizing and sliding is accomplished by using CSS. I am using a modified form of the Tarski WordPress template. I love Tarski’s options and clean design, but fixed-pixel-width websites are dumb. So I’ve overridden many of the Tarski theme’s settings to use percentages rather than pixel widths.

All of my modifications can be found by browsing my CSS source. Note that Tarski uses several stylesheets, and this last just overrides a lot of existing defaults.

Making the header images resize and stay aligned correctly is a little tricky. Here are the CSS objects for the first three images from the source above:

#header-image {
   position: relative;
   height: 180px;
   margin-top: 10px;
   text-align: center;
}

#header_image_blackbg {new-header-images
    position: absolute;
    top: 0px; left: 0px;
    width: 734px; height: 180px;
    z-index: 1;
}

#header_image_bluebg {
    position: absolute;
    top: 0px; right: 0px;
    width: 734px; height: 180px;
    z-index: 2;
}

#header_image_gradient {
    position: absolute;
    top: 0px;
    margin-left: -367px; left 50%;
    width: 734px; height: 180px;
    z-index: 3;
}

The first object is the container object. It must be “position:relative”. The next is a black background block, which could just be a div but the image works for me. It is aligned on the left. Object 3 is the light blue background block, aligned on the right. The last object is the gradient that transitions between them. Forcing it to align to center is actually a pain. I’ve used a trick here. Set its left margin edge to the center of the image (negative half its width), and then set left side spacing to 50%. I could do the same with the right. There are 4 more images for the satellite, command text, the engineer (me!), and the tolaris.com label. Each has a depth (z-index), where higher numbers are on top of lower numbers.

Getting Tarski to actually use more than one image requires re-writing some Tarski code itself. All from (wordpress_root)/wp-content/themes/tarski:

./functions.php – Around line 67, add a new line to call a new PHP source file.
require_once(TARSKIHELPERS . ‘/my_helper.php’);

./library/helpers/my_helper.php – Create this file, with your new function to include all the image lines. Make sure that each img tag has an id field matching the CSS objects.

function my_headerimage() {
$header_img_url_base = get_bloginfo('template_directory') . '/headers/';
echo "
<div id=\"header-image\">
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level1_black.png\" id=\"header_image_blackbg\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level2_blue.png\" id=\"header_image_bluebg\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level3_gradient.png\" id=\"header_image_gradient\" />
</div>\n\n";
}

./app/launcher.php_tolaris – Around line 91, replace the function call to “tarski_headerimage” with your new function.

//add_action('th_header', 'tarski_headerimage');
add_action('th_header', 'my_headerimage');

Then upload your header images to the “headers” directory, where the other single-image headers are stored.

I’m sure there is a way to do this with the Tarski API, but this hack works for me. At least until I have to upgrade and port my changes in to the next release.

I noticed when reviewing a recent post that WordPress was “helpfully” replacing two hyphens with emdash, three dots with ellipsis, apostrophe with curly apostrophe, etc. It does this even between <code> tags – on the second line and beyond. I appreciate that WordPress does this when I’m writing in a journalistic style, but I’m also a programmer and engineer, which means it hinders as often as it helps.

In WordPress 2.6.2, the problem comes from a bug in ./wp-includes/formatting.php. The auto-formatter tries not to do these replacements between code tags, but incorrectly identifies the start of any following tag as the end of the code section. That means a multi-line code section (which has <br> tags breaking each line) will have replacements run on it on all lines after the first.

This bug is found between lines 30 and 43:

if (isset($curl{0}) && '<' != $curl{0} && '[' != $curl{0} && $next && !$has_pre_parent) { // If it's not a tag
   // static strings
   $curl = str_replace($static_characters, $static_replacements, $curl);
   // regular expressions
   $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
} elseif (strpos($curl, '<code') !== false || strpos($curl, '<kbd') !== false || strpos($curl, '<style') !== false || strpos($curl, '<script') !== false) {
   $next = false;
} elseif (strpos($curl, '<pre') !== false) {
   $has_pre_parent = true;
} elseif (strpos($curl, '</pre>') !== false) {
   $has_pre_parent = false;
} else {
   $next = true;
}

One solution is to make code tags behave like pre tags. Change lines 35-39 to the following:

} elseif (strpos($curl, '<kbd') !== false || strpos($curl, '<style') !== false || strpos($curl, '<script') !== false) {
   $next = false;
} elseif (strpos($curl, '<pre') !== false || strpos($curl, '<code') !== false) {
   $has_pre_parent = true;
} elseif (strpos($curl, '</pre>') !== false || strpos($curl, '</code>') !== false) {
   $has_pre_parent = false;

Now code tags will be treated as pre tags – absolutely no replacements except for those necessary for HTML encoding. This does introduce bugs in the case of nested code and pre tags, so don’t put them inside each other.

If you want to disable replacements altogether, just comment out lines 32 and 34 (the str_replace and preg_replace calls).

Aside: writing this article so all the tags would display correctly was an incredible pain.