10th June 2008

Text

Permalink Page Styling in Tumblr Themes

I’ve had a Tumblr theme-related idea floating around in my head for a while now, an idea inspired by Twitter.

As you can see on my Twitter page: you get a list of all my updates, as well as a sidebar with information like my short bio, statistics, and a list of people I follow. But if you click through to one of my status updates, everything else disappears, and you’re left with only the update. I think this is great: it removes all other distractions, and leaves just the necessary bits. I think this could have a real use for blogs, and tumblelogs in particular. So I made it happen.

I updated my Peacock Tail theme to use the idea of removing all extraneous elements when looking at a permalink. Here’s one for example. The sidebar and navigation have gone, and the post content is pushed into the middle of the page. I was tempted to take it even further and remove the header and footer as well, but I think a certain amount of context (and a link back home) is necessary. That said, there’s no limit to how far you could take the idea. You could even add certain things to permalink pages, or use an entirely different theme, if you wanted.

The implementation was pretty easy, and anyone with any knowledge of CSS and Tumblr’s theming system has probably guessed it already, but I’ll explain it briefly anyway.

Using the permalink block ({block:Permalink}), I did this:

<body{block:Permalink} id="permalink"{/block:Permalink}>

So now, on all permalink pages, the body has the id permalink, which means you can make CSS hooks that apply only to elements on permalink pages. So, something like this in your CSS would remove the header and the sidebar of a theme:

body#permalink #header { display: none; }
body#permalink #sidebar { display: none; }

Easy.

As far as I can tell, the only limitation of this is that the permalink block can only be used once per theme. So if your theme already has the permalink block, this won’t work. (If you use comments, for instance, your theme already uses it.) But hopefully someone smarter than me can take this idea and make it better (a starting point might be the {block:IndexPage} block).