[[email protected]]

Sorry, I didn't know.

Here it is:

For the php.

and for the CSS:

Thanks.

Mike

[[email protected]]

I chose to go with Method #1.

I added the code to the functions.php file per your link as follows:

//* Register widget areas outside site container
genesis_register_sidebar( array(
'id' => 'left-banner-widget',
'name' => __( 'Left Banner Widget', 'wpsites' ),
'description' => __( 'Left widget area outside site container', 'wpsites' ),
) );
genesis_register_sidebar( array(
'id' => 'right-banner-widget',
'name' => __( 'Right Banner Widget', 'wpsites' ),
'description' => __( 'Right widget area outside site container.', 'wpsites' ),
) );
/**
* @author Brad Dalton
* @example http://wpsites.net/web-design/add-banner-ads-outside-site-container/
* @copyright 2014 WP Sites
*/
add_action( 'genesis_after_header', 'banner_widgets_outside_site_container' );
function banner_widgets_outside_site_container() {

if ( is_active_sidebar( 'left-banner-widget' ) || is_active_sidebar( 'right-banner-widget' ) ) {

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

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

}

}

-------------------------------------
Here is my CSS:

/*
Banner Ad Widgets Outside Site Container
------------------------------------------- */
.right-banner-widget {
max-width: 20%;
position: absolute;
right: 10px;
top: 300px;
}

.left-banner-widget {
max-width: 20%;
position: absolute;
left: 10px;
top: 150px;
}

The images are now scroll with the page, but when I grab the page tip and reduce it's size, the images get hidden behind the slider which looks terrible on different screen sizes.

I also only want the images to appear on the home page only.

Thank you.

[[email protected]]

Brad,

Thank you for the link.

It is much appreciated.

I tried to implement both Method 1 and Method 2 to see which works better.

Both Methods are currently implemented on the home page.
http://www.tori13.com/

Method 1: (creates 2 new widget areas)
The visible images of the girl to the left and right of the slider are a result of Method 1, however it is not responsive and does not scroll with the page.

Is there a way to make it responsive and to scroll with the page. I tried changing the css to position: relative, but that did not work.

Method 2: (pulls 2 banner images from any Genesis child themes images folder.)
It seems that this method is more responsive, but I had trouble making my images visible. Do you have to upload them to the image folder via ftp?
Also, again I would like them to scroll with the page. Changing the css to position: relative seems to work fine for the left image but the right one disappears completely off the page. Also, how can I restrict the images to the home page only?

Any further suggestions would be greatly appreciated.

Thank you.

Best regards,

Mike Coviello

[Author]

Posts