Rearranging Widget Areas on Lifestyle Pro

[Erica Mueller]

I want to have the two side-by-side widget areas at the top of the page and the full width widget areas below those. I thought if I want to front-page.php and just moved the code below like so it would work:

function lifestyle_homepage_widgets() {

		
	if ( is_active_sidebar( 'home-bottom-left' ) || is_active_sidebar( 'home-bottom-right' ) ) {

		echo '<div class="home-bottom">';

		genesis_widget_area( 'home-bottom-left', array(
			'before' => '<div class="home-bottom-left widget-area">',
			'after'  => '</div>',
		) );

		genesis_widget_area( 'home-bottom-right', array(
			'before' => '<div class="home-bottom-right widget-area">',
			'after'  => '</div>',
		) );

		echo '</div>';
	
	}

	genesis_widget_area( 'home-top', array(
		'before' => '<div class="home-top widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-middle', array(
		'before' => '<div class="home-middle widget-area">',
		'after'  => '</div>',
	) );

}

As you can see here: http://www.ericamuellerdesigns.com/sandbox2/ that doesn't work so great. It's like the border for the full width widget area is starting above the split sections.

Help!

---

WordPress Manipulator

http://www.ericamuellerdesigns.com/sandbox2/

[nutsandbolts]

I fought with this same thing last week - I ended up changing to a full width at the top, two sections in the middle, and one at the bottom. You could always try that and leave the top one empty... This also required a BUNCH of CSS and functions changes since I changed the name of the widget areas.

function lifestyle_homepage_widgets() {

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

		echo '<div class="home-middle">';

		genesis_widget_area( 'home-middle-left', array(
			'before' => '<div class="home-middle-left widget-area">',
			'after'  => '</div>',
		) );

		genesis_widget_area( 'home-middle-right', array(
			'before' => '<div class="home-middle-right widget-area">',
			'after'  => '</div>',
		) );

		echo '</div>';
	
	}

	        genesis_widget_area( 'home-bottom', array(
		'before' => '<div class="home-bottom widget-area">',
		'after'  => '</div>',
	) );

}

I don't know if that helps at all but I did finally manage to keep the full width section out of the split section that way.

---

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

[Erica Mueller]

I wanted to test first and not change the names of any widgets...
http://www.ericamuellerdesigns.com/sandbox2/

Still doing it, even with code arranged like yours.

---

WordPress Manipulator

[nutsandbolts]

I just remembered what I had to do to make it stop doing that... In your stylesheet, add a clear: both; to home-bottom if it isn't there already. Once I did that, the overlap went away.

---

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

[Erica Mueller]

YOU = AWESOME

That did it! Yay. I can't believe I'm doing all this just to create a mock-up to see if a client likes it.

This is my first time with Lifestyle Pro. It's beautiful but I'm having to learn a new theme.

---

WordPress Manipulator

[nutsandbolts]

Woohoo!!!! I love those rare moments when my hours of suffering can help someone else. 🙂

I did the same - it was just a mockup, and the client hated it and wanted to use a different child theme. Kind of infuriating but I guess that's the way it goes sometimes.

---

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

[Author]

Posts