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!

Thanks!

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.

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?

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?

The page is layed out in a table with three rows:
and the center row has 1-5 columns:
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.

I have gotten the footer to go full-width using the
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.

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….

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.

http://www.mshmontgomery.org/wp-cont.../01/Screen.jpg

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

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.

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.

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

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.

http://www.mshmontgomery.org/wp-cont.../home-page.jpg

Is the page to be fixed width or variable?

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.

try

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.

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