#tumblr coding 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!