How to Customize OsCommerce

How to customize osCommerce

Notes about this book:

• I sometimes refer to the “main .php” files. This is all of the files thatyou find in the top level of your Shop, for example: index.php,product_info.php, reviews.php etc

• Code that you need to remove (or replace) is marked in a GoldenBrown colour.

• Code that you will be adding is marked in a Light Blue colour.

• There are two bonus files that you may download:

http://octave.netfirms.com/samples/pages.zipandhttp://octave.netfirms.com/samples/new_products.zip

These are to save you time and effort. However for best results you should getyour hands dirty with code if possible :)

My advice to anyone who wants further help is to join the Official osCommerceForum at http://forums.oscommerce.com – there are many osCommerce Guru'sready and waiting to help you. But make sure to do your research first – mostquestions have been asked and answered many times! There is also a new“Knowledgebase ” site at http://www.oscommerce.info which is chock full ofgood advice.

You should look at building an osCommerce site as climbing a mountain. ThiseBook is a ready made “base camp” for you – to climb higher you will need toresearch further at the Forum and Knowledgebase, as well as other sites such ashttp://www.w3schools.com and http://www.htmlgoodies.com

Introduction

This book will show you how to take a brand new install of Oscommerce andwithin a few short hours change it yourself to look something like this:

Looks pretty good, right? You are going to learn how to build that site!

I have to assume that you are OK to install Oscommerce, as that is a basic skillyou need – if you are struggling to install, then you probably won't be able tofollow this book either :(

You can see this site in action at:

http://www.oscommerce-templates.co.uk/testshop/

This book will teach you a number of skills, amongst them;

Basic Skills1. Remove right column from all pages2. Add and remove extra code to allow us to give style to the Store3. Fix Store width and align the whole Store to the center of the page

Intermediate Skills1. Amend the Header and Footer areas to suit your design.2. Amend the InfoBox files to allow us to set style on them.

Advanced Skills1. Move the “search” InfoBox to the Header Area2. Move the Languages flags to the Header Area.3. Make some use of .css in the stylesheet4. Add in a colourful border on the product_info.php page

By the end of the book, you will have learned enough skills and techniquesto build a great looking Store.

You will also have the knowledge and confidence to apply what you havelearned to enable yourself to integrate any design into an OscommerceStore!

So, you have installed a basic version of Oscommerce MS2. It should look likethis (please note I have removed most of the standard text – only to allowScreenshots to be quite small):

As you can see, it is plain, boring and lifeless. And yet we all see many, manystores using this exact look. Very strange when it is so easy to spend a littletime to really make your Store something special.

The original idea for this site came from a Magazine Advert. You can see theoriginal Magazine page here:

As you can see it has the elements needed to make a good Oscommerce site:

1. Header Area2. Left Column3. Footer Area

However it does not have a Right Column. But this is not a problem, don'tworry about that, as we will be making changes to the basic osCommerce codeto allow for this.

What we need to do is visualise this design in a layout format.

VisualisationI've marked the areas that we will beintegrating into our Oscommerce site. Sonow we know what we are going to dowith the site...

Our aim is;

1. Make broad changes to the codeof Oscommerce to allow us tomake the layout approximatelylike the Magazine Advert

2. We will then move on andchange the colour scheme andheader image

3. We will then look a little closer at the extras needed in order to makethe design stand out a little more

4. We will add some extras to make the site our own

Let's move forward. Let's just take one final look at our standard Oscommercesite:

Code ChangesThe first thing we need to do is remove that Right Hand Side Column totally.There is only one way to do this and this is to open up each of the main .phpfiles in turn (eg index.php, product_info.php etc) and remove the followingportion of code:

<td width="<?php echo BOX_WIDTH; ?>"valign="top"><table border="0" width="<?php echoBOX_WIDTH; ?>" cellspacing="0" cellpadding="0"><?php require(DIR_WS_INCLUDES .'column_right.php'); ?> </table></td>

Save your work, and upload each file you just removed the column code fromto overwrite the old files! Your site should now look like this:

