Designing Interactive Products

Dashes.com now sporting Mid-Century

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!

Adding Pages to sidebar

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.

Adding Related Entries to Mid-Century

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.

Thanks for the great suggestions

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.

Where to go from here?

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?

Changing the logo on 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.

Choose images to appear in the gallery

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.

Top nav is built-in

The Mid-Century theme for MT has an hidden feature that I think a lot of people will appreciate. You might have noticed the addition of a horizontal navigation bar on this site. If you're using this theme and want to enable top nav it's really easy.

Go to the Templates page and edit the "Banner Header" template module. At the very end of this file you'll see a div called "nav" that's wrapped by <mt:Ignore> tags. Simply remove the opening and closing <mt:Ignore> tags and add any additional items you want in the navigation. Republish your site and you're all set.

You can download a beta version of the Mid-Century theme at movabletype.org. The final version should be ready soon.

MT 4.2 has been released!

Today we released Movable Type 4.2. You can read all about the new features in Byrne Reese's post to movabletype.org. My major contribution (in partnership with Beau Smith) was the redesigned template editing UI. If you've ever been frustrated by the way templates are organized in previous versions of MT4, I hope this new release will make your life easier.

A few random MT tips

I've found a couple of really good Movable Type tips and tricks lately so I thought I'd share them.

• My cubicle neighbor at Six Apart, Nick O'Neill, has a great screencast showing how to combine content from different sources into one list.
• Beau Smith, another fellow 6Aer, has a great tutorial for setting a default upload destination in MT.
• I was looking to add a list of related entries to each entry permalink and I found a great tutorial by Billy Mabray on that very subject at Devlounge.
• Actually, Bill Mabray has another great MT-related article at Devlounge called "Enhance Search Results with Thumbnails."

Hope those come in handy. If you have any others to recommend feel free to comment.