#pinned post tutorial

-#: TEXT

While simple, this is easily the place where you can make or break your theme. While tumblr does supply alternative fonts (i use chat for my theme), others are not as nice (lucille im looking at you bitch)...

I have two different places I go to for my fonts. I have a custom keyboard on my phone (it has a subscription option for more fonts that I refuse to pay for), and a website that I copy and paste from. The website has more options, and it's completely free, so I mostly use that...

𝖙𝖊𝖘𝖙𝖎𝖓𝖌 — 𝕥𝕖𝕤𝕥𝕚𝕟𝕘 — 𝐭𝐞𝐬𝐭𝐢𝐧𝐠 — 𝓉𝑒𝓈𝓉𝒾𝓃𝑔 — 𝙩𝙚𝙨𝙩𝙞𝙣𝙜

Keep in mind that using an abundance of fancy text could make it hard for people to read whatever's written in that font. That, and i find using only the copy pasted text to be quite ugly. I've seen someone use the second testing font entirely for their pinned post, and it is not a good look...

The same can be said for making all of your text small, though I personally haven't had issue with small text unless I'm reading fanfiction in the dark...

Text colour is also a nice addition to pull together a theme. While there are some bright colours that you can use from what's provided, it's not much...

This text post goes through the steps of adding custom gradients or colours to text, if that's something you're interested in...

Also, please, for the love of god, put a fucking read more on any text post that's longer than one(!!!) mobile screen in length. The amount of fics that are good that I refuse to reblog because you have to spend 5 minutes just to scroll past it is infuriating and saddening, we don't need a text version of "do you love the colour of the sky?" Okay? Okay...

-#: DECALS?

It's the little things that tie everything together, so I suggest looking here or here or here for some ideas...

To make things easier for you, I would suggest copy pasting anything you like into a google doc, so that you have everything in one place for future use...

-#: DIVIDERS

There are many different ways you can spice up a text post, and dividers are one of them! animated or still work just as good, you just have to find what works with your aesthetic...

There are many places you can find dividers gifs or static, let me know if you would like me to compile a set for you from what I have saved...

-#: PICTURES

Pinterest is my go to for aesthetic pictures. There's a huge variety, and making a pintrest board for your theme will help to curate more options if you wanna change something up...

You can mix multiple pictures together, up to three side by side...

Or you can make it look like there's only one picture by putting white/black/ transparent photos on either side, depending on your theme...

Keep in mind that a post is limited to 10 pictures, so you might have to break out a photo editor if you planned on using a lot of media...

-#: OTHERS

A good place to start for making your theme is to look at the anime fanfic community here on tumblr. The way these people make pinned posts look like works of art...

Some of my favourites:...

#. @bykii #. @eijirhoe

#. @aitarose #. @21-06-1996

#. @tteokdoroki #. @kurosukii

!NOTE! Many of these blogs are 18+ please follow their dni before interacting with any of their content...

Some shameless self promo:...

#. @lxvlxck #. @pythonees

In the end, all that matters is what you like. I tried to keep things vague enough, though I don't know how well I did as this is my first tutorial...

As of May 2020, we’ve been able to pin posts on our blogs. Cool! The problem is that any themes made before May 2020, and maybe even some made after, don’t have any indicators as to whether the first post is a pinned post or not. So, in this basic tutorial, I will be explaining how to stylize a pinned post, which will take us from this:

No indication whatsoever it’s pinned, oh no!

to this:

Clear indication it’s the pinned post!

STEP 1: HTML

Go to Edit Theme, then Edit HTML.

Paste the following into your code after <div id=”entries”>, <div id=“posts”> or <div id=“articles>, <entries>, or <article>. If you don’t know where that is, try pressing CTRL+F and typing {Block:Posts} and you will be taken close. If none of those div’s are there, then simply put this after {Block:Posts} but before {Block:Text}:

here it is on the theme I was using: 

{block:IndexPage}

{block:PinnedPostLabel}<hr><div class="pin-post"><img src=‘YOURIMAGEURLHERE’></img> {PinnedPostLabel}</div><hr>{/block:PinnedPostLabel}

{/block:IndexPage}

Tweaks: Paste a permalink to the image you want to use next to the “Pinned Post” label in place of YOURIMAGEURLHERE, leaving the quotation marks in tact. You can use whatever image you like, but I advise it be square and transparent, otherwise you will need to alter part of the code in the next step so it will fit.

Remove both instances of <hr> if you do not want the horizontal lines above and below the “Pinned Post” label.

Take out <img src=‘YOURIMAGEURLHERE’> if you don’t want to insert an image and would like the label to be text-only.

Make sure any addditions are made to the HTML here (bolding text, adding a link, etc) are made within the confines of {block:PinnedPostLabel) and {/block:PinnedPostLabel}; otherwise, they will affect every post on the index page. For instance, I tried to make mine bold, and when I did, I forgot to put </b> before {/block:PinnedPostLabel} and all the text on all the posts became bold! Not what I wanted to do ^^’. But when I moved </b> before {/block:PinnedPostLabel}, the bolding stopped after “Pinned Post” and things proceeded as necessary.

STEP 2: CSS

