after_content widget area not wrapping in site-container

[EZEarache]

Hi,

I am trying to add a few widget areas below the main content area, but they aren't wrapping in "site-container". They are just displaying above the footer area and also causing the footer area to go full width, which I don't want. Is this the way the after_content widget area is supposed to behave or did I do something wrong? Is there a way to get it to wrap in the "site-container"?

I'm using the following code in functions:

//* Creates a Widget for the Contact area

genesis_register_sidebar( array(
'id' => 'contact-widget',
'name' => __( 'Contact Widget', 'genesis' ),
'description' => __( 'Contains Contact Information under the Content Area' ),
) );

add_action( 'genesis_after_content', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
if ( is_page('006') && is_active_sidebar('contact-widget') ) {
genesis_widget_area( 'contact-widget', array(
'before' => '<div class="contact-widget widget-area">',
'after' => '</div>',
) );
}
}

[Pixel Frau]

Which theme are you using? Link to the site?

[EZEarache]

Hi Julia,

Thanks for your response.

I'm creating a custom Genesis Child Theme.

link

I've played around with it some more so the function I'm using at the moment is:

//* Creates a Widget for the Contact area

genesis_register_sidebar( array(
'id' => 'contact-widget',
'name' => __( 'Contact Widget', 'genesis' ),
'description' => __( 'Contains Contact Information under the Content Area' ),
) );

add_action( 'genesis_entry_footer', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
if ( is_page('006') && is_active_sidebar('contact-widget') ) {
genesis_widget_area( 'contact-widget', array(
'before' => '<div id="contact-widget">',
'after' => '</div>',
) );
}
}

I've been styling it with:

#contact-widget {
max-width: 970px;
max-height: 510px;
position:relative;
margin: 0 auto 0 auto;
}

#text-2.widget.widget_text {
display: block;
position: relative;
float: left;
max-width: 450px;
max-height: 500px;
border: 20px solid transparent;
border-radius: 40px 40px 40px 40px;
background-color: #C7B299;
-webkit-box-shadow: 3px 15px 43px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 3px 15px 43px 3px rgba(0,0,0,0.8);
box-shadow: 3px 15px 43px 3px rgba(0,0,0,0.8);
-webkit-border-image: url(http://www.kayakwappingers.com/awayadventures/wp-content/themes/genesis-sample/images/content-border.png) 30 30 30 30;
-o-border-image: url(http://www.kayakwappingers.com/awayadventures/wp-content/themes/genesis-sample/images/content-border.png)30 30 30 30;
border-image: url(http://www.kayakwappingers.com/awayadventures/wp-content/themes/genesis-sample/images/content-border.png) 30 30 30 30;
padding: 10px;
margin: 0px auto 0px auto;
overflow: hidden;

}

The float left is what's making it go into the footer, but I would really like the whole widget to get wrapped by site-container.

[EZEarache]

Seems like my link didn't work before.

http://kayakwappingers.com/awayadventures/

[Pixel Frau]

OK, how do you want it to look? Left aligned, below the content and above the footer? Is there a particular reason you need a custom widget area rather than using the built-in Genesis footer widgets?

Sorry for all the questions, but it helps see what might be the best solution for you. 🙂

[EZEarache]

Hi,

Yes, I want it left aligned, below the content and above the footer. I assumed that the footer widgets would go into the footer. So I figured I needed a custom widget. Is that not the case, Also, the widget areas I'm creating will only be visible on the home page. I'm also guessing that the footer widgets would be global across the site. Maybe my assumptions are incorrect.

Your help is greatly appreciated, so I'm happy to answer your questions.

[Pixel Frau]

The footer widgets have their own section above the credits.

An easy solution would be to add a div after the widget area, then clear the float in the CSS.

So your widget area function would look something like this:

//* Creates a Widget for the Contact area

genesis_register_sidebar( array(
'id' => 'contact-widget',
'name' => __( 'Contact Widget', 'genesis' ),
'description' => __( 'Contains Contact Information under the Content Area' ),
) );

add_action( 'genesis_entry_footer', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
if ( is_page('006') && is_active_sidebar('contact-widget') ) {
genesis_widget_area( 'contact-widget', array(
'before' => '<div id="contact-widget">',
'after' => '</div><div class="clear"></div>',
) );
}
}

And you'd add this to your CSS:

.clear {
clear: both;
}

[EZEarache]

Cool Thanks!

That seems to fix the problem for now.

I take it there's no way to get this to go into the "site-container" that you cab think of though?

[Pixel Frau]

You could try using a different hook. Check out the visual hook guide and plugin.

[Author]

Posts