Even floated div columns: equalHeights

When you are floating a bunch of divs inside a container, it is a design problem when the divs are of different heights depending on their content, because they tend to wrap funky. One can, by brute force, make them all the same height, but that approach is fragile and can create problems with the content contained in each div. (Why is there a flower photo? Just because it looks nice.)

A better approach would be to measure the tallest div and force that height on all the remaining divs. Alas, although there exist some CSS methods for doing this, they're not adequately cross-browser compatible, so a javascript method is the only effective approach.

I found a very nice jquery plugin called equalHeights, and implemented it in the SimpleFolio theme for rabbitsoftware. Thank you again, Filament Group, a great resource for JQuery plugins.

Some small modifications of the SimpleFolio Wordpress theme

I'm using the delightful SimpleFolio Wordpress theme for the Rabbit Software website. I made a donation; it's nice to support good opensource work.

I found a few issues with it that I have addressed.

1. The single post view was incorrectly showing the excluded "Portfolio" category in its Recent Posts sidebar widget. In this theme, you can select a specific category to populate the homepage slideshow. One doesn't necessarily want those posts to appear as normal blog posts. Unfortunately, the exclusion function wasn't working on the single post view page. This problem is easily addressed by editing the sf_portfolio_filter function in the theme's functions.php file.

Change line 50,

if(!is_archive() && !is_admin() && !is_single()){

to

if(!is_archive() && !is_admin() ){

2. I'm using more than 3 homepage widgets, and they weren't wrapping nicely. While the first one had a proper margin-left:0, the fourth one had the default margin-left:30px. I realized there must be some javascript at work behind the scenes, inserting the inline styling to adjust the left margin. Indeed, I opened custom.js in the js folder, and found this line:

$(".home_widgets .widget:first").css("margin-left", "0");

A bit of snooping on the JQuery site clarified this usage for me, and I added this line:

$(".home_widgets .widget:eq(3)").css("margin-left", "0");

to make the 2nd line of 3 widgets line up with the first batch.


3. Of course, I've made a few custom tweaks to the stylesheet so far, such as adding more space below the unordered lists in the .home_widgets .widget class, and adding underlines to the links in the .home_widgets .textwidget.

I made the Rabbit Software website

I made a very simple WordPress-blog-based website for Richard's new adventure in consulting:

rabbitsoftware.com

Wordpress: show paginated list of posts at URLs other than site root

I FINALLY fixed the problem on Pugix's blog where the "more recent posts" wasn't paginating properly to older posts. Sadly, my question was ignored on the WordPress forum.

I found the answer in this WordPress documentation codex page, Making Your Blog Appear in a Non-Root Folder.

I *did* have to create a new template. The key was this: the posts.php template isn't a display template, it just generates the query, then loads the display template, index.php. So happy!

Revising Pugix's Wordpress Blog

Over the Memorial Day weekend I delved back into WordPress and made some needed changes for pugix.com, my husband's analog synthesizer blog. It uses WordPress 2.9.2, the current release, and a pack o' plugins.

In essence, we wanted to get current content onto the homepage, not just as a little "what's new" link in the sidebar. About four years ago I used WordPress to convert his static HTML, hard-to-maintain synth website into something that had better web presence and was more easily maintained and had an easier future development path. Now we wanted to make it a bit more blog-like by making the new content easy to find, and keeping the homepage fresh.