Tutorial: Stylizing Your Pinned Post in your Tumblr Theme
This tutorial is really old and ALSO I didn't know much about css and html so there are some pretty laughable mistakes in here. Please hang tight while I get this updated.
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!
Please leave a like and/or a reblog if you found this helpful. If any questions or concerns arise, pleae don’t hesitate to ask them.