einserver.de

A little help for creating themes for Tumblr

Today everyone is expected to have a blog. Tumblr offers a convenient method to create one very fast. It has it's drawbacks (read: downtimes), but there is one thing that makes it stand out against it's competitors like Posterous: Their theming engine is really excellent and makes it easy to go from static mockup to finished template. They also allow the use of JavaScript, which is also a big plus when you want to add fallbacks for CSS3-effects and so on.

So I started creating templates like the one for Georg.

With my current project I realized it can be quite time consuming if you want to make changes to the HTML once you converted it to a template with Tumblrs template tags in it.

The solution however was pretty straighforward: Using a small bit of JavaScript to strip all {blocks} allows you to display the html your working on locally without unwanted effects to the layout.

The script

<script>
    var body = document.body, bodyInner = body.innerHTML;
    body.innerHTML = bodyInner.replace(/(\t|\n|\r)(\{\/?block:[A-Za-z0-9]+\})/g,'');
</script>

The explanation

Paste the four lines at the very end of you , right before . It's definitely not the most beautiful JavaScript I wrote, but it works quite well. It won't strip conditionals etc, but it's not a big thing to adjust the pattern, if you want to share a more powerful version, don't forget to email me so I can link it here.

Remember to remove the script before you upload the HTML to Tumblr!

Shameless plug

If you need a theme for Tumblr and are aware of the situation that a hand-tailored solution isn't available for free, don't hesitate to contact me.