Using the Pinned Post as Your Bio via CSS

We all recognize that the bio/blog description is pretty limited -- you can't embed images or links, and the only formatting possible is pretty much the 'br' tag to add a line break. This is by design, and probably for the best, honestly.

The main workaround is to use a pinned post, so its the first thing that appears on your blog. But here its often lost, since it looks like regular blog content, and doesn't pop out at the user.

Here's my blog. You can see the pinned post, but it's off on the side as the first post and easily missed (I intentionally have a blur filter turned on for the images for this tutorial):

What if, you could make your pinned post appear different than all your other posts? Good news! You can!

Buried in the code for every page, every post has a unique identifier. My pinned post is post number 181005614. Knowing this, I can look at the webpage's source using "right-click, inspect element" (or something similar, depending on your browser), and find that post:

The division where my post is of types "wrap-post", "del181005614", and "pubtext". If I modify "wrap-post", that changes all posts. If I change "pubtext", that changes all text posts. But if I change "del181005614", that only changes this particular post, my pinned post.

Using that information, I can change the style of "del181005614" to be different than any other post on my blog. I can increase the size, center it, play with the fonts, formatting, background -- all for just that post and that post alone.

The end result is this:

Now, the pinned post is front-and-center, styled differently than the others, with a background image of me.  The other posts continue to flow 5-to-a-line (on this particular monitor) as they normally would.

On Mobile:

I could take this further, and completely get rid of the description, but the desktop permalink pages do not carry a pinned post. I could also style the pinned background to blend in with the main background, so it doesn't look it it's a post at all. The possibilities are endless, but you need to test on both desktop and mobile to get a feel for what looks best.

In this example, the pinned post looks like a "default" theme post (with some minor dress-up), and the rest of the blog looks like the "responsive" theme. If you use default, you have less work to do, but you can still make the title bigger, centered, change the fonts, etc.

Here's the code I used the achieve this on desktop. I've replaced my post id with del1234. Remember, you will need to change every single occurrence of del1234 to your pinned post's ID, and if you ever use a different pinned post, you will need to update the CSS again to use the new pinned post id. The mobile code is very similar, only needing a few tweaks to work on the smaller screen.

	.del1234 {
                /* Take up the full screen, but add a margin of 20% of the
                   available space on either side */
		width:100% !important;
		padding-left: 20vw;
		padding-right: 20vw;
	}

	.pub-blog-desc .del1234 {
                /* Some pages have the posts the posts as a child of 
                   .pub-blog-desc; this corrects for that. */
		padding-left: inherit;
		padding-right: inherit;
	}
	.del1234 .postholder {
                /* Make our postholder class match the parent width */
		width: 100% !important;
	}
	.del1234 .textcontent {
                /* Text formatting in the pinned post */
		color: black;
	}
	.del1234 .titletext {
                /* Make our title bigger and centered.
		text-align:center;
		font-size:4em;
		margin:auto;
		width:100%;
                /* put a fog over the background image under the title */
		background-color: rgba( 255,255,255,0.7);
                /* Cursive script on Windows and Ubuntu */
		font-family: Freestyle script, Purisa, cursive;
	}
	.del1234 .image_container {
		background-image: url(*Provide your own background image*);
		background-size:cover;
                background-position:center top;
		border-radius: 6px;
	}
	.del1234 p {
                /* Keep the margins within the middle 60% of the window */
		max-width:60vh !important;
		margin:auto !important;
	}
	.del1234 .textcontent {
		/* Add fog over the rest of the background image */
		background-color: rgba( 255,255,255,0.7);
	}

I hope I cleaned up the code enough to make it generic. Apologies if I left anything specific to my stylesheet in there.

If you want to hide the description, you can do using the following to disable it on your pages.

#desci h3 {
display:none;
}

I do not recommend deleting it entirely; because search and avatar-hover on the dash will still use the description.