Wordpress Themes - WP Forum at BFA - [SOLVED] Change Footer Padding

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Post-Kicker, -Byline & -Footer (http://forum.bytesforall.com/forumdisplay.php?f=17)

- - [SOLVED] Change Footer Padding (http://forum.bytesforall.com/showthread.php?t=16606)

[SOLVED] Change Footer Padding

Hi, I am on Wordpress 3.3.1
Atahualpa 3.7.3

I am trying to figure out how to change the padding between the footer and the edge of the container.

The layout container style has a 20px padding around it by default (top/bottom and left/right), and it causes the footer (and it's associated border, background color, etc) to be floating 20px from the right, left, and bottom of the container.

Is there any way to make the footer expand down and to the sides so that it reaches the edge of the layout container?

I've tried to change the margin and padding of the 'footer style' but to no avail :( I'm not sure if that is because I wasn't coding it correctly or whether I was using the wrong code...

Help please?

take a look at your style settings at 'Layout Container Style'

Hi JuggleDad, I have looked through that section already..

the best I could do is get rid of the 'padding: 20px' and "layout container left/right" = 20px
- but unfortunately that is a global change that gets rid of the padding for the rest of the container (i.e. for the body of every page of the website).

when I change the padding of the layout container style to 0 and the layout container padding left/right to 0, i get what I want for the footer, but the rest of the website looks bad because there is no padding left/right between the text and the border.

Is there a way to specifically target the padding of the footer itself? I would like the padding to be negative so that it will actually protrude past the container padding and up against the container border itself.

Time for a CSS lesson. You need to go to http://www.w3schools.com/cssref/pr_padding.asp and see how it works. :)

Dutchess, i'm not 100% sure what you are trying to achieve, but if you need to remove the margin between the footer and the "wrapper" I would add

HTML Code:

#wrapper {

    margin-bottom: 20px;

}

to the css. However each time I suggest adding to the css, juggledad educates me on how it can be achieved an easier way. lol. I hope this helps with what you are trying to solve.

well kangcarew, since you mostly gave away the answer. She is trying to get rid of the padding and currently has

HTML Code:

margin: 20px

which is short hand for

HTML Code:

margin: 20px 20px 20px 20px

which is short hand for

HTML Code:

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

margin-left: 20px;

so you could code a

HTML Code:

margin: 20px 20px 0 20px;

(the order is top, right, bottom, left) or

HTML Code:

margin-bottom: 0;

Juggledad and Kangcarew, thanks for your help!

I have it figured out, but I don't think I'm coding it the right way...

I am developing a site around the Atahualpa Theme "ata-default" which is what set the layout container padding at 20px.

Here is what I started with:

http://mjhq.com/wp-content/uploads/2012/01/pic1.png

As you can see, the layout container has a padding of 20px all around, which means the footer looks a bit out of place with the padding preventing it from spanning the entire width of the container.

So the first thing I did is remove the padding from the bottom of the layout container, which made the footer align with the bottom of the layout container.
ATA > style and configure Layout > Layout Container Style > padding: 20px 0 0 0;

http://mjhq.com/wp-content/uploads/2012/01/pic2.png
This is where I got into trouble... I want to make the footer span the entire layout width (without changing the padding around the rest of the layout container), and I was successful but I MacGuyver'ed it.

I eventually used this code to make the footer editable

ATO > style & edit Footer > Footer Style > position: absolute;

and then manually increased the layout padding, changed the position and width of the footer, etc... but I feel like there should be a better way of increasing the width of the footer rather than having to edit the width, position, layout, etc manually...

Is there a simple piece of code that I can use to make the footer span the layout container without using absolute positioning?

Here is the final result, which looks right, but done with sloppy coding. Is there a simpler way? (just in terms of being a better Atahualpa designer) :)

http://mjhq.com/wp-content/uploads/2012/01/pic3.png
Thanks again!

sorry, I miss that you wanted to expand to the sides too.
Take a look at this link http://letusbuzz.com/2010/11/full-wi...-in-atahualpa/ for a clever solution

Thanks JD! That was much more elegant than what I had.

I am constantly impressed by how flexible Atahualapa is and how much I can do with it.