#post notes

{block:PostNotes} <!-- change with your post selector name--> <div class="YOUR POST SELECTOR notes-box">  {block:Date} {block:permalinkPage} {block:NoteCount} <!-- notes title --> <h1> {NoteCountWithLabel} </h1> {/block:NoteCount} {/block:permalinkPage}  {/block:Date} <!-- this is the icon --> {PostNotes-64} </div> {/block:PostNotes}

Before we keep on, let me explain this part first:

<!-- change with your post selector name--> <div class="YOUR POST SELECTOR notes-box">

In CSS we can give multiple selector names to a div without having the trouble to keep wrapping stuff inside the parent selector. In our case, we need to add our post box selector so our notes box will be styled just as a post box, and we also need a second selector to style only the notes stuff. Let’s say our post box selector is called .post-box, then that line of code should look like this:

<!-- change with your post selector name--> <div class="post-box notes-box">

  So if you have backgrounds, borders or box shadows applied to your post boxes, everything will automatically apply to the notes-box as well! Don’t forget the space between the two selector names (post-box SPACE notes-box). To find your post box selector, just look to {block:Posts} and see what’s coming after that (or before in some cases).

Let’s move on to the styles then. The fun Part!.  This is to style the title:

.notes-box h1{ text-align:left; }

This is to get rid of the ugly numbers and white spacing at the left:

.notes-box ol{ margin:0; padding:0; list-style-type:none; }

Add styles like font families or sizes, text aligns or colors to  this selector:

.notes-box{ font-size:.8rem; }

To make the icons go right after the name and align them to the center baseline, you can use floats (if you’re comfortable) or flexbox:

.notes-box li{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.5rem 0; position: relative; }

gap:.4rem makes a nice space between the icon and the name. margin, do the trick between each group (top and bottom). Position relative here is just in case  if you want to add icons. If you wont, you can delete this part.

To style the icons itselves, add css styles to this:

.notes-box img {  width: 32px !important;  height: 32px !important;  border-radius: 100%;  object-fit: cover;  max-width: initial; }

This is an example, you can take off the radius if you don’t want them as circles, or change the width and height as well.

optional:

If you don’t necessarily want to show icons to the images like this

then you’re done and just skip the rest of this tutorial!

To add the like or reblogged icon to the images, you must add this:

li.note.like::after, li.note.reblog::after {    content: '';    background-image: url(LINK TO THE LIKE ICON);    position: absolute;    --size: 14px;    width: var(--size);    height: var(--size);    background-size: cover;    box-sizing: border-box;    bottom: 0; /* positining of the icon */    left: 20px; } li.note.reblog::after {    background-image: url(LINK TO THE REBLOGGED ICON); }

you can use png or svg. Use the left: 20px to positioning the icon for both of them. since bottom is equals to 0, it’ll make sure the icons always stay at the bottom. --size:14px changes the values for both width and height to make a perfect square. In the first half of the code, notice that I put the pseudo elements for both icons and then used specificity to overwrite the link to the second one. 

Css is amazing guys. Thanks for the request and feel free to send any question. Let me know if there’s something hard to understand, or if there is something you want to add and I didn’t covered in this brief tutorial!

bye.

PART 2 - how to add a user added your gif to a post and user replied to your post icon: Request by anonymous person!

Fist thing is to find your icons and its links. In the tutorial, I’ve linked flaticon, because it’s easy to use, but I didn’t find any icons that are similar to tumblr’s so I made my own (let me know if you want a tutorial on how to make and host your own svg icons --they’re better than png, I promise)

So we need to edit our current css code to add the styling to the icons selectors. The last code of the tutorial is the how to apply the svg part:

li.note.like::after, li.note.reblog::after {   content: '';   background-image: url(LINK TO THE LIKE ICON); (.....) ** rest of the code goes after this**/

We’re going to add the selectors altogether with the like and reblog, so we can reuse the css basics content of pseudo elements without overwriting our theme (pretty cool, isnt it? :^))

Then your code will look like this:

li.note.like::after, li.note.reblog::after, li.note.post_attribution::after, li.note.reply::after { li.note.reply::after {   content: '';   background-image: url(LINK TO THE LIKE ICON); (.....) ** rest of the code goes after this**/

Don’t forget to check the commas after each selector. Now’s the icons part. Since we used the basics just to positon the icon to not write a lot of coding, you can overwrite the pen and bubble icon by adding the specification after:

li.note.post_attribution::after {    background-image: url(YOUR PEN ICON); } li.note.reply::after {    background-image: url(YOUR BUBBLE ICON); }

But don’t forget to add this code AFTER the pseudo element coding, or else the specificity of the css won’t work.

Also, you can apply some css to the actual reply of the person who commented on your post (like the text in blue I have on my theme). This is the code:

li.note span.answer_content {}

Also! You can find the selectors tumblr uses by using your inspect tool (ctrl+shift+i) and hovering the element you want to see the source:

in this case, hovering the ‘added this gif to a post’ text showed me the span.action selector. So if I wanted to change the background or text color, I just need to add span.action{ code} to my css field! Simple!!!!