How to Divide .home-top area?

Community Forums Forums Design Tips and Tricks How to Divide .home-top area?

This topic is: not resolved

Tagged: 

This topic contains 10 replies, has 5 voices, and was last updated by  BabsSaul 7 months, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #73151

    ithacaindy
    Participant
    Post count: 47

    The .home-top div is currently just one area where the top content goes. I want to split that div so that the top story is displayed on the left 75% portion and top headlines are show on the right. How do I add the second div within the .home-top div?

    http://ithacaindy.org
    #73214

    nutsandbolts
    Moderator
    Post count: 3138

    The easiest way would be to create two new widget areas (something like home top left and home top right) within the overall home-top div, then use CSS to give the left one 75% width and the right one 25% width – maybe more or less depending on padding.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #73976

    ithacaindy
    Participant
    Post count: 47

    That’s what I thought. But I’m working out the mechanics. The genesis_widget_area tag has ‘<div class=”home-top widget-area”>’ as the before. Do I edit this along the lines of ‘<div class=”home-top widget-area”><div class=”home-top-left widget-area”>’?

    #73990

    nutsandbolts
    Moderator
    Post count: 3138

    What I would do is add the two areas within the overall Home Top div. So within home-top, you’d have a home-top-left and a home-top-right.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #74172

    ithacaindy
    Participant
    Post count: 47

    I’m still working out the mechanics. For instance, The genesis_widget_area tag creates one widget area with starting and ending divs. If I create home-top-left and home-top-right within home-top, the coding would go something like this, I think:

    echo ‘<div class=”home-top”>’;
    genesis_widget_area( ‘home-top-left’, array(
    ‘before’ => ‘<div class=”home-top-left widget-area”>’,
    ‘after’ => ‘</div>’,
    ) );
    genesis_widget_area( ‘home-top-right’, array(
    ‘before’ => ‘<div class=”home-top-right widget-area”>’,
    ‘after’ => ‘</div>’,
    ) );
    echo ‘</div’>’;

    But what displays is the home-top-left div and widget with the home-top-right widget appearing just below. The css for the two divs has the left floated left and the right floated right. I’m not sure what I’m missing to get the two divs to align correctly.

    #74178

    nutsandbolts
    Moderator
    Post count: 3138

    Okay, I got this working on a test site (though home top will need some padding on the bottom). Here’s what I’ve got in functions.php:

    //* Register widget areas
    genesis_register_sidebar( array(
    	'id'          => 'home-top',
    	'name'        => __( 'Home - Top', 'magazine' ),
    	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-top-left',
    	'name'        => __( 'Home - Top Left', 'magazine' ),
    	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-top-right',
    	'name'        => __( 'Home - Top Right', 'magazine' ),
    	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-middle',
    	'name'        => __( 'Home - Middle', 'magazine' ),
    	'description' => __( 'This is the middle section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-bottom',
    	'name'        => __( 'Home - Bottom', 'magazine' ),
    	'description' => __( 'This is the bottom section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'after-entry',
    	'name'        => __( 'After Entry', 'magazine' ),
    	'description' => __( 'This is the after entry section.', 'magazine' ),
    ) );

    And here’s the two parts of front-page.php I had to alter:

    function magazine_home_genesis_meta() {
    
    	if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-top-left') || is_active_sidebar( 'home-top-right') || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-bottom' ) ) {
    function magazine_homepage_widgets() {
    
    	genesis_widget_area( 'home-top', array(
    		'before' => '<div class="home-top widget-area">',
    	) );
    
    	genesis_widget_area( 'home-top-left', array(
    		'before' => '<div class="home-top-left widget-area">',
    		'after'  => '</div>',
    	) );
            
    	genesis_widget_area( 'home-top-right', array(
    		'before' => '<div class="home-top-right widget-area">',
    		'after'  => '</div></div>',
    	) );
    
    	genesis_widget_area( 'home-middle', array(
    		'before' => '<div class="home-middle widget-area">',
    		'after'  => '</div>',
    	) );
    
    	genesis_widget_area( 'home-bottom', array(
    		'before' => '<div class="home-bottom widget-area">',
    		'after'  => '</div>',
    	) );
    
    }

    Then I added the following to my stylesheet:

    .home-top-left {
            float: left;
            width: 48%;
    }
    
    .home-top-right {
            float: right;
            width: 48%;
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #74179

    nutsandbolts
    Moderator
    Post count: 3138

    The media queries section will need some attention as well – ideally home top left and right will be 100% width on phones and tablets.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #74194

    ithacaindy
    Participant
    Post count: 47

    Thanks. I’m working on making home-top-left/right 100% in media queries.

    #74201

    ashabele
    Member
    Post count: 8

    This is perfection! Thank you so very much!

    #74207

    TeeTide
    Participant
    Post count: 9

    Wowzer! Works great! Andrea, you rock!

    #93514

    BabsSaul
    Participant
    Post count: 11

    Just wanted to add my thanks for this. Very easy to follow and did exactly what I wanted. Thanks Andrea

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.