• glimmeria likes this
  • ampersandshenanigans likes this
  • usefuls-things reblogged this from heatherkat
  • heatherkat reblogged this from kiteza
  • heatherkat likes this
  • cistro likes this
  • hanwerds likes this
  • anybodihearme likes this
  • beautyofabluebutterfly likes this
  • ask-deedee likes this
  • preferablypayne likes this
  • lucalucalover likes this
  • iceheal likes this
  • paradoxicating likes this
  • winxcest likes this
  • kpop-obsessed-love likes this
  • lndebted likes this
  • doc-kinoko likes this
  • bvikkivintage likes this
  • shed1 likes this
  • psychshippers likes this
  • sansaerif likes this
  • ciiwii likes this
  • gigileaf reblogged this from kiteza
  • belovlng likes this
  • winchesterdragons likes this
  • mocaccino likes this
  • unicornjokeyi likes this
  • thatgirlsgotgame likes this
  • haruthereisapoolhere reblogged this from kiteza
  • cobalus likes this
  • back-flippin likes this
  • acidic-teen likes this
  • rain2day likes this
  • dearfionna reblogged this from kiteza
  • andrewjeffreysamson likes this
  • hayleyhail likes this
  • mikastoygirl likes this
  • dbcrossing likes this
  • teenvvlf likes this
  • thickgirlinthinworld likes this
  • poison-oak likes this
  • heyitsthatgirl likes this
  • wladimirowitsch likes this
  • 997 likes this
  • gigileaf likes this
  • coburns likes this
  • judgejuno reblogged this from kiteza and added:
    this was VERY helpful since I know nothing about computer language ;)
  • allonsyjack likes this
  • anthitadpole likes this
  • " just before "”. 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: <a class="dsq-comment-count" href="http://kiteza.tumblr.com/post/1256267627/how-to-add-notes-to-your-tumblr-theme-tutorial#disqus_thread">Comments</a></div> Or, without Disqus comments included: — 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. 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). 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. Find the end of the Disqus comments (…</script> is the end of mine). Paste <div class="notes"></div>. Between the two tag (ie, between ‘>' and '<’), paste “”, followed by “
    1. glimmeria likes this
    2. ampersandshenanigans likes this
    3. usefuls-things reblogged this from heatherkat
    4. heatherkat reblogged this from kiteza
    5. heatherkat likes this
    6. cistro likes this
    7. hanwerds likes this
    8. anybodihearme likes this
    9. beautyofabluebutterfly likes this
    10. ask-deedee likes this
    11. preferablypayne likes this
    12. lucalucalover likes this
    13. iceheal likes this
    14. paradoxicating likes this
    15. winxcest likes this
    16. kpop-obsessed-love likes this
    17. lndebted likes this
    18. doc-kinoko likes this
    19. bvikkivintage likes this
    20. shed1 likes this
    21. psychshippers likes this
    22. sansaerif likes this
    23. ciiwii likes this
    24. gigileaf reblogged this from kiteza
    25. belovlng likes this
    26. winchesterdragons likes this
    27. mocaccino likes this
    28. unicornjokeyi likes this
    29. thatgirlsgotgame likes this
    30. haruthereisapoolhere reblogged this from kiteza
    31. cobalus likes this
    32. back-flippin likes this
    33. acidic-teen likes this
    34. rain2day likes this
    35. dearfionna reblogged this from kiteza
    36. andrewjeffreysamson likes this
    37. hayleyhail likes this
    38. mikastoygirl likes this
    39. dbcrossing likes this
    40. teenvvlf likes this
    41. thickgirlinthinworld likes this
    42. poison-oak likes this
    43. heyitsthatgirl likes this
    44. wladimirowitsch likes this
    45. 997 likes this
    46. gigileaf likes this
    47. coburns likes this
    48. judgejuno reblogged this from kiteza and added:
      this was VERY helpful since I know nothing about computer language ;)
    49. allonsyjack likes this
    50. anthitadpole likes this
    " and closed off with "”. Around ”
    1. glimmeria likes this
    2. ampersandshenanigans likes this
    3. usefuls-things reblogged this from heatherkat
    4. heatherkat reblogged this from kiteza
    5. heatherkat likes this
    6. cistro likes this
    7. hanwerds likes this
    8. anybodihearme likes this
    9. beautyofabluebutterfly likes this
    10. ask-deedee likes this
    11. preferablypayne likes this
    12. lucalucalover likes this
    13. iceheal likes this
    14. paradoxicating likes this
    15. winxcest likes this
    16. kpop-obsessed-love likes this
    17. lndebted likes this
    18. doc-kinoko likes this
    19. bvikkivintage likes this
    20. shed1 likes this
    21. psychshippers likes this
    22. sansaerif likes this
    23. ciiwii likes this
    24. gigileaf reblogged this from kiteza
    25. belovlng likes this
    26. winchesterdragons likes this
    27. mocaccino likes this
    28. unicornjokeyi likes this
    29. thatgirlsgotgame likes this
    30. haruthereisapoolhere reblogged this from kiteza
    31. cobalus likes this
    32. back-flippin likes this
    33. acidic-teen likes this
    34. rain2day likes this
    35. dearfionna reblogged this from kiteza
    36. andrewjeffreysamson likes this
    37. hayleyhail likes this
    38. mikastoygirl likes this
    39. dbcrossing likes this
    40. teenvvlf likes this
    41. thickgirlinthinworld likes this
    42. poison-oak likes this
    43. heyitsthatgirl likes this
    44. wladimirowitsch likes this
    45. 997 likes this
    46. gigileaf likes this
    47. coburns likes this
    48. judgejuno reblogged this from kiteza and added:
      this was VERY helpful since I know nothing about computer language ;)
    49. allonsyjack likes this
    50. anthitadpole likes this
    ”, 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=”http://kiteza.tumblr.com/post/1256267627/how-to-add-notes-to-your-tumblr-theme-tutorial#notes”>" from earlier will take you to the notes section of the page). Overall, it should look like this: <div class=”notes”><a name=”notes”>
    1. glimmeria likes this
    2. ampersandshenanigans likes this
    3. usefuls-things reblogged this from heatherkat
    4. heatherkat reblogged this from kiteza
    5. heatherkat likes this
    6. cistro likes this
    7. hanwerds likes this
    8. anybodihearme likes this
    9. beautyofabluebutterfly likes this
    10. ask-deedee likes this
    11. preferablypayne likes this
    12. lucalucalover likes this
    13. iceheal likes this
    14. paradoxicating likes this
    15. winxcest likes this
    16. kpop-obsessed-love likes this
    17. lndebted likes this
    18. doc-kinoko likes this
    19. bvikkivintage likes this
    20. shed1 likes this
    21. psychshippers likes this
    22. sansaerif likes this
    23. ciiwii likes this
    24. gigileaf reblogged this from kiteza
    25. belovlng likes this
    26. winchesterdragons likes this
    27. mocaccino likes this
    28. unicornjokeyi likes this
    29. thatgirlsgotgame likes this
    30. haruthereisapoolhere reblogged this from kiteza
    31. cobalus likes this
    32. back-flippin likes this
    33. acidic-teen likes this
    34. rain2day likes this
    35. dearfionna reblogged this from kiteza
    36. andrewjeffreysamson likes this
    37. hayleyhail likes this
    38. mikastoygirl likes this
    39. dbcrossing likes this
    40. teenvvlf likes this
    41. thickgirlinthinworld likes this
    42. poison-oak likes this
    43. heyitsthatgirl likes this
    44. wladimirowitsch likes this
    45. 997 likes this
    46. gigileaf likes this
    47. coburns likes this
    48. judgejuno reblogged this from kiteza and added:
      this was VERY helpful since I know nothing about computer language ;)
    49. allonsyjack likes this
    50. anthitadpole likes this
    </a></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. Go to the CSS in your theme. Basically, find “</style>”. If there is also a “" tag, place the code before that. 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. Code: 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;} Comments: 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  (answer/replies),  (heart/love) and  (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.) — Conclusion: 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:  kiteza liked this  kiteza said: …  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!" />
    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.

    Code:

      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;}

    Comments:

    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.)

    Conclusion:

    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 heatherkat
    2. heatherkat reblogged this from kiteza
    3. gigileaf reblogged this from kiteza
    4. haruthereisapoolhere reblogged this from kiteza
    5. dearfionna reblogged this from kiteza
    6. judgejuno reblogged this from kiteza and added:
      this was VERY helpful since I know nothing about computer language ;)

    ^