Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Divide .home-top area?
Tagged: home-top
- This topic has 11 replies, 6 voices, and was last updated 6 years, 9 months ago by
maicuel.
-
AuthorPosts
-
November 15, 2013 at 10:17 am #73151
ithacaindy
MemberThe .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.orgNovember 15, 2013 at 12:42 pm #73214nutsandbolts
MemberThe 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+November 18, 2013 at 11:33 am #73976ithacaindy
MemberThat'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">'?
November 18, 2013 at 1:09 pm #73990nutsandbolts
MemberWhat 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+November 19, 2013 at 9:32 am #74172ithacaindy
MemberI'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.
November 19, 2013 at 10:13 am #74178nutsandbolts
MemberOkay, 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+November 19, 2013 at 10:14 am #74179nutsandbolts
MemberThe 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+November 19, 2013 at 11:09 am #74194ithacaindy
MemberThanks. I'm working on making home-top-left/right 100% in media queries.
November 19, 2013 at 11:33 am #74201ashabele
MemberThis is perfection! Thank you so very much!
November 19, 2013 at 12:08 pm #74207TeeTide
MemberWowzer! Works great! Andrea, you rock!
March 5, 2014 at 8:10 am #93514BabsSaul
ParticipantJust wanted to add my thanks for this. Very easy to follow and did exactly what I wanted. Thanks Andrea
August 25, 2016 at 1:15 pm #192043maicuel
Memberworks perfect! thanks
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.