Up until now, all the various design tweaks I’ve made on this site have been conducted from within the TypePad interface, without my mucking about with any of the code. That’s starting to change, however, as I start to incorporate some of the conventions I’ve gotten used to with my templates at The Long Letter into the site here. I’m taking things a little slowly to make sure I don’t break anything (permanently), but work has begun.

Some details and thoughts on my changes follow.

(The following notes will be updated as I work my way through the various templates and make my changes.)

All templates

Two minor changes have been made to all the templates.

The first is purely cosmetic, in that I’ve adjusted the indenting of all the HTML code so that it’s easier for me to track through. As a side benefit, it should be a bit easier for other people if they go poking around in my source code.

Secondly, and important for usability, I’ve noticed that in the default templates, none of the hyperlinks have the title attribute set (the text that shows as a tooltip in most browsers, or before the URL in the status bar in Safari). I was somewhat surprised by that, but it’s a fairly simple fix for most of the tags.

Archive Templates (category and monthly)

The default templates for archives display every post in its entirety in reverse chronological order (exactly which posts are displayed depends on the archive type — all posts in a single category for category archives, all posts in a month for monthly archives, etc.). That may work well if you create short posts, or don’t post terribly often, but for me, it’s a nightmare. I tend to babble and create (ridiculously) long posts, and while this site is new, if I do end up adopting TypePad for my permanent home once it’s open for business, then I’m going to want to import all two years plus of my archives. Obviously, with the default templates, this could make for extremely long archive pages.

So, to combat that, I set up my archive templates to create essentially a ‘table of contents’ for each archive page. Each archive page now displays the title of each individual post, linked to the post’s individual entry page. After that comes the post excerpt, then a brief listing of the post’s metadata (post time and whether any comments have been added — were I creating a multi-author weblog, post author would be included also).

With this setup, while each archive page will still grow over time, it will be substantially smaller than it would be if it were displaying the entirety of each post. By including the post’s excerpt, it allows for a little more contextual indication of what each post is about, so it should still be relatively easy to find individual posts.

Currently (as of 8:20pm, July 13th) I’ve only altered the category templates to reflect this scheme, but monthly archives should be updated shortly.

7/13 8:54pm: Monthly archive pages have also been updated.

Archive templates (individual)

Not too terribly many changes here, aside from the aforementioned HTML re-formatting and adding title attributes to the hyperlinks. I did tweak the post metadata line so that the permalink is attached to the timestamp on the post rather than a single word that just says ‘Permalink’, and then added permalinks to individual comments with the same style. Other than that, it’s primarily the same.

I would eventually like to see if the live comment preview I have working on my individual pages on The Long Letter will work in this layout, but I’ll probably save that for another night, just in case it turns into more of a battle than I think it will.

Main index template

Again, like the individual archives, not too many changes — primarily just the formatting of the metadata line, with permalinks moved to the post time. Not that exciting, overall.

Main archives template

The default main archive template is functional, but nothing more than that. A simple list of links to the monthly archives, with links to category archives (if you’re using categories) below that. Not bad, of course, but I wanted to do better.

The monthly archive links I’ve kept more or less the same, with the exception that rather than listing out one on top of the other (and using up a large amount of vertical space for very little information), they list out horizontally. Of course, you can’t really tell that now, but when we roll around to August it’ll be more obvious.

For the category archives, I’ve included the post titles to the last ten posts in each category beneath the category title. The title itself links to the full category archive page, while the post titles link to their respective individual pages. It’s not much more information that what was available before, but it does give a little bit more, and can make searching for a recent post a little quicker than digging through each archive page if you don’t quite remember what category it got tossed into.

10 thoughts on “Tweaking TypePad Templates

  1. TP does a good job for both kinds of users I have found. First few days I left it in the WYSIWYG mode and was quite impressed, especially with the drag-and-drop content ordering interface (though I kept wanting to drag items right off the page to remove them from the list all together.)

    In the “advanced” mode it is straightforward enough and the Modules idea is good (though an odd title IMO.) Though once again it shows that a browser is not a desirable code editor. Indenting with the tab key as always does not work.

    Also beware; If you make a change don’t click Publish thinking it will save and publish the code. It just publishes without saving. Thank Berners for the back button!

    Nice site Michael, thanks for the first comment on my blog, glad to see the system works :-D

  2. Hey Paul. :)

    Though once again it shows that a browser is not a desirable code editor. Indenting with the tab key as always does not work.

    Oh my lord, is that ever true. I ended up doing all the major coding in BBEdit — copying the code into BBEdit, making my changes, then copying it back into the web form. Minor extra steps for a lot more ease of coding.

  3. Juan — if you signed up for the top-tier level of the TypePad beta, it should be available to you. If you’re using either the low- or mid-range tier, you may not have access.

    There’s more information available in TypePad itself, too. Once you’re logged in, go to the ‘Help’ area, and look for the entries regarding Advanced Templates.

  4. I’m pretty new with typepad – but so far it looks really cool. I’m wanting to convert my website of trip reports into a blog and so far it looks like TypePad will be the best way to go.

    I’m really impressed with what you did with the archives — that’s exactly what I want for my site (just a list of articles with an excerpt, rather than ALL the posts)

    Can you help me to figure out how to do that?

    BTW – I’m also curious on your thoughts regarding using TypePad over installing MoveableType on your webhost? This is much cheaper if you have multiple sites, like I do, with their own domain names, but I don’t know how hard it is to implement Moveable Type as compared to TypePad — have you tried both?

    Thanks in advance for any help!

  5. Well now I feel like a real fool — I can’t even remember my own URL or check my post for typos!! Here is the CORRECT link for my travel guides site, and my email address is now correct as well in case you would honor me with a personal reply. I am really excited about what you’ve done with your archived category and monthly posts. Looking at the date of your post, I wonder if you’ll even see this comment..

  6. Emily — I did indeed see your comments, and I’ll be sending an e-mail your way soon. I just worked an oddball shift today, so I’m off for a nap right now…probably later on tonight. :)

Comments are closed.