Unfortunately, this is not the end of our work to these files :( We also need tostrip out and change some standard Oscommerce code. So once again, open upeach main .php file in turn and:

Amend from this (approx line 27):<body marginwidth="0" marginheight="0" topmargin="0"bottommargin="0" leftmargin="0" rightmargin="0">to this:<body>Why: We will be able to replicate all of this using our file stylesheet.css

Amend from this (approx line 33):<table border="0" width="100%" cellspacing="3"cellpadding="3">to this:<table border="0" width="100%" cellspacing="0"cellpadding="0">Why: We do not need spacing or padding as we will be doing this in thestylesheet.css

Amend from this (approx line 35):<td width="<?php echo BOX_WIDTH; ?>" valign="top">to this:<td class="left-column" width="<?php echoBOX_WIDTH; ?>" valign="top">Why: We have only added a stylesheet class “left-column” - to allow us togive the column some style.

Amend from this (approx line 35):<table border="0" width="<?php echo BOX_WIDTH; ?>"cellspacing="0" cellpadding="2">to this:<table border="0" width="<?php echo BOX_WIDTH; ?>"cellspacing="0" cellpadding="0">Why: We do not need padding as we will be doing this in the stylesheet.css

Amend from this:<td width="100%" valign="top">to this:<td width="100%" valign="top" class="main-content">Why: We have only added a stylesheet class “main-content” - to allow us togive the main content area some style. Note that the file index.php requires youto do this in three places!

And finally, remove this (found immediately before the ending </body> tag):<br>Why: We will be able to replicate this (if required) using the file stylesheet.css

You must do this for each and every main .php file. Save and upload them.Don't worry too much about the reasons why we made those changes – I'll begoing into more detail about that later on in this book.

Helping You: If you don't have the time to make these changes, please download the filehttp://octave.netfirms.com/samples/pages.zip where the changes have been made for you as required. Overwrite the existing filesyou have in your Store with the files in the .zip – it would obviously be better for you to do the changes yourself as you will

become more familiar with Oscommerce code by doing it yourself.

Now you have a very poorly looking Store, but we will remedy this, don't worryabout it. As of right now, your Store should look like this:

Reducing the Width of each page to fit our designThinking of a Magazine page, it's about A4 paper size, so let's add in somecode to fix the Store Width and to allow us to center the shop into the middle ofthe page.

Open up: /includes/header.php and add the following code right at the very startof the file:<table width="760" cellspacing="0" cellpadding="0"align="center"> <tr> <td class="outline">

Open up: /includes/footer.php and add the following code right at the very endof the file: </td> </tr></table>

What we have said using this code is: 1. Put the whole contents of the Store into a table fixed at 760 pixels

wide (this is approximately the width of an A4 page)2. Align it to the center of the page.

Save those two files and upload them into the correct directory. Your siteshould now look like this:

Making the Left Hand Column WiderWhat we now need to do is make our Left Hand Side Column a little wider, asyou can see the Magazine Advert Left Column is approximately ¼ the width ofthe full page. Remember that we have set our page to 760 pixels wide, so ¼ ofthat is 190. You should open up:

/includes/application_top.php

Amend the following code (approx line 63): define('BOX_WIDTH', 150); // how wide the boxesshould be in pixels (default: 125)

to this: define('BOX_WIDTH', 190); // how wide the boxesshould be in pixels (default: 125)

Save the file and upload it to your Store. Whilst we are looking at the LeftHand Side Column, let's also give it some style using our Stylesheet. If youlook back through this eBook, you'll see that we amended the Left Hand SideColumn code to add in an extra stylesheet call: left-column

Open up stylesheet.css in your favourite text editor, and add the following code:

.left-column { background: #cccccc; padding: 10px;}

Note that whenever you create a style in your HTML code (eg class=”left-column”) then you must use the exact same name in your stylesheet, but put aperiod (dot, full stop etc) in front of it, like this: .left-column

Save the file [ stylesheet.css ] and upload.

Refresh your Store a few times for those stylesheet changes to kick in. Yoursite should now look like this:

As you can see the changes we made to the stylesheet have given our Left HandColumn a background colour! Easy, isn't it :)

However, because of the way that Oscommerce is coded, the InfoBoxes(example categories.php, manufacturers.php etc) all over-ride the Left HandColumn background that we just made so they still look quite awful :( But it'snot a major problem and is something we will amend very shortly.

We are doing pretty well so far! Let's have a Pit Stop. Time for a coffee and arecap of what we have done so far.

We've made a lot of code changes • Removed the Right Hand Side Column• Removed some unwanted Code• Added in some extra Code to allow us to set style• Made the Shop a fixed width and horizontally centered it• Changed a setting in the stylesheet.css to give the Left Column

some style.

We actually haven't done all that much to be honest – but you can already seethat it is starting to look not so like Oscommerce! Good work so far! What'snext?

Recoding the InfoBoxesLet's start changing some code to allow us to give the side InfoBoxes somestyle! The problem here is that we need to make our “side” InfoBoxesdifferently to our other InfoBoxes (eg “New Products for...” box).

This is pretty easy :), all you need to do is open up: /includes/classes/boxes.php

And add the following code at the very end of the file before the ?> tag:

class SideinfoBoxHeading extends tableBox { function SideinfoBoxHeading($contents,$left_corner = true, $right_corner = true,$right_arrow = false) { $this->table_cellpadding = '0';

$left_corner = tep_image(DIR_WS_IMAGES .'infobox/corner_left.gif'); if ($right_arrow == true) { $right_arrow = '<a class="infoboxheadinglink"href="' . $right_arrow . '">' . $contents[0]['text'] . ' »</a>'; } else { $right_arrow = $contents[0]['text']; } $right_corner = tep_image(DIR_WS_IMAGES .'infobox/corner_right.gif');

$info_box_contents = array(); $info_box_contents[] = array('params' =>'width="100%" class="SideinfoBoxHeading"', 'text' =>$right_arrow);

$this->tableBox($info_box_contents, true); } }

Save the file.

Now add the following code to the exact same file, again making sure you addit directly before the final ?> tag:

class SideinfoBox extends tableBox { function SideinfoBox($contents) { $info_box_contents = array(); $info_box_contents[] = array('text' => $this->SideinfoBoxContents($contents)); $this->table_cellpadding = '0'; $this->table_parameters ='class="SideinfoBox"'; $this->tableBox($info_box_contents, true); }

function SideinfoBoxContents($contents) { $this->table_cellpadding = '0'; $this->table_parameters ='class="SideinfoBoxContents"'; $info_box_contents = array(); $info_box_contents[] = array(array('text' =>tep_draw_separator('pixel_trans.gif', '100%', '1'))); for ($i=0, $n=sizeof($contents); $i<$n; $i++) { $info_box_contents[] = array(array('align' =>(isset($contents[$i]['align']) ? $contents[$i]['align'] : ''), 'form' =>(isset($contents[$i]['form']) ? $contents[$i]['form']: ''), 'params'=> 'class="boxText"', 'text' =>(isset($contents[$i]['text']) ? $contents[$i]['text']: ''))); } $info_box_contents[] = array(array('text' =>tep_draw_separator('pixel_trans.gif', '100%', '1'))); return $this->tableBox($info_box_contents); } }

What we have done here is create an extra portion of code to allow us todifferentiate between a “side” infoBox and a “normal” infoBox.

Now you must open up each of the infoBox files found in /includes/boxes/ andchange the following code:

new infoBoxHeadingto:new SideinfoBoxHeading

And:

new infoBoxto:new SideinfoBox

We do this in order to tell our InfoBoxes to create themselves using the newcode we just added to /includes/classes/boxes.php Once you have done that, your site should look like this:

However, something has gone wrong as the Headings of our side InfoBoxeshave lost their style !! In fact not only the Heading of each InfoBox has lost it'sstyle, but also the Contents of each InfoBox as well !!!

Don't worry, it's nothing major, this is exactly what wewanted to happen as we will now look to amend boththe Heading and Content Area of the InfoBoxes usingthe file stylesheet.css.

Giving the InfoBoxes some Style Now we open up stylesheet.css and amend the stylewhich control how the side InfoBoxes look. Simplyadd the following piece of code:

.SideinfoBox { background: #cccccc;}Why: This is to match the colour of the Left Hand Column Background.

Now find:.boxText { font-family: Verdana, Arial, sans-serif;font-size: 10px; }

Change it to:.boxText { font-family: Verdana, Arial, sans-serif; }Why: We will be controlling the font size elsewhere in the stylesheet :)

Now add the following code (to stylesheet.css):TD.SideinfoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; background: #cccccc; color: #000000; font-variant: small-caps;}

Also add the following code (to stylesheet.css):.SideinfoBoxContents { background: transparent; font-family: Verdana, Arial, sans-serif; font-size: 0.8em; line-height: 1.5;}

After making these changes, your site should now look like this:

As you can see, making the changes in the stylesheet has made our left handcolumn fall into place :)

The only thing in there that looks not so good is the small “magnifying glass”image that powers the Search InfoBox. Don't worry about this for now, as wewill be removing the Search InfoBox into the Header Area a little later on inthis tutorial.

At least now we have made our Left Hand Side Column look really great! Weare slowly but surely getting there :)

