full width background behind home widgets

[dmcleod87]

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.

view mockup

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!

//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' );

http://www.canberra-plumbers.com.au/

[Genesis Developer]

You 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.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Genesis Developer]

Aha..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%;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[dmcleod87]

thanks for the quick reply @genwrock! unfortunately the background is not full width and is contained within a wrap class still...any ideas?

[Genesis Developer]

replace this line

add_action( 'genesis_before_content', 'ng_home_page_widgets' );

by

add_action( 'genesis_after_header', 'ng_home_page_widgets' , 25);

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Genesis Developer]

I am not getting my CSS. Please add the above CSS in style.css file of sample child theme

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[dmcleod87]

that 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!

[Genesis Developer]

genesis_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

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[dmcleod87]

thanks for clearing that up...i'm still getting my head arounds hooks and genesis as a framework so thanks again for the help!

[Author]

Posts