Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Changing Width from default to 800px wide
 
seoguy
Member
 
Total Posts:  46
Joined:  2008-01-25
 

Hi All

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.

Great work guys!

Chris

 
Magento Community Magento Community
Magento Community
Magento Community
 
Kara Heinrichs
Guru
 
Avatar
Total Posts:  482
Joined:  2008-01-17
aa, mi, us
 

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.

.contentWrapper {
width
800px;
padding0pt 8px;
margin0 auto;
}

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
medic
Sr. Member
 
Total Posts:  173
Joined:  2007-10-30
Sydney
 

kara, what file did you insert that code into?

 
Magento Community Magento Community
Magento Community
Magento Community
 
bossballa
Jr. Member
 
Total Posts:  1
Joined:  2008-02-05
 

I’m having the same issue. where exactly do you place that CSS code?

and where exactly did you place the extra block/div tags? can you explain furhter PLEASE.

Thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Kara Heinrichs
Guru
 
Avatar
Total Posts:  482
Joined:  2008-01-17
aa, mi, us
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 

Hi,

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

Regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 

Any ideas?

Kind regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
 
brydave
Jr. Member
 
Total Posts:  10
Joined:  2008-12-10
 

This should help:

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!

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 
brydave - 16 December 2008 08:53 AM

This should help:

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:

.wrapper { width:950px}
.header {
    text
-align:left;
    
margin-left:auto;
    
margin-right:auto;
    
}
.header-top {
    position
:relative;
    
z-index:999;
/*    width:930px; */
    
width:950px;
    
margin:0 auto;
    
}
.header-nav {
/*    width:950px; */
    
width:950px;
    
margin:0 auto;
    
position:relative
    }
.middle {
    min
-height:400px;
/*    width:900px;*/
    
width:950;
    
margin:0 auto;
    
text-align:left;
    
position:relative;
    
}

Regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
 
brydave
Jr. Member
 
Total Posts:  10
Joined:  2008-12-10
 

Try this to see if the simple solution works:

.wrapper { width:950pxmargin:0 auto}
and dont forget to change:
/* Style */
.header { border-top:5px solid #0d2131; width:950px; }

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.

.wrapper { background-image:url(../images/mybg.gif);}
.header { text-align:left}
.header-top { width:1000pxmargin:;  background-color:#0000CC z-index:100;  }
.header-nav { width:1000pxmargin:;  background-color:#0000CC;}
.middle { width:1000pxmin-height:400pxmargin:0 autotext-align:left}
.side-col { }
.col-left { float:left}
.col-main { float:left}
.col-right { float:right}
.col-1-layout .col-main { float:nonemargin-left:automargin-right:auto}
.col-2-right-layout .col-main { float:leftwidth:685px;  }
.col-2-left-layout .col-main { float:rightwidth:685px}
.col-3-layout .col-main { width:475pxmargin-left:17px}

/* Style */
.header { border-top:5px solid #0d2131; width:1000px; background-color:#00FF00; margin-left:auto; margin-right:auto; }
.header-top-container { border-bottom:1px solid #415966;  }
.header-top { padding:0px}
.header-nav-container { background-color:#00FF00 }
.middle-container { background-image:url(../images/mybg.gif); }
.middle {  }

Hope this helps a bit more!

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 
brydave - 16 December 2008 10:20 AM

Try this to see if the simple solution works:

.wrapper { width:950pxmargin:0 auto}
and dont forget to change:
/* Style */
.header { border-top:5px solid #0d2131; width:950px; }

The above code worked beautiful!! But only in Firefox :( In Internet explorer 6 it still has problems with the centering of the page…

Regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 

Any ideas...?

Best regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 

Am I the only one who are having these problems?

Regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
 
MazeDK
Member
 
Total Posts:  68
Joined:  2008-10-21
 

Yay! I found the solution smile

I used the solution with the wrapper-tag. Furthermore I removed the width definition in: .header-top, .header-nav and .middle

Thanks for input.

Regards,
Mads

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top