eleven40 – change summary posts layout on home page

Community Forums Forums Design Tips and Tricks eleven40 – change summary posts layout on home page

This topic is: resolved

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  neville 1 year, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #62147

    neville
    Participant
    Post count: 20

    I’m running eleven40 1.1 with Genesis 2.0.1 on my primary blog (not yet made the jump to Pro: things still to figure out with the changes there).

    Blog: http://www.nevillehobson.com/

    I’ve just changed the layout from the default to three columns. This change lessens the width of the centre column which – to my eye on how it looks on a desktop monitor and a laptop screen – makes the summary posts that appear below the single full post on the home page look terribly squeezed.

    How do I change the default home page layout for summary posts to show each one solo in that centre column, ie, single post not two abreast?

    Thanks for your help!


    http://www.nevillehobson.com/
    #62258

    wpspeak
    Participant
    Post count: 117

    The front page of Eleven40 is using Genesis grid loop and you can find the code from home.php file.

    Here’s the code:


    remove_action( 'genesis_loop', 'genesis_do_loop' );
    add_action( 'genesis_loop', 'eleven40_grid_loop_helper' );
    /** Add support for Genesis Grid Loop */
    function eleven40_grid_loop_helper() {

    if ( function_exists( 'genesis_grid_loop' ) ) {
    genesis_grid_loop( array(
    'features' => 1,
    'feature_image_size' => 0,
    'feature_image_class' => 'alignleft post-image',
    'feature_content_limit' => 0,
    'grid_image_size' => 'grid-thumbnail',
    'grid_image_class' => 'alignnone',
    'grid_content_limit' => 250,
    'more' => __( '[Continue reading]', 'genesis' ),
    ) );
    } else {
    genesis_standard_loop();
    }

    }

    You could simply delete the home.php or comment these two lines of codes:


    //remove_action( 'genesis_loop', 'genesis_do_loop' );
    //add_action( 'genesis_loop', 'eleven40_grid_loop_helper' );

    The first line removes the default loop, while the second line rebuild the loop using Genesis grid loop.


    #62508

    neville
    Participant
    Post count: 20

    Thanks @wpspeak, I appreciate your advice.

    The only trouble is, that change makes every post show only as an excerpt. What I want to do is show the latest post in full, with the rest of the posts on the home page as excerpts and with each one on its own, ie, not two abreast. I don’t think I explained that well in my previous post.

    In any case, I implemented your suggestion on my test site first, by commenting out the two lines in home.php you said. As you can see, all posts on the home page are only excerpts. (Test site: http://www.nevillehobson.com/sandbox2/)

    Looking around for further info on this, I came across a discussion in a WordPress support thread: http://wordpress.org/support/topic/front-page-to-show-1st-post-full-rest-as-excerpts

    The solution worked for the person asking about it. When I tried it, though, I just got a PHP syntax error.

    So still looking for a solution on this. Any further ideas? Thanks.


    #62789

    neville
    Participant
    Post count: 20

    After a bit of tinkering and using Chrome’s in-built inspection toolkit (like Fireburg; not sure what Google calls it), I found a solution that does exactly what I want.

    Here’s the process that got me there:

    1. I discovered that the layout of post excerpts on the home page is defined within the Featured Post Grid section in style.css.

    2. Next, I identified the CSS commands that define the layout characteristics of the excerpts themselves: .genesis-grid-even and .genesis-grid-odd.

    3. Then, I copied the Featured Post Grid section from style.css, pasted it into Custom CSS and edited the text thus:

    
    /* Layout change in Featured Post Grid: all excerpt posts 100% width and not two abreast */
    .genesis-grid-even,
    .genesis-grid-odd {
    	margin: 0 0 20px;
    	padding: 0 0 15px;
    	width: 100%;   /* the default width is 48% */
    }
    
    /*
    .genesis-grid-even {
    	float: right;
    }
    
    .genesis-grid-odd {
    	clear: both;
    	float: left;
    }
    */
    

    And it works! No side effects or weirdness anywhere else on the site that I can find.

    If you have any comments on this solution, I’d appreciate your thoughts (you can see the result here: http://www.nevillehobson.com/). Otherwise, it might help if you’re also considering making such a change in your eleven40 theme.

    As the CSS for this is the same in the new eleven40 Pro theme (but defined within a section called “Genesis Grid Loop”), it should work there as well. Shouldn’t it?

    Thanks.


    • This reply was modified 1 year, 2 months ago by  neville. Reason: Added a site link
    • This reply was modified 1 year, 2 months ago by  neville. Reason: Added a site link
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.