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: , ,

  • Thanks for the hint! Static pages are a bit more meaningful know…

  • Pingback: Quora()

  • I couldn’t get that to work. Wrapping {block:PermalinkPagination}{/block:PermalinkPagination} around the disqus code I didn’t want on my static pages worked for me though.

  • Nice hack, so disappointing that Tumblr has neglected what seems like an obvious need.  I have been messing with how to show facebook code to only pages, not posts for a while and your solution worked for me :)

    • There are a few irritating things missing from Tumblr, but it’s fun working out hacks to add features. Let’s just hope they don’t “fix” the broken short url function for static pages…!

  • plums

    I couldn’t get {ShortURL} to work consistently, but I did find that static pages generate an empty string for {PostID}, which was good enough.

  • Jaume

    Hello, thanks for this, I couldn’t really find anybody else adressing this subject.

    First, I think that different tumblrs return a different {ShortUrl} for in any of my pages it is Zy4yby

    Second, I have an iframe, inside a div outside of {block:Posts} -it is the map at http://sonsdebarcelona.tumblr.com- and I was wondering if I could use your hack with it to not show on pages. Problem I think is that {ShortUrl} is only returned from inside {block:Posts} and since this iframe is outside {block:Posts} , it does not return anything.

    Thanks for your comments / help

    Best,

    • Yes, it would appear that the {ShortURL} generated is different for each Tumblr site, but still the same for all the pages within that site – so it’s just a matter of adjusting the code in the CSS… as you realized.

      Looks like you’ve got the map problem sorted – I guess you put the map inside a description block so that it only appears on the index page?

      • Jaume

        exactly :) I didn’t know the index label existed, which solved my problem… thank you

  • Hey, thanks a lot for this ! I’ve been spending the last couple days looking for a solution to not show FB comments and such on static pages ! Nice little hack :) I’m very surprised Tumblr does not provide a way to target static pages. 

  • Andrew

    Thanks for the tutorial, but I think I’ve got a different issue—maybe you can shed some insight? 

    I want to use custom variables on specific static pages (not all of them), but it seems like your hack would allow me to display or hide variable based on whether a page is static/non-static only. Custom variables seem to only work when editing site-wide html, not when using the “HTML enabled” editor for individual static pages.For example, at http://steviemusic.com/videos I want to be able to change the videos and titles through the backend. I was hoping to make 10 slots for 10 videos that would look like this in the html of that page: {text:Video 1 Title}{text:Video 1 Embed Code}{text:Video 2 Title}
    {text:Video 2 Embed Code}And so on…In the there would be:        
    And so on…But the variables don’t seem to output correctly (they just display as normal text) when inserted into the html enabled editor of static pages. All normal html/php/css coding works within that same editor, but not tumblr variables. Any ideas?Thanks,-Andrew

    • Andrew

      Sorry, I forgot to add the proper code for displaying html. Here’s a clearer version of the same post.______________
      I want to use custom variables on specific static pages (not all of them), but it seems like your hack would allow me to display or hide variable based on whether a page is static/non-static only. Custom variables seem to only work when editing site-wide html, not when using the “HTML enabled” editor for individual static pages.For example, at http://steviemusic.com/videos I want to be able to change the videos and titles through the backend. I was hoping to make 10 slots for 10 videos that would look like this in the html of that page: {text:Video 1 Title}{text:Video 1 Embed Code}{text:Video 2 Title}{text:Video 2 Embed Code}And so on…In the head section of the site there would be:        And so on…But the variables don’t seem to output correctly (they just display as normal text) when inserted into the html enabled editor of static pages. All normal html/php/css coding works within that same editor, but not tumblr variables. Any ideas?Thanks,-Andrew

      • Andrew

        Well, apparently that code isn’t allowed either. I would delete these posts if I could! Sorry for muddying up your comments section.

  • Ben

    This has been driving me crazy! Thanks for the solution. As another commenter pointed out, though, my shortURL for static pages was different than yours; had to switch it to the correct one before it worked. 

Theme Beantin created by James Royal-Lawson. Privacy Policy