Give your Tumblr Posts their own Class or ID for unique style

Here’s a really neat trick I just learned with Tumblr. In a recent comment someone asked me how to remove a pinterest button from single posts, and have them only display with each post in her main index feed.

The easiest way to do it is to add a class that only appears on single posts, its actually pretty simple and really makes me love tumblr for having this kind of flexiblity. Here’s how:

  1. In the Edit HTML view of your Tumblr (in customize appearance), find this tag: {block:Posts} and paste this code immediately AFTER it:
    {block:PermalinkPage}<div class="single-post"> {/block:PermalinkPage}

  2. Find this tag: {/block:Posts} and paste this code immediately BEFORE it:
    {block:PermalinkPage}</div> {/block:PermalinkPage}

So what you’ve just done is added a containing div that only appears around content on a single page/post. This gives you a lot of flexibility in what you can do with the CSS, so if you want to remove your pinterest button from single posts, just add this to your custom CSS:

.single-post .pinterest {display: none;}

(this is assuming your pinterest button has a containing element with class=”pinterest”)

With a little CSS knowledge you could really use this information to completely redesign single pages and have them look entirely different from your index page if you want. Imagine the power!

Feel free to contact me on tumblr or comment below if you have questions about how to do this!

 

One thought on “Give your Tumblr Posts their own Class or ID for unique style”

Leave a Reply

Your email address will not be published. Required fields are marked *