Ceco

Blog about all things apps.
Recent Tweets @
Posts tagged "tumblr post icons"

See those little icons in the upper left-hand corner of my posts? Here’s how to add them to your posts in less than 1 minute:

Step 1:

If not already using it, switch to the default ‘Redux’ theme and customize it. Navigate to Customize > Theme > Redux > Use custom HTML

Step 2:

Search for <div class=”post”> and replace it with:

<div class="post {block:Text}post-type-text{/block:Text}{block:Photo}post-type-photo{/block:Photo}{block:Photoset}post-type-photoset{/block:Photoset}{block:Quote}post-type-quote{/block:Quote}{block:Link}post-type-link{/block:Link}{block:Chat}post-type-chat{/block:Chat}{block:Video}post-type-video{/block:Video}{block:Audio}post-type-audio{/block:Audio}{block:Answer}post-type-answer{/block:Answer}">

<div class="post-icon">

<a href="{Permalink}">{block:Text}{lang:Text}{/block:Text}{block:Photo}{lang:Photo}{/block:Photo}{block:Photoset}{lang:Photoset}{/block:Photoset}{block:Quote}{lang:Quote}{/block:Quote}{block:Link}{lang:Link}{/block:Link}{block:Chat}{lang:Chat}{/block:Chat}{block:Video}{lang:Video}{/block:Video}{block:Audio}{lang:Audio}{/block:Audio}{lang:Answer}{/block:Answer}</a>

</div><!-- post-icon -->

Step 3:

Click the ‘Advanced’ button and add the following css to the ‘Add custom CSS’ field

/*wrapper*/

#wrapper #content {

width:560px;

}

/*posts*/

#wrapper #content .post {

padding:25px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

/*post icons*/

.post .post-icon {

position:absolute;

left:-22px;

top:-19px;

}

.post .post-icon a {

text-indent:-9999px;

background: transparent url(http://static.tumblr.com/usynesx/v4al8wuqe/post-icons.png) no-repeat 0 0;

height:57px;

width: 57px;

text-indent:-9999px;

display:block;

}

.post-type-text .post-icon a   {background-position: 0 0;}

.post-type-photo .post-icon a  {background-position: 0 -57px;}

.post-type-quote .post-icon a {background-position: 0 -114px;}

.post-type-link .post-icon a  {background-position: 0 -114px;}

.post-type-chat .post-icon a  {background-position: 0 -231px;}

.post-type-audio .post-icon a  {background-position: 0 -289px;}

.post-type-video .post-icon a   {background-position: 0 -347px;}

.post-type-answer .post-icon a {background-position: 0 -405px;}

/*hide quote bg*/

#wrapper #content .post .quotebg {display:none;}

Click ‘Save’ and you’ll see the icons on your posts! Move them wherever you want by editing the .post .post-icon ‘top’ and ‘left’ values in CSS. I’ve posted the source file below so you can customize the icons yourself:

Download the .psd source file for these Tumblr post icons here