First, let me say I am truly impressed with this ecommerce platform. Great work!
I am designing a new store and I want it to be 800px wide. That is easy enough to do by adding width: 800px; in the body layout in the reset.css file. The only problem is then is that it pulls the site to the left when I want it centered. I have fiddled with the boxes. and actually got it the way I want it, but I was using firefox. When I came to work this morning I pulled it up on IE and the header, body and footer sections were not lining up.
2 questions: is there an IE fix for this that I can add in the ie css file? Or second, (the easiest, I think, is there a way on the body style attribute in the reset.css file to make it align center?
The header, top menu and footer seem to have a width of 100% hard coded somewhere, but I cannot for the life of me track it down.
Your mileage may vary, but I added another block/div to control the overall width of the page to the templates to avoid having the header, middle, and footer acting separately and then styled it with this CSS. Should behave OK in both Firefox and IE.
You could probably just add the width and the margin explicitly to .header-top-container, .middle-container, and .footer-container if you didn’t want to change the templates themselves.
I’m sorry guys. I stopped watching this thread. Medic and Bossballa have probably already figured this out, but just in case any one else happens across this thread and finds my previous post confusing, I’ll try again.
Inside of the directory app>design>frontend>your theme>default>template>page (whew!) are the page templates that control the overall structure of the pages used in Magento. If you crack one open (like 3columns.phtml), you’ll see divs like “.header”, “.middle-container” and “.footer-container” that define the big structural blocks of the page. If you want to change the page width, you can insert the CSS styles in my post above into boxes.css (in skin>frontend>your theme>default>css) for each of those divs. But then while you’re in boxes.css you’ll also notice that some of the interior divs inside those structural divs have explicit widths associated with them too (like “.header-top”, “.header-nav”, “.middle” and “.footer"). Dang.
So you have a couple of choices for resizing the width of the page. One is to change all the widths set in boxes.css for the interior divs like “.header-top”, “.header-nav” etc. My problem with that is that I always miss one and then if I want to change the width again, you have to find ‘em all again. I tend to try to set the widths at the highest-level structural element that I can and delete them from these “lower” divs (so that would be setting the width in “.header”, “.middle-container” and “.footer-container” in the default theme.)
What I did in my post above was to add another wrapper div (".content-wrapper" in my example) to each of the page templates (like “3columns.phtml") and define the width once in boxes.css, deleting all the other explicit widths for the divs now inside of “.content-wrapper”.
Clear as mud? Feel free to PM me if that still makes no sense and you happen across this.
I have tried to do the things above, but I can’t align the page to center. The width is working fine, but the whole page is moved to the left. Don’t I need to add an align to the wrapper...?
Try adding “margin-left:auto” and “margin-right:auto” attributes to “.header” class in boxes.css.
The “.col-1-layout .col-main” (or whatever column layout you are using) should already have those included.
This should center everything header, and body.
Try adding “margin-left:auto” and “margin-right:auto” attributes to “.header” class in boxes.css.
The “.col-1-layout .col-main” (or whatever column layout you are using) should already have those included.
This should center everything header, and body.
Hope this helps for anyone who may need it!
Thanks for you reply! But it still won’t align correctly :( Right now I have this in boxes.css:
If that doesn’t work, here is what worked for me besides the above solution. It’s kind of jumbled because I was playing with all different attempts to line things up, but basically i am trying to make my width 1000px and have a background image.
