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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Customize Alignment of Archive Page Elements In Genesis

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:

genesis content archives

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:

align left

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:

align none

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:

display block

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:

center archive

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:

align right

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

Reader Interactions

Comments

  1. Justin Whitehead says

    July 21, 2014 at 4:55 pm

    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
    • Brad Dalton says

      July 21, 2014 at 5:29 pm

      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.

      /* 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;
      }
      Log in to Reply
  2. Neil Roach says

    July 1, 2014 at 1:23 pm

    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
  3. Paulo says

    June 9, 2014 at 9:17 am

    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
  4. Egis says

    May 16, 2014 at 9:06 am

    Hello,

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

    Thanks,
    Egis

    Log in to Reply
    • Brad Dalton says

      May 16, 2014 at 9:09 am

      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

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.