Move widget above footer widget

Community Forums Forums Design Tips and Tricks Move widget above footer widget

This topic is: resolved

This topic contains 16 replies, has 2 voices, and was last updated by  YippyMomma 1 year, 7 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #32014

    YippyMomma
    Participant
    Post count: 89

    I used the custom welcome text widget tutorial to add a custom text area above the footer of my home page. But I’m actually trying to add the widget to ABOVE the footer widgets.

    Can someone help with this?

    http://www.ritapcheng.com/

    #32027

    braddalton
    Participant
    Post count: 10584

    Change the hook location in the code:
    [php]
    /** Add the welcome text section */
    add_action( ‘genesis_before_footer’, ‘custom_welcome_text’ );
    function custom_welcome_text() {
    genesis_widget_area( ‘welcome-text’, array(
    ‘before’ => ‘<div class="welcome-text widget-area">’,
    ) );
    }
    [/php]

    Or use this:

    [php]
    /** Add the welcome text section */
    add_action( ‘genesis_after_content_sidebar_wrap’, ‘custom_welcome_text’ );
    function custom_welcome_text() {
    genesis_widget_area( ‘welcome-text’, array(
    ‘before’ => ‘<div class="welcome-text widget-area">’,
    ) );
    }
    [/php]

    You can also reposition the footer widgets and change the hooks in this code also.


    #32072

    YippyMomma
    Participant
    Post count: 89

    Thanks for the reply. Yes. I tried both. The first placed it where it is now. The other is the original code from Brian Gardner for the welcome text which I also tried and that places the code below the nav bar inside the inner.

    #32077

    braddalton
    Participant
    Post count: 10584

    Hello Rita

    Not exactly because these are different hooks

    genesis_before_content_sidebar_wrap
    genesis_after_content_sidebar_wrap

    Did you change the hook?
    [php]
    /** Add the welcome text section */
    add_action( ‘genesis_after_content_sidebar_wrap’, ‘custom_welcome_text’ );
    function custom_welcome_text() {
    genesis_widget_area( ‘welcome-text’, array(
    ‘before’ => ‘<div class="welcome-text widget-area">’,
    ) );
    }
    [/php]

    Try the above code again and if you want another location, change the hook.

    genesis_after_loop

    [php]
    /** Add the welcome text section */
    add_action( ‘genesis_after_loop’, ‘custom_welcome_text’ );
    function custom_welcome_text() {
    genesis_widget_area( ‘welcome-text’, array(
    ‘before’ => ‘<div class="welcome-text widget-area">’,
    ) );
    }
    [/php]

    I tested all these hook locations and they all display the widget content above the genesis_before_footer hook.


    #32150

    YippyMomma
    Participant
    Post count: 89

    Hi Brad. So sorry, I was looking at your original post very quickly and missed that it was the after hook. My apologizes. Ok. So, that worked and it shows up above the footer properly on all pages including the blog page.

    The only thing is, I’m trying to make that flush on top of the footer widget area so they’re touching and I’d like the color to be full width like the footer widget area. Thoughts?

    Thanks for your help.

    #32199

    braddalton
    Participant
    Post count: 10584

    Line 696 of your style.css file.
    [css]
    #inner {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    margin: 100px auto 1px;
    overflow: hidden;
    padding: 0 30px;
    width: 900px;
    }
    [/css]

    Change the padding

    Then go to Line 1770 and modify the code http://www.w3schools.com/

    [css]
    .above-footer {
    background-color: #709ABF;
    border-bottom: medium none;
    border-top: medium none;
    color: #FFFFFF;
    font-size: 25px;
    line-height: 1;
    margin: 0 10px;
    overflow: hidden;
    padding: 20px 100px;
    text-align: center;
    }
    [/css]


    #32236

    YippyMomma
    Participant
    Post count: 89

    Now that I’m staring at the #inner I realize I had the wrong padding in there hence not getting it to go flush.

    I changed it, but it’s not quite  there. Is it b/c of the border radius?

    #inner {
    -khtml-border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    border-style:solid;
    border-color:#ffffff;
    background-color: #fff;
    margin: 100px auto 1px;
    overflow: hidden;
    padding: 70px 10px 0;
    width: 900px;
    }

    #32328

    YippyMomma
    Participant
    Post count: 89

    I’m thinking it’s not going full width of the screen because it’s in the #inner frame. I extended the padding and the text is getting cutoff and I added the width to 100%, but it’s just stops at the end of the #inner borders.

    I tried the  genesis_after_loop, but the box shows up on other pages when using it, so I think the genesis_after_content_sidebar_wrap is the way to go if it can sit outside the #inner right like the footer widget.

    Thanks for your help/time on this Brad. I appreciate it.

    #32392

    YippyMomma
    Participant
    Post count: 89

    Ok. So, I figured out a work around. It’s a bit of a “dirty” fix, but it works and did want I wanted.

    I installed a plugin to get a widget below the footer: BNS Add Widget

    Then I installed TablePress. I used three tables to create the look I needed and one large mapped image.

    I would have rather utilized the code for the custom welcome text box, the footer widget and the footer, but there were so many different things I couldn’t figure out.

    Thanks for your effort in trying to figure out the original code Brad. Much appreciated.

    #32434

    braddalton
    Participant
    Post count: 10584

    No worries. You could also change the hook in th widget function and display the new widget area content after the footer.

    You could also add content columns instead of a table.http://my.studiopress.com/tutorials/content-column-classes/


    #33612

    YippyMomma
    Participant
    Post count: 89

    awesome. Thanks for that link. I’ll give it a look and try it out.

    #33613

    YippyMomma
    Participant
    Post count: 89

    Brad – curious… can I use the  content columns in the nav? I’m trying to break up the nav bar on the site so I can have a left and a right one. right now I’m using padding to break it up and it’s not working well…

    #33831

    braddalton
    Participant
    Post count: 10584

    I think so but i’ve never done that.

    Why don’t you install WordPress locally and give it a try.


    #34739

    YippyMomma
    Participant
    Post count: 89

    Hi Brad. With the column classes, would I the div code directly into the widget?

     

    With regard to installing WP locally, I’ve never tried that… Would you by chance know of a tutorial I could follow?

    #34747

    braddalton
    Participant
    Post count: 10584

    Installing WordPress locally is easy.

    Yes i have over 900 tutorials on my site.

    Use the Google custom search to find them.

    If you’re using instantwp.com, simply download the installer and run it. Its very easy.

    You can add the HTML for the content columns directly into a text widget. Using them in a menu would be more complicated and i’ve never seen that done before.


Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.