Designing for Flow by Jim Ramsey

I've been remiss in not posting here for a few days, but I've been busy with my son's first birthday, my 7th wedding anniversary, an upcoming kitchen remodel, not to mention the presidential race. I plan to start blogging regularly again this week.

I have to agree with Chris Basey, who commented on my previous post, that Veerle Pieter's blog is probably the best-designed blog out there. It’s extremely straight-forward and clean, but so visually beautiful and interesting.

Like all great design, it’s the details that really set it apart from everything else. A great example can be seen in the screenshot to the right. Notice that the left thumbnail image has a subtle shading on the left that matches the shading above and below it. It’s a minor thing, but when added together with all the other perfectly executed details, you get a site that's wonderfully layered and rich.

What blogs are so well-designed that they make you say, "I wish my blog looked like that"? What is it about them that makes them good? Please comment with your favorites.

Anil Dash's blog has an updated design and I'm proud to say it's a modified version of Mid-Century. Congrats to Anil on the ninth anniversary of dashes.com!

Today I'm going to describe how to add a list of pages to the sidebar in the Mid-Century theme. The example I'm giving here creates a single-level list without folders.

First, create a new template module called “Pages” and paste in this snippet (will open in new window).

Next, edit the “Sidebar” template module and find where the “About Me” module is included and paste the following directly after that:

<$mt:include module="Pages"$>

Republish and you should be all set.

Creating the list of related stories on each entry permalink is really easy. This is based on the Devlounge tutorial by Bill Mabray, but I've modified the template code slightly to make it work with Mid-Century. Remember, for this to work your entries have to be tagged consistently.

First, go to Design > Templates and click to edit the "Entry" Archive Template and find the two <mt:Include> tags that insert the Trackbacks and Comments modules. You'll be adding the new template code just above these. Next, copy and paste this code snippet (will open in new window) above the Trackbacks <mt:Include>.

Make sure that when you paste in the snippet the quotes are not converted to smart quotes (“ ”) in MT. It wasn't working for me at first and then I realized that this had happened and had to change all the quotes.

That should do it. Let me know if you have any difficulties.

I'd like to thank everyone for the suggestions on how to continue to improve the Mid-Century theme. Here are the things I'm hoping to write tutorials on in the next week or so:

• Sidebar Pages module
• Pages/folders in the top nav
• Gallery displaying a random image
• Limiting the length of archive lists in the sidebar

Making it a fluid layout is a more difficult task, but I'll keep it in mind. Keep the requests coming.

I'd like to thank everyone for their interest in this new theme for MT and I hope the little tutorials I've been blogging about the last few days have been helpful.

I've had requests for Mid-Century as a community blog and adding userpics to comments, but besides those things what else do you want to do with Mid-Century?

Replacing the graphic in the black bar at the top of each page is easy. You'll need to create a new PNG GIF image with a black background that is 46px by 46px. Name it "logo.png" "logo.gif" and upload to the /mt-static/plugins/mid-century/ directory, overwriting the existing image. The change should be immediate without having to republish your site.

Update: Jason pointed out that the standard version of Mid-Century has a different graphic in the header that's a GIF rather than a PNG.

If you’re using the Mid-Century theme you may find that you don’t want every one of your image assets to appear in the photo gallery widget. It’s easy to limit the images that appear there using tags.

First, go to Manage Assets and select the images you want to appear in the photo gallery widget. Choose “Add tags…” from the “More actions…” menu and tag those images “gallery.” Next, edit the “Gallery.” template module

Around line 6 you'll see:

<mt:Assets type="image">

Change it to:

<mt:Assets type="image" tag="gallery">

Then you need to change it again around line 23:

<mt:Assets lastn="10" type="image">

Change it to:

<mt:Assets lastn="10" type="image" tag="gallery">

Now only images that are tagged "gallery" will appear in the photo gallery widget. Republish your site and you're good-to-go.