Genesis Framework Footer Widget

Community Forums Forums Design Tips and Tricks Genesis Framework Footer Widget

This topic is: not resolved

This topic contains 13 replies, has 2 voices, and was last updated by  YippyMomma 7 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #66944

    YippyMomma
    Participant
    Post count: 89

    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/
    #66956

    braddalton
    Participant
    Post count: 10217

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

    Remove this line from your child themes functions:
    [php]
    //* Add support for 3-column footer widgets
    add_theme_support( ‘genesis-footer-widgets’, 3 );
    [/php]

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

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


    #66957

    braddalton
    Participant
    Post count: 10217

    I would start a new post for the CSS.


    #66958

    YippyMomma
    Participant
    Post count: 89

    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!

    #66959

    braddalton
    Participant
    Post count: 10217

    Ok.

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


    #67004

    YippyMomma
    Participant
    Post count: 89

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

    #67051

    YippyMomma
    Participant
    Post count: 89

    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!

    #67110

    braddalton
    Participant
    Post count: 10217

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


    #67609

    YippyMomma
    Participant
    Post count: 89

    //* 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
    }

    #67612

    YippyMomma
    Participant
    Post count: 89

    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?

    #67633

    braddalton
    Participant
    Post count: 10217

    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.


    #69474

    YippyMomma
    Participant
    Post count: 89

    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.

    #69609

    braddalton
    Participant
    Post count: 10217

    Did you inspect it with Firebug?


    #93854

    YippyMomma
    Participant
    Post count: 89

    I tried, but couldn’t figure it out.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.