Frank asked this interesting question on the forums recently which i would like to answer and share with you in this tutorial:
Currently, the blog post archive on my website lists each post with the featured image aligned to the left and the text wrapping around it (on the right).
I would like the post text to begin aligned to the left below the featured image. How can I accomplish this?
The Answer
Genesis includes CSS in the style sheet for some of the default WordPress classes which you can see below:
You can add these classes in your child themes style sheet and modify the declarations to change the appearance and alignment of your featured images, entry titles, entry content and other elements on your blog listings page, including archive, author, blog, category, search, and tag pages.
Content Archives
Lets go step by step through all the different ways you can customize the appearance of your category archive page.
If you go to Genesis > Theme Settings > Content Archives, you’ll see this:
These settings enable you to choose the featured image size but not the alignment so you need to add CSS code in your child themes style.css file.
Here’s the default appearance:
Remove Featured Image Alignment
Firstly, lets remove the left alignment so the text displays under the post thumbnail.
.category .entry-content img.alignleft {
float: none;
text-align: none;
}
And here’s the result:
Center Featured Image
Lets center the featured image:
.category .entry-content img.alignleft {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
And here’s the result:
Some themes maybe coded differently so try this:
Under the Entries section in your style.css file, modify the CSS to this:
.entry-content .entry-image {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
Centre All Archive Page Elements
You can may want to centre your entry title, entry content and the entry meta in your entry header and entry footer:
.category .entry-title {
text-align: center;
}
.category .entry-header .entry-meta {
text-align: center;
}
.category .entry-content {
text-align: center;
}
.category .entry-footer .entry-meta {
text-align: center;
}
And here’s the final result:
Align Featured Image Right
But what if you want to align your featured image to the right?
Use this CSS:
.category .entry-content img.alignleft {
float: right;
text-align: right;
}
And here’s the result:
Using Alignment Classes On Home Page
Franks question actually relates to the blog page and all the code above includes the category class which effects every category archive page. He didn’t mention if he’s using the default Reading Settings and displaying his posts on the front page or whether he’s using the blog page template and created a custom posts page which he’s then set in the Reading Settings.
So here’s the solution for both.
Alignment On Blog Page Template
.page-template-page_blog-php .entry-content img.alignleft {
float: none;
text-align: none;
}
Alignment On Home Page
.home .entry-content img.alignleft {
float: none;
text-align: none;
}
Other Options
If you wanted to reposition your entry titles, images and entry content, you could also create a custom archive page template and use PHP code to customize different archive page elements in Genesis.
Related Posts
- Remove Featured Image Size & Alignment Settings From Genesis Content Archive Settings
- Move Entry Title After Post Info On Archive Page
- 2 Ways To Reposition Your Featured Image Before Entry Title On Home Page
- Genesis: Align Featured Image Next To Title On Content Archive Pages
- Different Ways To Change Featured Image Alignment On Specific Archive Pages
I am trying to get the archive page to layout something like this:
http://themeforest.net/item/podcaster-multimedia-wordpress-theme/full_screen_preview/6804946
I am having a slight problem of figuring out how I would achieve something like this though. This project is for a client who has requested an archive/podcast page that looks very similar to that site.
Any help would be greatly appreciated!
Here’s all the CSS from that theme you will need to modify for use in your SP theme as all themes are coded differently:
I think you really only need to remove any padding/margins.
I have the reverse problem, but cannot figure out the code.
On the blog page I had feature images set on the left with the text wrapped on the right. However, since the Genesis Theme upgrade the other day the text now appears below the image, which is still aligned on the left (which is fine).
How do I get the text to be positioned next to the feature image instead of under it?
Many thanks for you help.
Hi thanks for these tips, been on your site all weekend.
I’ve got my featured images on the home page & archives aligned to the left but we want the content aligned right. At the moment the content is to the right of the image then once it reaches the bottom of the image it continues under the image to the left. Is it possible to stop that happening?
Thanks
Hello,
how images on single post auto align center. eleven40 Pro Theme.
Thanks,
Egis
Use Firebug to find the class and then change it.
Make sure you add the .single-post class.
Or you can align them after uploading and before you insert them.