Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Full width footer widget (http://forum.bytesforall.com/showthread.php?t=21142)

gr870sfunk Nov 14, 2013 02:12 PM

Full width footer widget
I have a full width footer already, but I would like to put a custom widget above the actual footer because the content should only show up on the home page.

My problem is that I would like the widget to have a full width solid color background and i'm not sure how to do a full width background on a widget. Any ideas would be much appreciated!


ps: if it's possible to do a full width div on the bottom of the home page instead of doing a footer widget, I am open to that as well.

juggledad Nov 14, 2013 03:07 PM

Currently there is no way to get the full width footer and have widgets in it without modifying the code.

However, would you be willing to partially fund a new option to allow the footer to be full width and allow widgets to be used in it?

gr870sfunk Nov 14, 2013 03:11 PM

Donation made to you Juggledad!

Would it be possible to not do it as a widget, but instead code a div to sit on top of the center column allowing it to have a full width?

juggledad Nov 17, 2013 06:30 AM


Would it be possible to not do it as a widget, but instead code a div to sit on top of the center column allowing it to have a full width?
The page is layed out in a table with three rows:


and the center row has 1-5 columns:

left sidebar, left inner, center, right inner, right sidebar
The problem is that you can't extend a table row wider than the table width itself

You can put a widget area at the top or bottom of the center area (new option in 3.7.12) but it does not span the sidebars, just the center area.

gr870sfunk Jan 13, 2014 04:48 PM

I have gotten the footer to go full-width using the
HTML Code:

hack, but now i have a different problem.

The widget on the left called "subfooter_1" won't move. It should slide to the left with the other things on the page when the browser window is resized, but it just stays there like there is a left margin being applied (which there is not).

The site is currently in development, so I will have to give you the login info for you to look at it.

I will pm it to you shortly. Thanks!

EDIT: I have removed the hack and am using the included full-width footer, but I am still getting the problem.

juggledad Jan 13, 2014 07:29 PM

CSS Inserts: why do you have padding?
subfooter {
background-color: #D5DAC6;
font-family: Gentium Basic,serif !important;
padding: 20px 0 20px 160px;
the 160px is the left side….

gr870sfunk Jan 14, 2014 08:26 AM

If I don't have the padding, #subfooter_1 is crammed up against the lefthand side. I am currently working on a possible solution, but I wanted you to see it without the padding as well.


juggledad Jan 14, 2014 10:13 AM

but the 160px is for the left padding. Use Firebug and play with it.

gr870sfunk Jan 14, 2014 02:11 PM

I'm not sure what you're meaning when you say the 160px is for left padding because that's what I wanted it to do, in order to get it off the lefthand side.

I have looked at this most of the day and the only thing I can think of that it has something to do with the inline styles in the below code, but I'm sure it probably something else that I haven't thought of. I'm completely stumped.

HTML Code:

<table id="sub-footer" class="bfa_widget_area" style="table-layout:fixed;width:100%;" cellpadding="0" cellspacing="0" border="0">
My ultimate goal is to have the sub-footer lined up underneath the my fixed width content above but with a full width background color which I thought I was doing by confining the sub-footer content to a widget area and not just coding it as an additional part of the footer with divs.

Additionally, if it's any help, I have a site that I am working on that has the same type of subfooter, but with only one widget area and it works correctly.

juggledad Jan 14, 2014 06:13 PM

so what color are you trying to have full width. If you add the 160px back in I see a full width color for the area. I guess I'm not quite clear on what you want to do

gr870sfunk Jan 15, 2014 08:33 AM

I need the subfooter to look like the attached with the background color for both the subfooter and footer running full width while the content of the aforementioned subfooter and footer stays lined up directly underneath the rest of the page.


juggledad Jan 15, 2014 09:36 AM

Is the page to be fixed width or variable?

gr870sfunk Jan 15, 2014 01:47 PM

It is fixed at 1000px.

I have tried giving a fixed width to #sub-footer, but it doesn't do any good. It's 1000px wide, but it is still crammed up against the lefthand side. I don't understand why #sub-footer won't center, which is essentially what I need it to do. Center the content on the full width background. Once that is done, I can text-align:left; all the copy.

juggledad Jan 15, 2014 02:40 PM

HTML Code:

#advanced-recent-posts-2 {
    padding-left: 224px;

gr870sfunk Jan 16, 2014 03:30 PM

That works to move it off the lefthand side, but I still have the original problem of it not moving when the window is resized.

juggledad Jan 23, 2014 03:57 PM

ok, I think I have a solution for you
change the widget area to a one cell widget area. This will put it in a DIV instead of a table
set the div to width: 1000px; margin-left:auto; margin-right: auto;
put the widgets into the one widget area.
looking at the source, find the ID of the two widget areas and add the following CSS
#widget-id1 {float: left;}
#widget-id2 {float: right;}

see if that works

All times are GMT -6. The time now is 05:55 PM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.