Genesis Framework Footer Widget

[Rita]

I'm using the Genesis Framework as my theme. I made a copy of the GF and made it my "child" theme by renaming the folder when I uploaded it.

I'm trying to make the footer widget area into one widget instead of the 3 widgets, but I'm not entirely sure how to do this since there's no widget code in the functions.php file.

I created a custom menu titled "footer" and added it to my footer 1 widget. Since there are multiple widgets there now, it just stacks the items in list form. Basically, I want the footer widget to look exactly like my primary navigation menu.

Here's the site: http://yippybebe.com/journal/

So, aside from not being able to figure out what code to put into the function.php file to make it one widget, I also couldn't figure out which code in the CSS I need to edit for the styling of that footer widget to remove the list format. I saw code for footer-widget li and removed that, but all it did was add bullets to each item in the footer menu. I know I'm just totally missing it when looking for the code.

http://Here's the site: http://yippybebe.com/journal/

[Brad Dalton]

You could simply remove support for footer widgets and then hook in a new widget area.

Remove this line from your child themes functions:

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

And then add something like this code to your child themes functions file which is tested and works:

https://gist.github.com/braddalton/1cd2793faf254e7905bb

---

Tutorials for StudioPress Themes.

[Brad Dalton]

I would start a new post for the CSS.

---

Tutorials for StudioPress Themes.

[Rita]

I normally would just do exactly as you outlined with removing the code , but since I'm using the base genesis framework theme the widget code isn't in the functions.php file. Lol.

But, I'm just going to try and add the add code you gave me for the full width and see if that does anything . Thanks Brad!

[Brad Dalton]

Ok.

Why don't you use the Sample child theme or a blank child theme for custom coding?

---

Tutorials for StudioPress Themes.

[Rita]

Funny you should mention that. After I did my last reply, I was looking through the downloads area and saw the genesis sample theme. Which I didn't know existed. So I've installed it. Going to test the code you provided above. Thanks Brad!!!

[Rita]

I used your code but had to change the hook. After I changed the hook it showed up in the right spot so that worked. Thanks for the code.

I was able to figure out the CSS. Thanks Brad!

[Brad Dalton]

Good stuff. Share the CSS code please if you have time.

---

Tutorials for StudioPress Themes.

[Rita]

//* Register New Full Width widget area
genesis_register_sidebar( array(
'id' => 'new-footer',
'name' => __( 'New Footer', 'yippybebe' ),
'description' => __( 'This is the custom full width footer widget area', 'yippybebe' ),
) );

//* Hook widget to footer
add_action( genesis_before_footer, 'full_width_footer_widget' );

function full_width_footer_widget() {

if ( is_active_sidebar('new-footer') ) {
genesis_widget_area( 'new-footer', array(
'before'=> '<div class="new-footer widget-area">',
'after' => '</div>',
) );

}
}

New Footer Widget
---------------------------------------------------------------------------------------------------- */

.new-footer {
width: 100%
}

.new-footer ul {
background-color: #caced5;
height: 67px;
text-align: center;
clear: both;
padding: 18px 10px;
}

.new-footer .menu-item {
display: inline-block;
}

.new-footer .menu a {
border: none;
height: 67px;
color: #3d4c4f;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
letter-spacing: 1.2pt;
padding: 10px 10px;
}

.new-footer .menu a:hover {
color: #f7951e
}

[Rita]

Only thing I can't figure out is the mobile version of the site. When you look at it on the iPhone the background bar on the primary nav and the new footer widget, don't "stretch" with the menu items. So then the menu items end up rolling on top of the blog post title and the new footer widget rolls onto the regular footer.

Not sure if I need to create a new thread for this?

[Brad Dalton]

The mobile CSS is really easy. Just add the new rules for each element you want modified at different screen sizes to the existing Media Queries.

---

Tutorials for StudioPress Themes.

[Rita]

I can't figure out which part of the mobile code is for the nav bar? The Nav bar right now .. the text isn't sitting in the colored bar. It scrolls into the post title, etc.

[Brad Dalton]

Did you inspect it with Firebug?

---

Tutorials for StudioPress Themes.

[Rita]

I tried, but couldn't figure it out.

[Author]

Posts