Post Notes tutorial
Difficulty: ā ā ā ā ā You must know something about css alone, css pseudo elements and how to use svg icons, as well as positioning with absolute position.
This tutorial was requested via askbox! Is a very simple tutorial and itāll look like this (not the pink background tho, thatās my post background):
Search for {/block:Posts} on your customize page (ctrl+f) and it should have a closing div right at the top </div> . This should be your closing post box selector. If not, try to find your post box selector and just copy it.
Before {/block:Posts} paste the following code:
{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!!!!
I really hope this helped you and let me know if you couldnāt understand something, Iāll gladly try to help!!!
