Beantin webbkommunikation

Beantin Beta Blog

Experiments, investigations, and tests of web things
January 21, 2011

Customise your static Tumblr pages

Tumblr can be surprisingly flexible using a bit of CSS and a few theme variables. When Tumblr added static pages (and redirects) in March 2010 it opened up a whole new range of possibilities. Unfortunately, Tumblr missed a few important features out – such as a block in the theme for controlling the display of static pages.

What this means in practice is that anything you have in your template for “permalink pages” – such as a retweet button, or a commenting system, will be visible on your static pages and, well broken.

What makes them even more broken is that static pages don’t have a {Permalink}, {PostID} or a working {ShortURL}. A whole load of variables return nothing or incorrect values when pages are displayed.

I’ve emailed Tumblr a few times, at regular intervals, and highlighted these problems and flaws in their system – but I usually get a thanks but then nothing. Guess everyone else is too busy uploading pictures of dogs to notice the bugs.

But, at last I’ve devised a way to identify static pages from your theme. This then gives you the opportunity to hide (or show) sections of your code. You can’t avoid things loading or scripts being fetched (such as retweet buttons or Facebook like buttons) but at least they will be hidden from sight.

The solution is thanks to the buggy {ShortURL} variable. On static pages {ShortURL} always returns http://tumblr.com/xpm0. So you just bracket the section you want to hide as follows…

<div id="{ShortURL}-hide">
part of your theme you want to HIDE on static pages
</div>

…and then add bit of CSS to the style section of your custom theme…

div[id$="xpm0-hide"] {
display: none;
}

If you want to add the ability to limit the visibility of something just to static pages, then you need adjust the style as follows…

div[id$="xpm0-hide"], .static-only {
display: none;
}

div[id$="xpm0-show"] {
display: inline;
}

…and then wrap the section you want to show like this:

<div class="static-only" id="{ShortURL}-show">
part of your theme you want to SHOW on static pages
</div>
Related Posts Plugin for WordPress, Blogger...

Tags

Filed under Configuration, Tumblr.

Tags: , ,

Theme Beantin created by James Royal-Lawson. Privacy Policy