ejdraper.com

Advanced Tumblr Customization

As I hinted in my last post, I wanted to outline a few tips and tricks I used to customize this site pretty heavily when getting it up and running on Tumblr.

The documentation for building custom themes is pretty comprehensive, and covers the majority of things you’d want to do when building a customized site. I won’t rehash it here, needless to say it’s a relatively straightforward templating syntax that doesn’t take too long to get your head around.

One of the things that the current theme syntax does omit is to be able to identify when you are on a private post, or specifically, when you aren’t. Often you’ll want to drop in Disqus or another such script-based commenting system on all posts - except private posts, if like me you are using them as about or contact pages, you don’t really want to invite user comments for them!

The way I tackled this was to have the comments script embedded on all post pages, but to then hide it for specific pages. The easiest way to then choose to hide it on private pages, was to use the post IDs. If you wrap your comment code in a div similar to the below:

<div id="comments_{PostID}" class="comments">

You’ll then end up with something like this on the actual post:

<div id="comments_252690956" class="comments">

This then means that if you know the post IDs for the private posts (or any posts that you don’t want this to show on), then you can use CSS like the following to hide the comment form:

#comments_252690956 { display: none; }

To find the post ID for a private post, you can look at the URL. It will look something like this (this is the URL for my portfolio page):

http://ejdraper.com/private/252690956/tumblr_kthwgddWRp1qap2vc

In this case, the post ID is 252690956.

This isn’t the most ideal solution, as the comments form is still on the page but just not shown, however given the lack of a way to separate private posts from public posts within the Tumblr template syntax, for now this will have to do.

Using the same technique, I accomplished the exact same results with the pagination which I wanted on each public post, but not on private posts:

{block:PreviousPost}
  <a class="pagination pagination_{PostID}" href="{PreviousPost}">
    &#171; Previous post
  </a>
{/block:PreviousPost}

.pagination_252690956 { display: none; }

I used a class here to identify the pagination div, as I actually have two, one for previous post, and one for next post, and so used the same class for both.

Another little trick I had to employ, was to do with my banner image that appears only on the homepage. The syntax for identifying the index page refers to any type of index page, which also runs to both search result pages, and tag result pages. So this means that placing my header image solely within a {block:IndexPage} means it’d also show on both search and tag pages too, which I didn’t want. Seeing as how there is syntax for identifying a search page ({block:SearchPage}) and a tag page ({block:TagPage}), we can use these to specify a class that will cause the banner to be hidden in those circumstances, leaving it showing on the other remaining type of index page, the homepage. The code looks a little something like this:

{block:IndexPage}
  <div id="index"
    {block:SearchPage}class="hidden"{/block:SearchPage}
    {block:TagPage}class="hidden"{/block:TagPage}>
    <a href="/">
      <h1 id="logo">Elliott J Draper, Freelance Developer</h1>
    </a>
    <div id="headings">
      <div id="web">Web and mobile development</div>
      <div id="rails">Ruby on Rails specialist</div>
      <div id="deliver">I always deliver</div>
      <div id="bank">And I won't break the bank</div>
    </div>
    <div class="clear"></div>
  </div>
{/block:IndexPage}

And the CSS is real straightforward:

.hidden { display: none; }

Besides those couple of little tricks to get around some minor limitations in the theme templates, other customization is made relatively simple by the rest of the fairly powerful theme syntax. The only other thing to mention is custom text and images. To enable you to quickly edit certain bits of the theme, such as links or header text, or to upload images, you can use a special bit of syntax. For text:

{text:MyCustomText}

and for images (this puts the URL path to the image into the HTML):

{image:MyCustomImage}

If you then declare these in the head of your document as follows:

<meta name="text:MyCustomText" content="">
<meta name="image:MyCustomImage" content="">

then you’ll see these options now in the “Appearance” tab of the Customize Tumblr view. For images, there will be an upload option to specify the image, and for text you can simply enter the value you want to use. In this way, you can store headings and external links as text, so that you can easily change them, and you can store all images you need for your custom design as custom images which you upload.

Hopefully some of these tips and tweaks will be useful to others customizing sites on Tumblr - I find that on the whole the theming on Tumblr is very straightforward, and a lot of fun. With a bit of thought and planning, it’s simple to create a decent customized site and get it up and running on Tumblr.