How do I change the width of my Zen Cart template?


The width of your Zen Cart store front is set by the current template’s stylesheet.  Most websites have the width set as either a percentage (eg 100%) or in pixels (eg 960px).  The width of the default template with Zen Cart – Classic Contemporary Green – is set at 750px, which is quite narrow for today where most visitors (on a computer or laptop) will be using a widescreen display (leaving aside devices such as smart phones and tablets).

In this tutorial, we are going to be setting the width to 1024px.  I prefer using a fixed width rather than a percentage so that I have more control over the design as the center column will be a consistent width for all users.

To change the width of the Zen Cart store front:

  1. Open the stylesheet.css file located in the /includes/templates/CUSTOM/css/ directory where CUSTOM represents the name of your current template folder.
  2. Find this section of code:
    /*wrappers - page or section containers*/
    #mainWrapper {
        background-color: #ffffff;
        text-align: left;
        width: 750px;
        vertical-align: top;
        border: 1px solid #9a9a9a;
        }
  3. and modify the width selector as needed:
    /*wrappers - page or section containers*/
    #mainWrapper {
        background-color: #ffffff;
        text-align: left;
        width: 1024px;
        vertical-align: top;
        border: 1px solid #9a9a9a;
        }
  4. Save the modified stylesheet.css file to your override folder.  This will be /includes/templates/CUSTOM/css/ where CUSTOM represents the name of your current template folder.

Width of Zen Cart store front

     
   
     

  1. #1 by Kman55 on 10 April, 2012 - 11:11 pm

    Thank you. I’ve been searching for something like this. What I’m trying to do is make the headerwrapper 100% width and keep the mainwrapper/contentwrapper to 1000px. I have it set up like that but the headerwrapper is still controlled by the mainwrapper…Any ideas on how I could achieve that?

  2. #2 by Kman55 on 10 April, 2012 - 11:12 pm

    For example: if you go to google analytics log in page, you’ll see the menu spread across the screen and the rest of the content centered. I’m trying to achieve something similar.

  3. #3 by Dawn Farias on 13 September, 2012 - 8:14 pm

    Perfect – thank you!

(will not be published)

Notify me of followup comments via e-mail. You can also subscribe without commenting.