Personalizing osCommerce

Now, first of all, you’ll probably want to remove the osCommerce logo from the top of the page and replace it with your own. This is easy enough and can be done manually by editing the header.php file in the catalog/includes directory. Open the file in any text editor (Notepad will do) and scroll down past the osCommerce declaration at the top, and all of the IF statements. In the first of the nested tables, there is a reference to the current logo:

tep_image(DIR_WS_IMAGES . 'logo.gif', 'osCommerce')   

Simply change the GIF name to that of your own logo (having first uploaded your image to the images directory of course) and amend the alt text (the text in single quotes). All done. There should be another osCommerce logo at the bottom of the page. Since you’re using open source software, completely free of charge and restriction, you really should keep this in place. Other banners can be added using the banner manager in the admin tool, which is also where the osCommerce one can be removed if you really can’t bear the sight of it.

Next, we deal with the colors. If your business already exists in the real world, you probably already have a color scheme. If you’re purely an e-shop, for the sake of individuality, you’ll still want to use your own brand of colors. Whichever scenario you fit into, color changes to the site in general are made solely in the stylesheet file which resides in the catalog folder. Download the file and open it in any text editor locally. Graphics, such as buttons and rounded table edges, will need to either be replaced or edited to fit in with your branding.

I won’t go through every selector and class in this file. A lot of them can be left as they are; the error message colors should be left the same for example, and to even be using an advanced application such as this in the first place I’d expect you to have a basic grasp of CSS. In order to change the look of the boxes that are set at the left and right edges of the page, look for the infoBox entries, of which there are four, and make any necessary changes. Other classes you will want to adjust, in order of appearance are; TR.headerNavigation, TD.headerNavigation, TR.footer, TD.footer, .productListingHeader, TD.productListing-data, TD.pageHeading, DIV.pageHeading, and TD.fieldValue. This should ensure that all objects on the page adhere to your colour scheme. Again, upload the new file to the catalog folder using your own FTP client and set the file permissions to 644.