#post notes

[frau-wilhelm-klink]

Completely random - and unasked for - thought, but I wish Tumblr had the ability to heart comments in the notes as well as an actual post. Some of you just be casually dropping gems in those, and I for one would like to show my appreciation for that.

[starlight-lacrimosa]

Saudade; Milestone

I just recently finished an event submission for @soleillunne. I would like to thank you for the opportunity in letting me take part in your event~! This is my first time participating in something like this and it has been an honor. Hopefully, I get to participate in any future events you may end up hosting. ;)

Huge thanks to @heiayen as well for co-writing the story with me~! I saw your tag comments and I'm so glad you loved the results. It was quite fun working with you. I would have honestly made Scara more unhinged but I think I preferred the way he hid his madness behind such elegant cunning. It certainly matches his two-faced persona when he was first introduced in canon and in the beginning of our plotline hehe. ;)

Also, I would like to tag @seelestia whom holds fondness for Scaramouche/Wanderer. If you're interested in seeing a two-faced Scaramouche in a Spy AU, feel free to check the green link above~! Not much "Wanderer" in the character, but I think you would still love him due to how I based his behavior on Ayato in some way. ;)

REPOST NOTE: @soleillunne I saw your thank-you comment in the first post of this, and wanted to let you know. Sorry for the double notifs, haha~!

[highdio]

I’ll try to keep tagging new Stone Ocean content #stone ocean anime in case you want to block.

[todorokiscute]

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!!!

[noctusfury]

Wait... I’ve Got HOW MUCH?!

So... I woke up to 160 notes in my activities box. And my Tuffnut’s Painting post received 100 notes in less than two days!!!! That’s the most ANY of my posts have gotten so far! And I’ve just hit a major unexpected milestone!!! Thanks a bunch guys! I never expected this! XD

[abybweisse]

Check some of your Tumblr stats

For notes on original posts and your top 9 posts: http://jetblackcode.com/TumblrNoteCounter

November 17, 2018 (this main blog is a little over four years old):

Not bad for a blog that’s just over four years old and spent the first year and a half doing almost nothing and having no focus....

For all original posts: http://jetblackcode.com/TumblrOriginalPostFinder

For yearly top ten original posts: http://jetblackcode.com/TumblrOriginalPostFinder

[geartime]

Link