7 October 2010

How To: Add notes to your Tumblr theme (tutorial)

This post will briefly explain how to display notes and a note count to a custom HTML Tumblr theme. You should be able to do this even with a very basic understanding of coding.

Notes are Likes, Reblogs and Replies from Tumblr users. They may be visible by default in some themes, but in others (like mine) they aren’t built in and must be added manually. I coded the notes into my theme last night, and got stuck at various points. I couldn’t find a proper tutorial to help me, but hopefully this how-to guide will help you with problems you might have along the way.

EDIT: This post accounts for half of the site’s visits. If you’re interested in similar things, check out the post on adding a scroll-to-top button. Otherwise, why not check out some of the other things I’ve posted, and see if anything else interests you?

EDIT2: I’m no longer updating this blog. If you work out how to make this work, please share your tips in the comments below, or help out other people who are stuck.


The basics:

  • Adding a #notes to the end of a post

This will add a counter of how many notes the post has, and will be visible on the main page and on the post itself.

(Code found here: http://www.tumblr.com/docs/en/custom_themes#notes)

  1. Go to Customise
  2. Open the “Theme” and make sure that custom HTML is enabled.
  3. Find ”{/block:Posts}
  4. Paste ”{block:NoteCount}" just before "{/block:Posts}”.
  5. Paste “{NoteCount}" or "{NoteCountWithLabel}”, depending on whether you want it to display “2” or “2 notes”.
  6. Close the NoteCount block by pasting “{/block:NoteCount}" immediately after "{NoteCount}
  7. If you want it to link directly to the notes on a post, add “<a href="{Permalink}#notes">" before "{NoteCount}" and "</a>" afterwards.
  8. You need to put “{PostNotes}" just before "{/block:Posts}”.

In my theme, I  integrated it with my Disqus comments, so it will display something like “1 note, 1 Comment and 0 Reactions”. 

The code for that:

{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>, {/block:NoteCount}<a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>

Or, without Disqus comments included:

{block:NoteCount}<a href=”{Permalink}#notes”>{NoteCountWithLabel}</a>{/block:NoteCount}

  • Showing the notes after each post

This will be visible only on the post (permalink page) itself. If the post has 0 notes, it will not be shown.

  1. Figure out where you want the notes to be placed. If you are using Disqus comments, you might prefer your notes to be before their massive comment box. You might prefer after all the Disqus code, as I did (my posts appear as: Post->Disqus Comment Box->Disqus comments->Notes).
  2. Once you’ve decided where they should appear (for the sake of example, I’ll be talking about putting them after the Disqus comments. ), I recommend creating a division. This allows custom formatting in that specific area.
  3. Find the end of the Disqus comments (…</script> is the end of mine). Paste <div class="notes"></div>.
  4. Between the two tag (ie, between ‘>' and '<’), paste “{block:PostNotes}”, followed by “{PostNotes}" and closed off with "{/block:PostNotes}”.
  5. Around ”{PostNotes}”, create a link with the code “<a name="notes">" before and "</a>" afterwards. This allows jump-to links to work (so that the "<a href=”{Permalink}#notes”>" from earlier will take you to the notes section of the page).

Overall, it should look like this:

<div class=”notes”>{block:PostNotes}<a name=”notes”>{PostNotes}</a>{/block:PostNotes}</div>

Note: You can copy-paste that to pretty much wherever you want the notes to display on the post’s permalink page.

The interesting bits:

  • Modifying the style

Setting the appearance of notes is obviously an important part of your blog’s theme.

  1. Go to the CSS in your theme. Basically, find “</style>”. If there is also a “{CustomCSS}" tag, place the code before that.
  2. I can’t possible go through all permutations of changing their style, so I’ll give you an idea of what (I think) each bit of code does. 

You can copy-paste the following and have the style as I’ve modified for myself (ie, as it appears on KiteZA), or you can play around and edit the variables until you’re happy with what you’ve got. My comments appear afterwards, in italics.


    ol.notes{padding:0px;margin 0px 0px;list-style-type:none;border-bottom:solid 1px #ccc;font-size:11 px;}

    ol.notes li.note{border-top:1px dotted #cccccc;padding:0px;font-size:11px;}

    ol.notes li.note img{padding:0 px !important;}

    ol.notes li.note img.avatar{vertical-align:-15px;margin-right:5px;width:16px;height:16px;}

    ol.notes li.note a img.avatar{padding:0px;border-width:0 px;border:none;}

    ol.notes li.note img{padding:0 px;border-width:0 px;border:none;}

    ol.notes li.note span.action{font-weight:bold;}

    ol.notes li.note.answer_content{font-weight:normal;}

    ol.notes li.note.blockquote{padding:1 px 1 px;margin:1px 0px 0px 1px;}

      ol.notes li.note.blockquote a{text-decoration:none;}


If you want to change the style to better suit your theme, the following is an explanation of what each piece does and how you can change it.

  • ol.notes:

    Basic style of the notes. Basic font size that I replicated all over the place because it seemed to display improperly a lot.

  • ol.notes li.note: 

    I think this is the formatting for each individual note (as opposed to the entire block of notes). Again, play around with it and see what happens. Basic CSS styling

  • ol.notes li.note img: 

    This was one of the most frustrating things to fix. Without it, all of the avatars had an unsightly grey block around them inherited from the regular pictures on the blog. As it turns out, the !important is VERY important to solve that.

  • ol.notes li.note img.avatar: 

    NB - If something goes wrong, it’s highly likely to be the vertical-align. My blog required significant realignment, most of the values I’ve seen for this are about -4 or so. EDIT THE VERTICAL-ALIGN VALUE if the avatars look strange/out of place

  • ol.notes li.note a img.avatar: 

    Honestly, I don’t know how this differs from the img.avatar above, but I’m guessing it has something to do with links

  • ol.notes li.note img:

    I think this is unnecessary, and I just added it to try get rid of the grey blocks around the avatars

  • ol.notes li.note span.action:

    This applies after the name, so if the note is “KiteZA liked this”, the formatting here will apply to the words “liked this

  • ol.notes li.note.answer_content:

    This applies to the actual reply given. If the note is KiteZA said: ‘formatting!’" then this would apply to formatting!”. Useful for distinguishing from the action (replying) from what they said if they replied.

  • ol.notes li.note.blockquote:

    As far as I know, this applies to any text added in a reblog. If the note is KiteZA reblogged and added: ‘oh good, a tutorial!’" then this would apply to 'oh good, a tutorial!'”. Useful for distinguishing from the action (reblogging) from what they added on their blog.

  • ol.notes li.note.blockquote:

    As above. To do with links shown in a reblog’s added text.

  • Adding the awesome icons found on the dashboard

Personally, I liked the icons Reply (answer/replies), Like (heart/love) and Reblog (reblog). I wanted to use them for notes found on my posts, not just have them visible on the dashboard.

If you like them too, then add the following to your code just after any of the “ol.notes" found above:

ol.notes li.note.reblog{text-decoration:none;background:url (http://static.tumblr.com/thpaaos/Pi9koovm1/notes_reblog.png) top right no-repeat !important;}
ol.notes li.note.like{background:url (http://static.tumblr.com/thpaaos/xXlkoomos/notes_like.png) top right no-repeat !important;}

ol.notes li.note.reply{background:url (http://static.tumblr.com/sg847ig/EWWl9uqqw/notes_reply.png) top right no-repeat !important;}

When adding these on my blog, the reply icon was the most difficult to implement properly. To cut a long story short, copy-paste the code above. If you’re getting strange results, try using:

ol.notes li.note.reblog{text-decoration:none;background:url (http://assets.tumblr.com/images/note_reblog.png) center right no-repeat !important;}
ol.notes li.note.like{background:url (http://assets.tumblr.com/images/note_like.png) center right no-repeat !important;}

ol.notes li.note.reply{background:url (http://assets.tumblr.com/images/note_reply.png) center right no-repeat !important;}

(The top version uses a larger version, where 3/4 of the image is invisible and the actual icon is in the bottom left corner. The bottom version uses just the icon itself, which might work better on some themes.)


This code above should successfully enable notes on a custom-HTML Tumblr blog.

Whether on your main page, like http://kiteza.tumblr.com/, or on each individual post, it should appear under the posts like this:

3 notes,

And at the end of the individual post, you can see what the notes actually are:

  1.  kiteza said: 
  2.  kiteza posted this

Hope this tutorial helps!

Note: I cobbled together the notes on my page by seeing what other people had done, viewing the source of their Tumblr pages and teaching myself bits of HTML and CSS

Don’t understand something I’ve written? Want a step-by-step guide through the process? Want me to do it for you? Contact me over on the right, comment on this post, or reply to it. As I’m no longer updating this blog, please post in the comments below asking for help from the community. This post has had over 11,000 views - I’m sure somebody has encountered the same problem as you, and can help out. If you figured out something that wasn’t in the tutorial, please help out others by posting tips below!

  1. usefuls-things reblogged this from heatheruru
  2. heatheruru reblogged this from kiteza
  3. haruthereisapoolhere reblogged this from kiteza
  4. dearfionna reblogged this from kiteza