With large, wide screen monitors being far more affordable today, many of your customers may be looking at a version of your store that is just too wide for comfortable viewing and reading.  Here we are going to show how to change this template to a fixed width (in pixels) using the CSS file.

To change the Simply Kerrin Zen Cart template to a fixed width design:

1. Open the stylesheet.css file located in the /includes/templates/simply_kerrin/css/ directory.
2. Find this section of code:

   #mainWrapper {
       text-align: left;
       width: 90%;
       vertical-align: top;
       border-bottom: 1px solid #677f39;
       }

3. and modify the width as required (A width of 1000px would suit most stores):

   #mainWrapper {
       text-align: left;
       width: 1000px;
       vertical-align: top;
       border-bottom: 1px solid #677f39;
       }

4. Save the modified stylesheet.css file to the same folder, ie the   /includes/templates/simply_kerrin/css/ folder.

More Zen Cart:

1. How do I change the width of my Zen Cart template?
2. Hi, I like your simply kerrin template. But, how do I change or remove “congratulations! you have…..” in simply kerrin template. I tried using the classic template method as suggested but couldn’t find index.php. Kindly advise, thank you.
3. Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo
4. How to center your logo with the Simply Kerrin Zen Cart template
5. How do I add additional images in the header of the Simply Kerrin template?

1. Open the stylesheet.css file located in the /includes/templates/simply_kerrin/css/ directory.
2. Find this section of code:
   

   #logoWrapper {
       margin: 0 auto;
   }

3. and replace with this:

   #logoWrapper {
       background: url(http://www.kerrinhardy.com/images/freeshipping.jpg) top right no-repeat;
       min-height: 120px;
       width: 70%;
       margin: 0 auto;
   }

   Update the background element by inserting either the path or the absolute address of the image you wish to display in the header, as uploaded in step 1.  

   The min-height element will also need to be adjusted to suit the height of the image you are displaying.

   Experiment with the width of the #logoWrapper element to suit the width of your logo image and also the amount of spacing you are after.

4. Save the modified stylesheet.css file.

More Zen Cart:

1. How to center your logo with the Simply Kerrin Zen Cart template
2. How do I add additional images in the header of the Simply Kerrin template?
3. Hi Kerrin Trying your free template – but have run into a couple of problems. Replaced header text with a jpg. like header_bg but cant get it to center. If I remove powered by logo at top can I still have it in admin?
4. Hi Kerrin – In Simply Kerrin Template how do I add a sidebox to bottom left or at least how do i display paypal verified logo above visitors online. Thanks
5. How do I add additional images in the header of the Simply Kerrin template?

Update Header

1. Open the tpl_header.php file located in the /includes/templates/simply_kerrin/common/ directory.
2. Move the logo div (as below):

   <?php echo '' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . ''; ?>
   
   <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>

3. to below this section of code:

   <!--bof-branding display-->
   <div id="logoWrapper">

4. Save the modified tpl_header.php file.

Or you can download a copy of the modified tpl_header.php file to upload to your store.

Stylesheet

1. Open the stylesheet.css file located in the /includes/templates/simply_kerrin/css/ directory.
2. Find the following section

   #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
   	float: left;
   	}

3. And modify to remove #logo:

   .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
   	float: left;
   	}

4. Then add the following lines at the end of the file:

   #logo {
       text-align: center;
   }
   
   #logoWrapper {
       margin: 0 auto;
   }

5. Save the modified stylesheet.css file.

More Zen Cart:

1. Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo
2. How do I add additional images in the header of the Simply Kerrin template?
3. Hi Kerrin Trying your free template – but have run into a couple of problems. Replaced header text with a jpg. like header_bg but cant get it to center. If I remove powered by logo at top can I still have it in admin?
4. How do I change the Simply Kerrin Zen Cart template from a fluid width to a fixed width?
5. Hi Kerrin – In Simply Kerrin Template how do I add a sidebox to bottom left or at least how do i display paypal verified logo above visitors online. Thanks

