Community Forums › Forums › Archived Forums › Design Tips and Tricks › Move widget above footer widget
- This topic has 16 replies, 2 voices, and was last updated 11 years ago by Rita.
-
AuthorPosts
-
March 29, 2013 at 10:12 pm #32014RitaMember
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?
March 30, 2013 at 3:39 am #32027Brad DaltonParticipantChange the hook location in the code:
/** 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">', ) ); }
Or use this:
/** 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">', ) ); }
You can also reposition the footer widgets and change the hooks in this code also.
March 30, 2013 at 8:12 am #32072RitaMemberThanks 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.
March 30, 2013 at 9:16 am #32077Brad DaltonParticipantHello Rita
Not exactly because these are different hooks
genesis_before_content_sidebar_wrap
genesis_after_content_sidebar_wrapDid you change the hook?
/** 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">', ) ); }
Try the above code again and if you want another location, change the hook.
genesis_after_loop
/** 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">', ) ); }
I tested all these hook locations and they all display the widget content above the genesis_before_footer hook.
March 30, 2013 at 5:56 pm #32150RitaMemberHi 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.
March 30, 2013 at 11:40 pm #32199Brad DaltonParticipantLine 696 of your style.css file.
#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; }
Change the padding
Then go to Line 1770 and modify the code http://www.w3schools.com/
.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; }
March 31, 2013 at 5:50 am #32236RitaMemberNow 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;
}March 31, 2013 at 2:43 pm #32328RitaMemberI'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.
March 31, 2013 at 10:43 pm #32392RitaMemberOk. 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.
April 1, 2013 at 9:07 am #32434Brad DaltonParticipantNo 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/
April 6, 2013 at 7:42 pm #33612RitaMemberawesome. Thanks for that link. I'll give it a look and try it out.
April 6, 2013 at 7:45 pm #33613RitaMemberBrad - 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...
April 7, 2013 at 6:48 pm #33831Brad DaltonParticipantI think so but i've never done that.
Why don't you install WordPress locally and give it a try.
April 11, 2013 at 9:26 am #34739RitaMemberHi 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?
April 11, 2013 at 9:48 am #34747Brad DaltonParticipantInstalling 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.
April 11, 2013 at 9:59 am #34751RitaMemberAwesome. Thanks Brad. I'll check out the tutorials for the local installation.
Going to test out the column classes with multiple rows on page and see how that comes out. Thanks.
April 11, 2013 at 11:24 am #34775RitaMemberOk.. I'm testing the column classes on a test page so I can put it into the widget created http://www.njdigitalmoms.com/250-2-test/
The first row is a paragraph - no column class. I just put in text.
followed by the mapped image
And then an area with 2 column classIt looks ok, but I'm trying to get the colors the same as seen in the footer. I tried a variety of background color inserts and it's not working. and when the background color does show up the text is either above or below the colored box and the colored box doesn't span the entire area of the page like the footer. lol.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.