This tutorial provides the steps to customize the Single Post design having social profiles for Author and Related Posts in Infinity Pro. It will also work with the Genesis Sample and other child-theme based on Genesis Framework.
Preview:
Prerequisite:
- Settings > Discussion. Avatar Display - Uncheck, Show Avatars for users on single posts.
It is recommended to follow the tutorial Blog Post Page Design having first post with a different layout in Infinity Pro.
STEP 1
Styling Single Post Header.
As we have already repositioned the Entry Header, Post Info and Post Meta, we just need to add a few more lines to make it similar to our blog page posts.
Add the required CSS in child-theme/style.css
/* Single Post
--------------------------------------------- */
.single-post .entry-header {
text-align: center;
margin: 0 auto;
}
.single-post .entry-header .entry-meta {
margin-bottom: 10px;
display: inline-block;
text-transform: uppercase;
font-size: 12px;
font-family: "Raleway", sans-serif;
letter-spacing: 2px;
}
.single-post .entry-title {
font-size: 48px;
font-size: 4.8rem;
}
.single-post .entry-header::after {
display: none;
}
.single-post .entry-meta {
text-align: center;
}