Firstly, the Simply Kerrin template is available from this site – download and install Simply Kerrin Zen Cart template – and also from the official Zen Cart site in the Add-ons section – download template.

Now on to the support available:

1. Ask a Question
2. Email info@kerrinhardy.com
3. Leave a comment at kerrinhardy.com
4. Zen Cart support forum thread
5. Zen Cart Simply Kerrin Template Frequently Asked Questions

Here’s a selection of the FAQ to date:

• I want to remove the credit card info and pictures at the bottom of the simply_kerrin template. Can you direct a rookie please
• Hi Kerrin With your Free template with 2 columns the word Home is not lined up with the left side of the right column – can that be done as it runs into left sideboxes. Thanks Ron
• Hi Kerrin Trying your free template – but have run into a couple of problems. Replaced header text with a jpg. like header_bg but cant get it to center. If I remove powered by logo at top can I still have it in admin?
• Hi Kerrin – In Simply Kerrin Template how do I add a sidebox to bottom left or at least how do i display paypal verified logo above visitors online. Thanks
• How do I change the colour of the text “Congratulations! You have successfully installed…” in the Simply Kerrin template?
• How do I change the colour of the Product Title on the product information pages in the Simply Kerrin template?
• How do I add additional images in the header of the Simply Kerrin template?
• How do I change the colour of the Product Descriptions on the product information pages in the Simply Kerrin template?
• How do I change the colour of the sidebar text in the Simply Kerrin template?
• Where has the large green header bar at the top gone?
• Hi, I like your simply kerrin template. But, how do I change or remove “congratulations! you have…..” in simply kerrin template. I tried using the classic template method as suggested but couldn’t find index.php. Kindly advise, thank you.

More Zen Cart:

1. Free Zen Cart Template – Simply Kerrin – now updated
2. Free Zen Cart Template – Simply Kerrin – Now Available
3. Frequently Asked Questions
4. Zen Cart Simply Kerrin Template FAQ
5. How do I change the Simply Kerrin Zen Cart template from a fluid width to a fixed width?

Simply Kerrin Zen Cart Template

Just a quick note to let you know that the Simply Kerrin Zen Cart Template has been updated to bring it into line with the latest version of Zen Cart – 1.39f.

Go to Simply Kerrin Zen Cart Template to download the new version (1.2)

The Simply Kerrin Zen Cart Template is designed for a ‘clean and simple’ online store and is also suited to stores with a limited number of products. The shadow effect has been developed to allow the background color to change as required.

More Zen Cart:

1. Free Zen Cart Template – Simply Kerrin – Now Available
2. Frequently Asked Questions about free Zen Cart Template – Simply Kerrin
3. Zen Cart Simply Kerrin Template FAQ
4. Simply Kerrin Zen Cart Template
5. How to center your logo with the Simply Kerrin Zen Cart template

However, there may be times when you wish to display additional image(s) in the header, for example to include a free shipping icon.  There are two options – add the reference to the image in the tpl_header.php file or add the reference to the image to the stylesheet.css file.

In this example we will include a free shipping image in the header:

1. Upload the required image to the /images folder located in the /includes/templates/simply_kerrin directory.
2. Next, open the tpl_header.php file located in the /includes/templates/simply_kerrin/common/ directory.
3. Find this section of code:

   <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
   </div>

4. and modify to also include the additional image:

   <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
   </div><div><img src="includes/templates/simply_kerrin/images/freeshipping.jpg" /></div>

5. Save the modified tpl_header.php file.

More Zen Cart:

1. How do I add additional images in the header of the Simply Kerrin template?
2. How to center your logo with the Simply Kerrin Zen Cart template
3. Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo
4. How do I change the Simply Kerrin Zen Cart template from a fluid width to a fixed width?
5. Frequently Asked Questions about free Zen Cart Template – Simply Kerrin