Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Framework Footer Widget
- This topic has 13 replies, 2 voices, and was last updated 10 years ago by Rita.
-
AuthorPosts
-
October 15, 2013 at 11:51 pm #66944RitaMember
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/October 16, 2013 at 4:15 am #66956Brad DaltonParticipantYou 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
October 16, 2013 at 4:23 am #66957Brad DaltonParticipantOctober 16, 2013 at 4:37 am #66958RitaMemberI 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!
October 16, 2013 at 4:57 am #66959Brad DaltonParticipantOk.
Why don't you use the Sample child theme or a blank child theme for custom coding?
October 16, 2013 at 10:26 am #67004RitaMemberFunny 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!!!
October 16, 2013 at 12:42 pm #67051RitaMemberI 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!
October 16, 2013 at 9:33 pm #67110Brad DaltonParticipantOctober 19, 2013 at 3:59 am #67609RitaMember//* 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
}October 19, 2013 at 4:23 am #67612RitaMemberOnly 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?
October 19, 2013 at 7:47 am #67633Brad DaltonParticipantThe 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.
October 28, 2013 at 11:30 am #69474RitaMemberI 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.
October 29, 2013 at 6:28 am #69609Brad DaltonParticipantMarch 7, 2014 at 12:31 pm #93854RitaMemberI tried, but couldn't figure it out.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.