Community Forums › Forums › Archived Forums › Design Tips and Tricks › full width background behind home widgets
Tagged: custom widgets, full width background, widgets
- This topic has 8 replies, 2 voices, and was last updated 9 years, 6 months ago by dmcleod87.
-
AuthorPosts
-
October 25, 2014 at 11:12 pm #129235dmcleod87Member
hi all,
i'm trying to add a full width background behind some custom widgets I added to the home page of the genesis sample theme.
i want to add the light grey background behind the 4 widget areas with the icons. i have set the widgets up following this tutorial. is there a way i can 'wrap' the divs in a container somehow? any help or guidance would be greatly appreciated!
http://www.canberra-plumbers.com.au///Add in Home Widget Areas function ng_genesis_home_widgets() { genesis_register_sidebar( array( 'name' => __( 'Home Content Far Left', 'genesis' ), 'id' => 'content-1', 'description' => __( 'Far Left Home', 'genesis' ), 'before_widget' => '<div class="homecontent fixedfarleft">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widgettitle">', 'after_title' => '</h3>', ) ); genesis_register_sidebar( array( 'name' => __( 'Home Content Left', 'genesis' ), 'id' => 'content-2', 'description' => __( 'Left Home', 'genesis' ), 'before_widget' => '<div class="homecontent fixedleft">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widgettitle">', 'after_title' => '</h3>', ) ); genesis_register_sidebar( array( 'name' => __( 'Home Content Right', 'genesis' ), 'id' => 'content-3', 'description' => __( 'Right Home', 'genesis' ), 'before_widget' => '<div class="homecontent fixedright">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widgettitle">', 'after_title' => '</h3>', ) ); genesis_register_sidebar( array( 'name' => __( 'Home Content Far Right', 'genesis' ), 'id' => 'content-4', 'description' => __( 'Far Right Home', 'genesis' ), 'before_widget' => '<div class="homecontent fixedfarright">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widgettitle">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'ng_genesis_home_widgets' ); //* Add the home widgets in place function ng_home_page_widgets() { if ( is_front_page('') ) genesis_widget_area ('content-1', array( 'before' => '<div class="one-fourth first hometopcol farlefthome">', 'after' => '</div>',)); if ( is_front_page('') ) genesis_widget_area ('content-2', array( 'before' => '<div class="one-fourth hometopcol lefthome">', 'after' => '</div>',)); if ( is_front_page('') ) genesis_widget_area ('content-3', array( 'before' => '<div class="one-fourth hometopcol righthome">', 'after' => '</div>',)); if ( is_front_page('') ) genesis_widget_area ('content-4', array( 'before' => '<div class="one-fourth hometopcol farrighthome">', 'after' => '</div>',)); } add_action( 'genesis_before_content', 'ng_home_page_widgets' );
October 25, 2014 at 11:24 pm #129236Genesis DeveloperMemberYou do not need to create four widgets for it. You can do it easily:
1. Create a single widget area
2. Create 4 pages or post
3. Use genesis featured post or page widget and add this widget into new Widget area
4. Then add some CSS for your design.
October 25, 2014 at 11:31 pm #129238Genesis DeveloperMemberAha..you already added the content. Just need some CSS tweaks
First replace the current code with this code
//* Add the home widgets in place function ng_home_page_widgets() { if ( is_front_page('') ){ echo '<div class="home-section clearfix">' . "\n" . ' <div class="wrap">' . "\n"; genesis_widget_area ('content-1', array( 'before' => '<div class="one-fourth first hometopcol farlefthome">', 'after' => '</div>',) ); genesis_widget_area ('content-2', array( 'before' => '<div class="one-fourth hometopcol lefthome">', 'after' => '</div>',) ); genesis_widget_area ('content-3', array( 'before' => '<div class="one-fourth hometopcol righthome">', 'after' => '</div>',)); genesis_widget_area ('content-4', array( 'before' => '<div class="one-fourth hometopcol farrighthome">', 'after' => '</div>',)); echo '</div></div>' . "\n"; } }
Add this css in your style.css file
.home-section{ background: #f5f5f5; width: 100%; }
October 25, 2014 at 11:45 pm #129239dmcleod87Memberthanks for the quick reply @genwrock! unfortunately the background is not full width and is contained within a wrap class still...any ideas?
October 25, 2014 at 11:50 pm #129240Genesis DeveloperMemberreplace this line
add_action( 'genesis_before_content', 'ng_home_page_widgets' );
by
add_action( 'genesis_after_header', 'ng_home_page_widgets' , 25);
October 25, 2014 at 11:52 pm #129241Genesis DeveloperMemberI am not getting my CSS. Please add the above CSS in style.css file of sample child theme
October 26, 2014 at 12:07 am #129242dmcleod87Memberthat did the trick! i removed the css temporarily as i was playing around and forgot to add it back in so that's why it was missing.
can you please explain the difference between the two add_action lines above, just so i can get a better understanding?
thanks so much for your help genwrock!
October 26, 2014 at 12:10 am #129243Genesis DeveloperMembergenesis_before_content hook adding the content inside the site-inner wrap div.
I am adding the content outside of site-inner wrap div by genesis_after_header hook
October 26, 2014 at 12:16 am #129244dmcleod87Memberthanks for clearing that up...i'm still getting my head arounds hooks and genesis as a framework so thanks again for the help!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.