Centering All Content

[alucier]

So thanks to this wonderful forum, I've managed (after many hours) to get my store looking pretty much how I want it. The only problem I'm having is that when I have the layout boxes on the left, the whole content isn't centered below the top logo.

http://www.angelalucier.com/store

In all reality it's only a small issue, but being as OCD as I am about symmetry and things being even, it bugs me. So if anyone can point me in the right direction on how to get the content centered (if possible), I would be much obliged!

[lawman]

I could just be misunderstanding what you are asking but your logo is centered across your cart.

If you want it to be centered just over the left column and center column and you don't plan on using the right column you could redo your header_bg.jpg image to a width of 610 (760px less the size of the right column) and it would appear centered over all of the visible content.

Or you could turn off the right column in ADMIN | LAYOUT SETTINGS and your center content would stretch to fit the area under the existing logo.

[alucier]

Alright...I tried your second solution, which worked, but then the bottom footer (Home, copyright etc.) wasn't centered under the center content. I tried your first solution (which is what I have now, http://www.angelalucier.com/store )...which is basically what my original intention was, but I wanted to have the entire thing centered on the page (right now it's off to the left).

Is there a way to move all of the content (everything) so it's all centered?

[Kim]

You will need to turn off the right column as instructed above then you can pad the left side of the footer to the width of the left column.

[alucier]

Alright, don't hate me for asking this haha...but how/where do I add padding to the left side of the footer? I got the whole thing centered now, it looks great (thanks guys!)...I just have to move the footer over now...

[DrByte]

1. open the page in your browser
2. View Source
3. look for your footer contents (ie: "powered by" is some of the text in your footer)
4. note the DIV "id" related to that section is "siteinfoLegal"
5. add padding for that selector in the stylesheet, equal to the width of your left column (which appears to be 150px?):

#siteinfoLegal {
padding-left: 150px;
}

6. next you'll be back to ask the same question about your "home" link. so, do the same thing, searching for "home". Hint: since it's in the footer, it'll be just a few lines above the siteinfoLegal stuff you found earlier. You'll see that it's contained inside the "navSuppWrapper" div.
7. add padding for that selector to your stylesheet.
8. You'll notice that 150px seems to be too much for that ... so try 80:

#navSuppWrapper {
padding-left: 80px;
}

For most other customizations to visual appearance, use the same concept.





BTW - just posted the same tips in the wiki

[alucier]

Thanks everyone so much!!