How to Divide .home-top area?

[ithacaindy]

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

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

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">'?

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

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.

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

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

[ashabele]

This is perfection! Thank you so very much!

[TeeTide]

Wowzer! Works great! Andrea, you rock!

[BabsSaul]

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

[maicuel]

works perfect! thanks

[Author]

Posts