Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo


At various times of the marketing calendar, you may wish to highlight a promotion by placing an additional image in the header.  So this does not affect the centred logo, I recommend the following method.

Simply Kerrin Zen Cart 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.

     
   
     

  1. No comments yet.
(will not be published)

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