This tutorial enables you to display any type of image on the left or right hand corner of your single posts.
Here’s an example showing the Gravatar displayed on the left corner of all single posts.
Note: PHP code goes at the end of your child themes functions file & CSS code at the end of your style.css file.
Display Gravatar on Corner of Post
Both the PHP and CSS generate exactly what you see in the 1st screen shot above.
.single .entry-avatar .avatar {
background-color: #fff;
float: none;
margin-top: -80px;
margin-left: -80px;
border-radius: 50%;
}
.single .entry-title {
font-size: 36px;
font-size: 3.6rem;
line-height: 1;
margin-top: -40px;
padding-left: 20px;
}
Display Any Image on Corner of Post
This example pulls an image from your child themes images folder.
.single .corner-image img {
background-color: transparent;
height: 80px;
width: 80px;
}
.single .corner-image {
background-repeat: no-repeat;
float: none;
margin-top: -80px;
margin-left: -80px;
}
.single .entry-title {
margin-top: -20px;
}
Here’s a screenshot of what the PHP & CSS generate:
You could even re-position some of the entry meta like the published date and display that over an image in the corner of each post.
Leave a Reply