Posts Tagged ‘zen cart design’

When designing a zen cart website, the top edge of the website is set snug against the top of your browser as shown in the photo below:

header image no padding

Some of you may wish to add a little space at the top – especially if you have a background image that you want to show on all sides, top and bottom of the computer screen.  To do this, find the stylesheet.css that goes with your template.  If you are using the overrides system (as you always should!) this file would be located in the includes/templates/YOUR TEMPLATE NAME/css folder.  Open the stylesheet.css and at the top you will see something similar to this code:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #000000;
}

Add padding-top:10px;  (and adjust the “10” to meet your needs) to your code which will make it look similar to:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #000000;
padding-top:10px;
}

This will give you a 10 pixel padding at the very top of your computer screen so that your background will show up in the first 10 pixels of space like so:

heading with padding at top