Paste the following into your code before </style> (again, you can use CTRL+F to find where that is):

.pin-post {

   text-align: center;

   font-size: 1.2em;

}

here it is on the theme I was using:

.pin-post img {

   width:1.5em;

   height:1.5em;

   vertical-align:middle;

   display:inline-block;

}

Tweaks:

Add 

color: (hex code of whatever color you want); 

under .pin-post to change the color of the text of the “Pinned Post” label, and add or alter any variables as you see fit.

Change the width and height of .pin-post img to suit the ratio of your image (e.g. have them both 1.5em for a square image)

Update the preview to make sure it works, and stylize as you wish from here using basic CSS.

Please keep in mind I’m still learning when it comes to CSS, so I have a lot to learn. If you have any tips on how to make this look prettier, note them in the reblogs! Happy coding! 

Revised 19.08.2017

Note: re-type the quotation marks when you copy/paste codes from this tutorial into your HTML Editor

Find the post in the source code

We have to find the code for the post we want to pin in the source code, then copy/paste it into our HTML Editor, right before {block:Posts}, located below <body> .

{block:Posts} is the html block that generates posts on your blog. Theme makers use div tags (<div class="className">...</div>) to style this element.

Most themes have a div for the entire posts container

e.g.: <div id="posts_container">...</div>

and a wrapper div for each post

e.g.: <div class="entry">...</div>

The {block:Posts} block is located between these two divs, and it is visible only in the HTML Editor.  

The post wrapper div has one general instance in the HTML Editor and several instances in the source code for each post, which will make it easier for us to find our post.  

So, these are the codes we need to find:

the opening wrapper div tag

the actual post code 

the post info, tags, reblog/like, notes, etc. code 

the ending wrapper div tag

The following examples are based on my themes. Each theme maker names their ids/classes differently, so before proceeding to the next step, find out the id/class title of your post wrapper div tag.

Example 1

1) Go to the page of your blog where the post you want to pin is located > right-click > View Page Source. I don’t recommend using permalink pages, sometimes the permalink and index page styles can differ.

Use keywords from your post to find the code faster by using ctrl+f, e.g. caption words, tags, the number of notes, the date, any info that makes that post unique on that page. In this case, I typed "i love you" in the search box.

If your post has no info or caption, open the HTML Editor, click on the gear icon in the upper left corner, select Find and Replace, type in {block:Posts} in the Search for box. Find the post wrapper div located immediately after  {block:Posts} and copy that tag into the search box, e.g.: <div class=“entry”. If you want to pin the third post from the page, find the third <div class=“entry” in the source code.

The green text in <!-- ... --> tags are invisible html comments.

Copy the code right before {block:Posts}

2) Open the HTML Editor on the Customize page and find the {block:Posts} block. It should be located somewhere below the <body> tag. We’re going to copy / paste the code from the blue and red boxes from Example 1 source code between the posts container <div id=“posts_container”> and {block:Posts}.

3) Update Preview > Save.

Make it visible only on the index page

4) If you want the pinned post to appear on every single page of your blog, including permalinks, tagged / search pages, you can leave the code as it is. But unless it’s a really important information for your blog visitors, they might find it a bit annoying to see the same post at the top of every page they visit. In order to prevent that, you can make the pinned post visible only on the first page of your blog by including the following script right before </body>:

<script type="text/javascript">       if ((window.location.protocol + "//" + window.location.hostname + "/") != (window.location.href)) {            $(".a1s2d3f4").hide();            $(".a1s2d3f4").css({'height':'0'});       } </script>

Again, don’t forget to re-type the quotation marks. 

5) Add a1s2d3f4 beside the other class title(s) in the post wrapper div that your pasted from the source code. a1s2d3f4 is a random class title I made up; you can come up with your own, just make sure it’s unique in your code.

Add a ‘pinned’ icon or text

5) We’ll use Font Awesome’s ‘thumb-tack’ icon in this tutorial, but you’re free to use whichever one you like. First, add the FA CDN right after <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

then paste the following code right after the opening wrapper div tag (the first blue box in the source code):

<i class="fa fa-thumb-tack" aria-hidden="true"></i> <span class="pin">pinned</span>

Add the following code right before </style> to customize the icon and text:

.fa-thumb-tack {padding-right:3px; vertical-align:middle; color:black; font-size:9px;} .pin {color:black; font-size:7px; text-transform:uppercase; letter-spacing:1px;}

Final code:

Example 2

In this example, we’re going to pin the ghibli gifset.

1) Right-click > View Page Source. 

The “ghibli” tag makes the post unique on the page, so we’re going to type that in the search box using ctrl + f.

Not every source code will be legible, but no worries. In the image from the link below, if we look carefully through the code, we’ll find the opening wrapper div tag a few lines above our keyword (first red box). The closing </div> tag (second red box) should be near the next opening wrapper div instance (blue box). Notice the <div id="notecontainer"></div> between them. That’s the wrapper div for post notes on permalink pages, meaning we don’t need it for our pinned post. 

Open full-res image.

Now we’re going to copy the code starting with the first red box and ending with the second red box, and paste it before {block:Posts} in the HTML Editor.  

2) Update Preview > Save