Giving the Main Contents Area some styleLet's now look at the Main Content Area. We need to give it a bit of room tobreath and also a background colour.

Open up stylesheet.css once again, and add the following code:

.main-content { background: #fafafa; padding: 10px;}

This gives our Main Content Area (remember we set it up to use the stylesheetclass “main-content” when we made the changes to all of our main .php files)some padding (room for it to breath) and a nice light grey background colour.Easy, isn't it ? :) And now your Site should look exactly like this:

RecapLet's take another Pit Stop. We're doing well so far, though the Header Areastill looks very much like Standard Oscommerce :(

Let's change that next, but first it's time for recap and a coffee.

What have we done so far;

We've made a lot of code changes:• Removed the Right Hand Side Column• Removed some unwanted Code• Added in some extra Code to allow us to set style• Made the Shop a fixed width and horizontally centered it• Changed a setting in the stylesheet.css to give the Left Column

some style.Since our last Pit Stop, we've also done the following:

• Added some new code to allow us to change "side" InfoBoxeswithout changing any other InfoBoxes

• Made subtle changes to each "side" InfoBox file to allow theuse of our new code

• Added extra Stylesheet classes to give those new InfoBoxessome style

• Given the Main Content Area some space!

It's starting to look pretty good!

Changing the Header Area to our own designLet's take it one step further away from standard Oscommerce by adding in ourown Header Graphic.

What you need to do is make (or find) yourself a Graphic to use. It needs to be760 pixels wide (remember this is the width of our site that we set inincludes/application_top.php). I got a Graphic from www.istockphoto.com -you can see a small version of it here:

We could simply use it as it is now: Save the image into the /images/ folder asfilename: logo.jpgThen open up the file: includes/header.php and find this code:<table border="0" width="100%" cellspacing="0"cellpadding="0"> <tr class="header"> <td valign="middle"><?php echo '<a href="' .tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') .'</a>'; ?></td> <td align="right" valign="bottom"><?php echo '<ahref="' . tep_href_link(FILENAME_ACCOUNT, '','SSL') . '">' . tep_image(DIR_WS_IMAGES .'header_account.gif', HEADER_TITLE_MY_ACCOUNT) .'</a> <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif',HEADER_TITLE_CART_CONTENTS) . '</a> <ahref="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING,'', 'SSL') . '">' . tep_image(DIR_WS_IMAGES .'header_checkout.gif', HEADER_TITLE_CHECKOUT) .'</a>'; ?> </td> </tr></table>

Change it to this:<table border="0" width="100%" cellspacing="0"cellpadding="0"> <tr> <td><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES .'logo.jpg', STORE_NAME) . '</a>'; ?></td> </tr></table>

Which would make our Store look like this:

But, in my opinion that makes the Header Area look too “blocky”. Also, notethat the Breadcrumb still looks very “Oscommerce” - don't get concerned aboutthis as we will be amending this very shortly! :)

Let's make some subtle changes to the Header Graphic (just to make it lookmore pleasant):

1. Cut around a portion of the SunFlower and give it the same colourbackground as the Left Column. (This will give the effect of theFlower “bleeding” into the column).

2. Put on some Text (perhaps our Stores strap-line)3. Put on a small Logo4. Create an area for our “Breadcrumb” element (see below)

Once you have made these changes, you should save the new Image as logo.jpginto the /images/ directory. You are basically overwriting that awful blockyimage that we started with.

Now the Header Area looks like this:

Which looks much better! Of course, when you make new designs, you mightdecide to do none of these things to the Header Graphic! It's up to you, andyour choice should be based on what you think looks right for the products orservices you are selling..

If you are not much good at graphics then I recommend polishmypixels.comwho will be able to make you a great Logo or Graphic designed to yourrequirements!

Anyway, once you have a graphic in place, we need to put in some extraelements to overlay it...the extra elements we want to use within the Header are:

1. The Search InfoBox2. The Languages Flags InfoBox3. The Store “Breadcrumb” (top >> catalog etc etc)

Because of the way that Oscommerce is coded it isn't possible to just overlay

these directly on top of the Image we created. So what we must do is decidewhereabouts we want to place those 3 elements. I will create a simple graphicto show you where I want my elements...

Remember this is simply a graphic made by me to show you the approximatepositions where I want my elements. You can see that what I am trying toachieve is;

1. Remove the Grey & White Breadcrumb.2. Add in a black text Breadcrumb3. Add in the languages flags (near the small logo)4. Add in a Search InfoBox in the top right hand corner of our page

We now need to to do for real! It's pretty straightforward, basically all I need todo is slice up the completed Header Graphic up appropriately (see theillustration below).

To do something like this, does take some graphics and HTML skill, but I willtry to explain exactly what I have done.

Graphics Changes:I have sliced the graphic into 5 parts:

logo_1.jpg (the main sunflower area)logo_2.jpg (a portion of sky that is large enough [width: 455pxand height: 79px] to hold the Search InfoBoxeslogo_3.jpg (another portion of sky that is large enough [width:455px and height: 78px] to hold the languages flags.logo_4.jpg (the strapline and logo image)logo_5.jpg (an area of the image which will hold the breadcrumb)

I saved all of these new graphic slices into the /images/ directory, ready for use!

Then you have to build a HTML table to contain your graphic slices...this isintermediate HTML skill – if you are uncertain how to create a table, then youshould take a look at www.htmlgoodies.com which has a number of greattutorials! The actual HTML code for the table we need to use on this design is:

<table border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2"><img src="images/logo_1.jpg"width="305" height="157" alt=""></td> <td class="searchboxarea"> </td> </tr> <tr> <td class="languageboxarea"></td> </tr> <tr> <td colspan="2"><img src="images/logo_4.jpg"width="760" height="46" alt=""></td> </tr> <tr> <td colspan="2" class="breadcrumbarea"></td> </tr></table>

You will see that the table does not include all of the slices we made as simplegraphic tags “<img src=” etc. This is because we need to use some .css trickeryto set the background on the three areas (languages, search, breadcrumb) whichare marked “slice” on the image above. Instead I have given these three areas astylesheet class each:

searchboxarealanguageboxarea

breadcrumbarea

I will now open up stylesheet.css and set up corresponding entries to show theimages (over which we can then add the languages flags, searchbox etc), asseen below:

.searchboxarea { background-image: url(images/logo_2.jpg); width: 455px; height: 79px;}.languageboxarea { background-image: url(images/logo_3.jpg); width: 455px; height: 78px;}.breadcrumbarea { background-image: url(images/logo_5.jpg); width: 760px; height: 28px;}

Once you have done this, you should save stylesheet.css and open up /includes/header.php

Find this code:<table border="0" width="100%" cellspacing="0"cellpadding="0"> <tr> <td><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES .'logo.jpg', STORE_NAME) . '</a>'; ?></td> </tr></table>

and replace it with this:<table width="100%" border="0" cellspacing="0"cellpadding="0"> <tr> <td rowspan="2"><img src="images/logo_1.jpg"width="305" height="157" alt=""></td> <td class="searchboxarea"> </td> </tr>

<tr> <td class="languageboxarea"></td> </tr> <tr> <td colspan="2"><img src="images/logo_4.jpg"width="760" height="46" alt=""></td> </tr> <tr> <td colspan="2" class="breadcrumbarea"></td> </tr></table>Save and upload the file. Now your site should look like this:

As you can see, it looks no different to the example graphic I made above, but itdoes have 1 very large difference. I am easily able to write text on top of the 3areas of image that we set in the stylesheet.css !!

For an example of this, open up /includes/header.php and find the followingline of code:<td colspan="2" class="breadcrumbarea"></td>

Change it to:<td colspan="2" class="breadcrumbarea">Hello, this isa line of text and is pretty much where we want theBreadcrumb to be located!</td>

Save that, and look at your Store again, now it should look like:

You can see the text we added has overlayed the image! Don't worry that itlooks unformatted, as we'll be changing that shortly...I hope that you can seewhere we are going with this :)

Moving the BreadCrumb into our Design So, let's place that awful grey/white breadcrumb into our breadcrumb area.This is simple. If you open up /includes/header.php you will see that theoriginal Oscommerce breadcrumb area is coded like this:

<table border="0" width="100%" cellspacing="0" cellpadding="1"> <tr class="headerNavigation"> <td class="headerNavigation"> <?php echo $breadcrumb->trail(' » '); ?></td> <td align="right" class="headerNavigation"><?php if(tep_session_is_registered('customer_id')) { ?><a href="<?php echotep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a> | <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?phpecho HEADER_TITLE_MY_ACCOUNT; ?></a> | <ahref="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>"class="headerNavigation"><?php echoHEADER_TITLE_CART_CONTENTS; ?></a> | <ahref="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '','SSL'); ?>" class="headerNavigation"><?php echoHEADER_TITLE_CHECKOUT; ?></a> </td> </tr></table>

The actual only part we need is:

<?php echo $breadcrumb->trail(' » '); ?>

as this creates the breadcrumb trail automatically!

So, find the following line of code:<td colspan="2" class="breadcrumbarea">Hello, this isa line of text and is pretty much where we want theBreadcrumb to be located!</td>

And change it to:<td colspan="2" class="breadcrumbarea"><?php echo$breadcrumb->trail(' » '); ?></td>

Of course, the links in the Breadcrumb Area are white – we'd like them to beblack. So open up stylesheet.css and find:A.headerNavigation { color: #FFFFFF; }

Change this to:A.headerNavigation { color: #000000; }

Also find:A.headerNavigation:hover { color: #ffffff;}

and change to:A.headerNavigation:hover { color: #000000;}

Now we have black text Breadcrumb, that also has an underline when you“mouseover” it. However, it is still unstyled text, so what we need to do(remembering that this is inside the style “breadcrumbarea”, is find:.breadcrumbarea { background-image: url(images/logo_5.jpg); width: 760px; height: 28px;}

and change it to:.breadcrumbarea { background-image: url(images/logo_5.jpg); width: 760px; height: 28px; padding-left: 220px; font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold;}

Now you can remove the old Oscommerce Breadcrumb Area entirely, so findthe following code and delete it:

<table border="0" width="100%" cellspacing="0"cellpadding="1"> <tr class="headerNavigation"> <td class="headerNavigation"> <?phpecho $breadcrumb->trail(' » '); ?></td> <td align="right" class="headerNavigation"><?phpif (tep_session_is_registered('customer_id')) { ?><ahref="<?php echo tep_href_link(FILENAME_LOGOFF, '','SSL'); ?>" class="headerNavigation"><?php echoHEADER_TITLE_LOGOFF; ?></a> | <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT,'', 'SSL'); ?>" class="headerNavigation"><?php echoHEADER_TITLE_MY_ACCOUNT; ?></a> | <ahref="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>"class="headerNavigation"><?php echoHEADER_TITLE_CART_CONTENTS; ?></a> | <ahref="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"class="headerNavigation"><?php echoHEADER_TITLE_CHECKOUT; ?></a> </td> </tr></table>

After doing this your site Header Area should look like this:

As you can see, this gives our Breadcrumb text a better style, and has alsoshifted it towards the right by 220 pixels (which if you remember wasapproximately where we wanted the Breadcrumb to begin on our examplegraphic).

And that is it – we've completed the Breadcrumb into our design!

RecapSince our last recap, we've:

• Created a great looking Header Area Graphic • Sliced it up to allow us to add in the extra elements we need • Added in the Breadcrumb to our design!• Given that Breadcrumb some style and positioned it• Removed the standard Oscommerce Breadcrumb entirely

We are doing very well so far.

What's next? We still need to place the Languages Flags and the Search Box(and maybe also use some .css trickery to make them look good)...once we havedone these two extra things, we will have completely finished the Header Area!

Moving the Languages Box to the HeaderWhat we want to do is re-create the Languages InfoBox into the Header Area –this is quite easily done if you take it step by step.

Step 1: Create a new file named header_languages.php which shouldcontain only the following lines of code:<?php?>Save this into the folder /includes/boxes/

Step 2: Open up /includes/boxes/languages.php and copy the followinglines of code:

if (!isset($lng) || (isset($lng) && !is_object($lng))) { include(DIR_WS_CLASSES . 'language.php'); $lng = new language;} $languages_string = '';reset($lng->catalog_languages);while (list($key, $value) = each($lng->catalog_languages)) { $languages_string .= ' <a href="' .tep_href_link(basename ($PHP_SELF),tep_get_all_get_params(array('language','currency')) . 'language=' . $key,$request_type) . '">' . tep_image(DIR_WS_LANGUAGES . $value['directory'] .'/images/' . $value['image'], $value['name']) .'</a> ';}

$info_box_contents = array();$info_box_contents[] = array('align' =>'center','text' => $languages_string);

Step 3: Open up the file you made in Step 1, and paste the code youcopied in step 2, immediately before the ?> Save it (remember you are saving it as header_languages.php)

Step 4: Once you have that new file saved, open it up and find thefollowing line of code:

$info_box_contents[] = array('align' =>'center','text' => $languages_string);

Change it to: echo $languages_string;Save it.

Step 5: Open up /includes/header.php and find the following code:<td class="languageboxarea"></td>

Change it to:<td align="right" class="languageboxarea"><?phprequire(DIR_WS_BOXES .'header_languages.php'); ?></td>Save it!

Step 6: Now we need to set the style and position of the Flags, byopening up stylesheet.css and finding:.languageboxarea { background-image: url(images/logo_3.jpg); width: 455px; height: 78px;}

Change it to:.languageboxarea { background-image: url(images/logo_3.jpg); width: 455px; height: 78px; vertical-align: bottom; padding-right: 5px;}

Save it as stylesheet.css - and now we have our Languages Flags integrated aspart of our design – your Header Area should now look exactly like this:

Great Stuff. We now need to do this all over again for the Search Box...

Moving the Search Box into the Header Step 1: Create a new file named header_search.php containing thefollowing code:<?php?>Save this into the folder /includes/boxes/

Step 2: Open up /includes/boxes/search.php and copy the following linesof code: $info_box_contents = array(); $info_box_contents[] = array('text' =>BOX_HEADING_SEARCH);

new SideinfoBoxHeading($info_box_contents,false, false);

$info_box_contents = array(); $info_box_contents[] = array('form' =>tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL',false), 'get'),'align' => 'center','text' =>tep_draw_input_field('keywords', '', 'size="10"maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif',BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT .'<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' .BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

Step 3: Paste the code you copied in step 2 into the file you created instep 1, directly before the ?>

Step 4: Code changes to the new file (header_search.php)Find: $info_box_contents = array(); $info_box_contents[] = array('text' =>BOX_HEADING_SEARCH);

Replace with:echo '<strong>' . BOX_HEADING_SEARCH .'</strong><br>';

Find:new SideinfoBoxHeading($info_box_contents,false, false);Remove it!

Find:$info_box_contents = array();Remove it!

Find:$info_box_contents[] = array('form' =>tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL',false), 'get'),'align' => 'center','text' =>tep_draw_input_field('keywords', '', 'size="10"maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif',BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT .'<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' .BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

Change it to: echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL',false), 'get'); echo tep_draw_input_field('keywords', '','size="10" maxlength="30" style="width: ' .(BOX_WIDTH-30) . 'px"') . ' ' .tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH); echo '</form>';

Find:new SideinfoBox($info_box_contents);Remove it!

Step 5: Open up includes/header.php and find this line of code:<td class="searchboxarea"> </td>

Change it to:<td class="searchboxarea" align="right"><?phprequire(DIR_WS_BOXES . 'header_search.php'); ?></td>

Step 6: Open up stylesheet.css and find the following code:.searchboxarea { background-image: url(images/logo_2.jpg); width: 455px; height: 79px; }

Change it to:.searchboxarea { background-image: url(images/logo_2.jpg); width: 455px; height: 79px; vertical-align: top; padding-right: 5px; font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold;}

Overview:What we have done is recode the Search Box to suit our design andplaced it into the Header Area. Now we don't need the Search Box inthe Left Hand Side Column, so open up /includes/column_left.php andremove the following code:require(DIR_WS_BOXES . 'search.php');

You'll also notice that we still have that awful Magnifying Glass Icon.Let's replace that for starters! Create yourself a nice Search icon, nameit button_quick_find.gif and upload it to:includes/languages/english/images/buttons/

I like this one: So that's what I'll use. You'll need to also save this asthe same name into each of your other languages (German, Spanish etc)if you use multiple languages.

The Header Area is now fully completed, and your site should now looksomewhat like this:

Our Header Area now has all the elements we wanted to show. We're going tomove onto the Footer now.

Changes to the Footer Area The first thing we want to do is remove the Oscommerce Banner. This is quitesimply a setting in your Admin Area. Go to: admin > tools > banner managerand click the small pink circle to turn the Banner off.

What do we want to do with the Footer;

1. Obviously we want to make the Footer area look part of the design.2. We want to remove the useless counter3. We want to remove the date – I am positive that most people know

what date it is!4. We want to move the “Copyright and Powered” text into the Footer

Area.

All pretty straightforward. Open up /includes/footer.php and find the followingcode:<table border="0" width="100%" cellspacing="0"cellpadding="1"> <tr class="footer"> <td class="footer"> <?php echostrftime(DATE_FORMAT_LONG); ?> </td> <td align="right"class="footer"> <?php echo $counter_now .' ' . FOOTER_TEXT_REQUESTS_SINCE . ' ' .$counter_startdate_formatted; ?> </td> </tr></table>

Change this to:<table border="0" width="100%" cellspacing="0"cellpadding="0"> <tr> <td class="footerarea"></td> </tr></table>

Save and upload the footer.php file. In your favoured graphics program, openup the file logo_5.jpg and colour out the SunFlower areas to #cccccc; Onceyou have done this it should look like:

Save this newly created graphics file as “footerbg.jpg” and upload to the /

images/ folder.

Open up /includes/languages/english.php and find the following code:define('FOOTER_TEXT_BODY', 'Copyright © 2003 <ahref="http://www.oscommerce.com"target="_blank">osCommerce</a><br>Powered by <ahref="http://www.oscommerce.com"target="_blank">osCommerce</a>');

Change this to:define('FOOTER_TEXT_BODY', 'Copyright © 2004 ' .STORE_NAME);

Repeat for each Language you use. Now open up stylesheet.css and add thefollowing code:.footerarea { background-image: url(images/footerbg.jpg); width: 760px; height: 28px; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: normal; color: #575757; padding: 5px;}

Save this. Now open up /includes/footer.php once again and find the followingportion of code:<td class="footerarea"></td>

Change this to:<td class="footerarea"><?php/* The following copyright announcement can only be appropriately modified or removed if the layout of the site theme has been modified to distinguish itself from the default osCommerce-copyrighted theme.

For more information please read the following Frequently Asked Questions entry on the osCommerce support site:

http://www.oscommerce.com/community.php/faq,26/q,50

Please leave this comment intact together with the following copyright announcement.*/

echo FOOTER_TEXT_BODY?></td>

And find the following portion of code:<br><table border="0" width="100%" cellspacing="0"cellpadding="0"> <tr> <td align="center" class="smallText"><?php/* The following copyright announcement can only be appropriately modified or removed if the layout of the site theme has been modified to distinguish itself from the default osCommerce-copyrighted theme.

For more information please read the following Frequently Asked Questions entry on the osCommerce support site:

http://www.oscommerce.com/community.php/faq,26/q,50

Please leave this comment intact together with the following copyright announcement.*/

echo FOOTER_TEXT_BODY?> </td> </tr></table>Remove it!

Now your Store is looking really good.

Wrapping UpI'm thinking that it might be nice to enclose the store inside a “box”. You'llnotice that in the file /includes/header.php we have an unused stylesheet classnamed “outline” - we're going to use this to create a left and right border thatextends down the full height of our shop. We are going to match the border tothe “rust brown” colour of our logo!

So open up stylesheet.css and add:.outline { border-top-width: 0px; border-bottom-width: 0px; border-right-width: 1px; border-left-width: 1px; border-style: solid; border-color: #663300;}

This should be fairly self-explanatory!

Also, the Page Headings are still standard Oscommerce. We can change that byopening up stylesheet.css and finding the following code:TD.pageHeading, DIV.pageHeading { font-family: Verdana, Arial, sans-serif; font-size: 20px; font-weight: bold; color: #9a9a9a;}

Change it to:TD.pageHeading, DIV.pageHeading { font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #663300; font-variant: small-caps;}

I've also noticed that most of our links change to an awful grey colour whenyou place your mouseover them. Test this out on one of the InformationInfoBox links. We can easily change this by finding:

A:hover { color: #AABBDD;

text-decoration: underline;}

and changing it to:A:hover { color: #000000; text-decoration: underline;}

In this particular design, I don't really need the Manfacturers InfoBox, but I doneed the Shopping Cart & Order History InfoBoxes. So open up /includes/column_left.php and remove this code: if ((USE_CACHE == 'true') && empty($SID)) { echo tep_cache_manufacturers_box(); } else { include(DIR_WS_BOXES . 'manufacturers.php'); }

And add this code in it's place: require(DIR_WS_BOXES . 'shopping_cart.php'); if (tep_session_is_registered('customer_id'))include(DIR_WS_BOXES . 'order_history.php');

Your site should now look like this:

We now need to do something with that “New Products for...” Box. There area number of great contributions to allow you to put something in there that ismuch better that the standard Oscommerce Box. I like my own piece of code,which you can get from http://www.oscbooks.com/samples/new_products.zip

You must follow the instructions as set out in that .zip file for it to work asintended!!! It's very important for you to take your time doing that. Adding inthat code has made the page very long, so we need to go back into our Adminsection and action the following: admin > configuration > maximum values >new products module > edit > { set to 3 } > update

Next open up stylesheet.css and find the following:.infoBox { background: #b6b7cb;}

Change it to:.infoBox { background: #cccccc;

}

Find:.infoBoxContents { background: #f8f8f9; font-family: Verdana, Arial, sans-serif; font-size: 10px;}

Change to:.infoBoxContents { background: #fafafa; font-family: Verdana, Arial, sans-serif; font-size: 12px;}

Find:TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; background: #bbc3d3; color: #ffffff;}

Change it to:TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; background: transparent; color: #000000;}

What we have done here is make the Boxes in the pages the same backgroundcolour as the background of the page (#fafafa), and the border of those boxesthe same colour as the Left Hand Side Column (#cccccc).

There are only a few more changes to make. In stylesheet.css, find this:TABLE.productListing { border: 1px; border-style: solid; border-color: #b6b7cb;

border-spacing: 1px;}

.productListing-heading { font-family: Verdana, Arial, sans-serif; font-size: 10px; background: #b6b7cb; color: #FFFFFF; font-weight: bold;}

And change it to:TABLE.productListing { border: 0px; border-style: solid; border-color: #cccccc; border-spacing: 1px;}

.productListing-heading { font-family: Verdana, Arial, sans-serif; font-size: 12px; background: #fafafa; color: #000000; font-weight: bold;}

This gives style to the Shopping Cart Listings (and other listings).

Now our Shop looks like this:

You'll notice we still have those awful blue buttons, so we must find a newbutton set. The nicest looking buttons I have come across are available at:http://www.oscommerce.com/community/contributions,1684 (courtesy of JoelMcLaughlin).

Download and follow the instructions of how to install them – it's basically justa case of overwriting the old Buttons! Easy – but remember not to overwritethe file: button_quick_find.gif as that is one we made earlier on in this eBook.

Of course you can use any button set that you like! Whatever goes best withyour design.

1 more thing I don't like is those awful “clipart” graphics on each page. Theseare simple to remove – all you need do is delete them from your webspacetotally.

So just delete all the files inside the folder /images/ that begin “table_”.

Then go into admin > configuration > images > and action the following:

Small Image Height 0Heading Image Height 0Subcategory Image Height 0Calculate Image Size trueImage Required false

If you've basically done everything in this eBook, then your Store should nowlook somewhat like this:

We just need to do one more thing, and that is compare our finished Site to theMagazine Advert. If they are almost identical, then there is no way we couldever use this site (as we might be accused of copying). You can plainly see that

there is really very little similarity between the two – so in my opinion, what wehave made here would be fine to use for a live Oscommerce site!

You've learned a lot of skills. I hope that I have given you the confidence totake any design and integrate it to Oscommerce. When making a new design,you should always;

1. Make broad brushstrokes first. Get your layout in place.2. And then make detailed changes as required.

Of course, you can now move forward and utilise the skills that this book hasgiven to you.

As a very quick example, I decided that the Product Pages look a little toomuch like Oscommerce, particularly in the content area. So what I did was adda border around the Product Image, like this:

How did I do this? I found a nice “Sun Flower” border image over atwww.istockphoto.com. Then I reduced it in size to allow it to easily containthe small Product Image, and saved it as borderbg.gif into the /images/ folder.

I then opened up product_info.php and found this code:<td align="center" class="smallText"><script language="javascript"></script><noscript><?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) .'" target="_blank">' . tep_image(DIR_WS_IMAGES .$product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH,SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>'. TEXT_CLICK_TO_ENLARGE . '</a>'; ?></noscript> </td>

And changed it to this:<td align="center" class="smallText"><divclass="border-background"><script language="javascript"></script><noscript><?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) .'" target="_blank">' . tep_image(DIR_WS_IMAGES .$product_info['products_image'], $product_info

['products_name'], SMALL_IMAGE_WIDTH,SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>'. TEXT_CLICK_TO_ENLARGE . '</a>'; ?></noscript> </div></td>

I have marked the changes in bold, to allow you to see more easily the extrapiece of code! Now open up stylesheet.css and add this code:

.border-background { background-image: url(images/borderbg.gif); width: 149px; height: 149px; padding-top: 22px;}

Save it and refresh a product page, and you now have a border around yourimage. How easy is that? Go on, give it a try.

GOOD LUCK with your Oscommerce Sites in thefuture!

Appendix of Sites

Recommended CSS Tutorial:http://www.w3schools.com/css/default.asp

Recommended HTML Tutorials:http://www.w3schools.com/html/default.asphttp://www.htmlgoodies.com

Useful osCommerce Sites:http://www.oscommerce.comhttp://www.oscommerce.infohttp://forums.oscommerce.com

Recommended Commercial osCommerce Sites:http://www.oscommerce-templates.co.uk

Recommended Graphics Sites:http://www.polishmypixels.comhttp://www.istockphoto.com

How to Customize OsCommerce

Documents

Transcript of How to Customize OsCommerce