• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Display Image Over Corner of Single Post Header in Genesis

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.

single post corner image

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:

corner image

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.

Related Tutorials

  • Add Image Over Corner of Post Archive in Genesis
  • Add Post Date In Circle On Corner of Posts Entry Header in Genesis

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.