Wordpress Themes - WP Forum at BFA

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)

dutchess Jan 26, 2012 01:52 PM

[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?

juggledad Jan 26, 2012 03:01 PM

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

dutchess Jan 26, 2012 03:32 PM

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.

juggledad Jan 26, 2012 04:38 PM

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

kangcarew Jan 26, 2012 06:56 PM

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.

juggledad Jan 26, 2012 07:28 PM

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;

dutchess Jan 27, 2012 02:14 AM

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:


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;

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) :)

Thanks again!

juggledad Jan 27, 2012 05:26 AM

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

dutchess Jan 27, 2012 11:18 AM

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.

All times are GMT -6. The time now is 02:33 AM.

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