Changing the Header Area to our own design
Let's take it one step further away from standard Oscommerce by adding in our own Header Graphic.
What you need to do is make (or find) yourself a Graphic to use. It needs to be 760 pixels wide (remember this is the width of our site that we set in includes/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 as filename: logo.jpg
Then 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 '<a
href="' . 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> <a
href="' . 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>
Let's make some subtle changes to the Header Graphic (just to make it look more pleasant):
1. Cut around a portion of the SunFlower and give it the same colour
background as the Left Column. (This will give the effect of the
Flower “bleeding” into the column).
2. Put on some Text (perhaps our Stores strap-line)
3. Put on a small Logo
4. Create an area for our “Breadcrumb” element (see below)
Once you have made these changes, you should save the new Image as logo.jpg into the /images/ directory. You are basically overwriting that awful blocky image that we started with.
Now the Header Area looks like this:
Which looks much better! Of course, when you make new designs, you might decide to do none of these things to the Header Graphic! It's up to you, and your choice should be based on what you think looks right for the products or services you are selling..
If you are not much good at graphics then I recommend polishmypixels.com who will be able to make you a great Logo or Graphic designed to your requirements!
Anyway, once you have a graphic in place, we need to put in some extra elements to overlay it...the extra elements we want to use within the Header are:
1. The Search InfoBox
2. The Languages Flags InfoBox
3. 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 decide whereabouts we want to place those 3 elements. I will create a simple graphic to show you where I want my elements...
