Custom Colors, Images and Graphics
 

All colors for your storefront are controlled by one single document: stylesheet.css
Path: /yourdomain.com/catalog/stylesheet.css


You can easily change the colors, font sizes, font colors, margins, etc. for the entire cart using this document. Style sheets work as a definable reference sheet so you can tell the page how to display certain areas and tag within your html text.  Then in the html you reference the style sheet so the page will be displayed as per the style sheet. This helps keep the look and feel consistent.  If you change an attribute once, it updates the entire site where that attribute is present.

All Changeable attributes are marked in RED, but for .css (Cascading Style Sheet) you can edit just about everything. This is just some of the basic attributes.  You can edit this style sheet as a normal document.

Excerpt from stylesheet.css:

--------------------------------

BODY {
background: #ffffff;
color: #000000;
margin: 0px;
}

A {
color: #000000;
text-decoration: none;
}

A:hover {
color: #11366D;
text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
background: #ffffff;
}

 

 

Images
 

The first thing you may want to do is replace the osCommerce logo with one of your own:


Path: /yourdomain.com/catalog/images/oscommerce.gif


The fastest and easiest way to do this is to make a logo using a graphics editor, save the file as oscommerce.gif and upload it to the same folder where it is stored in the /catalog file tree, thus replacing the osCommerce logo with your own.

Note:
Your logo DOES NOT have to be the same size as oscommerce.gif

 

Other images to note: 

Path: /yourdomain.com/catalog/images/infobox/corner_left.gif
This is the little left half-circle at the top left side of your categories table:

Path: /yourdomain.com/catalog/images/infobox/corner_right.gif
Same thing, but on the right side:

Path: /yourdomain.com/catalog/images/infobox/corner_right_left.gif
The square one in every table:

If you decide to change the table colors in stylesheet.css, you will want to replace these with matching colored graphics of your own. For best results make sure the new replacement graphics you make are the same width and height as the above samples.