Customize Alignment of Archive Page Elements In Genesis

May 16, 2014

—

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.

Comments

6 responses to “Customize Alignment of Archive Page Elements In Genesis”

Justin Whitehead

July 21, 2014

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!

Log in to Reply
1. Brad Dalton
  
  July 21, 2014
  
  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.
  
  [code]
  /* Front Page: List Posts */
  
  .list-of-episodes article.list {
  border-radius:7px;
  margin-top:40px;
  }
  .list-of-episodes article.list .featured-image {
  height:auto;
  overflow:hidden;
  position: relative;
  border-radius: 7px 0 0 7px;
  float:left;
  margin-right:30px;
  }
  .list-of-episodes article.list .featured-image img {
  width:260px;
  height:260px;
  }
  .list-of-episodes article.list .featured-image .hover {
  background-color:rgba(0,0,0,0.75);
  position:absolute;
  text-align:right;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  }
  .list-of-episodes article.list .featured-image:hover .hover {
  opacity:1;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  }
  .list-of-episodes article.list .inside {
  padding:30px;
  height:260px;
  }
  .list-of-episodes article.list .post-header {
  padding:0 0 15px 0;
  }
  .list-of-episodes article.list .post-header ul {
  margin:0 0 10px 0;
  padding:0;
  list-style:none;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  }
  .list-of-episodes article.list .post-header ul a:link,
  .list-of-episodes article.list .post-header ul a:visited {
  color:#228c8b;
  }
  .list-of-episodes article.list .post-header ul a:hover {
  color:#1a6d6c;
  }
  .list-of-episodes article.list .post-header ul li {
  display:inline-block;
  }
  .list-of-episodes article.list .post-header h2 {
  font-size: 26px;
  font-weight:600;
  margin:4px 0 0 0;
  line-height: 34px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }
  .list-of-episodes article.list .post-header h2 a:link,
  .list-of-episodes article.list .post-header h2 a:visited {
  color:#444;
  }
  .list-of-episodes article.list .post-header h2 a:hover {
  color:#333;
  }
  .list-of-episodes article.list .post-content p {
  font-size: 16px;
  line-height: 25px;
  color:#646464;
  }
  .list-of-episodes article.list .post-footer {
  display:none;
  }
  .list-of-episodes .button-container {
  margin:40px 0 0 0;
  text-align: right;
  }
  [/code]
  
  Log in to Reply
Neil Roach

July 1, 2014

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.

Log in to Reply
Paulo

June 9, 2014

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

Log in to Reply
Egis

May 16, 2014

Hello,

how images on single post auto align center. eleven40 Pro Theme.

Thanks,
Egis

Log in to Reply
1. Brad Dalton
  
  May 16, 2014
  
  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.
  
  Log in to Reply