osCommerce Templates | Magento Themes | Free osCommerce Themes - eCommerce Engine

Make an osCommerce Template by Yourself (8)

Monday, 14 September 2009 02:35

You can see that what I am trying to achieve is:

1. Remove the Grey & White Breadcrumb.
2. Add in a black text Breadcrumb
3. 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 to do is slice up the completed Header Graphic up appropriately (see the illustration below).

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: 455px
and height: 79px] to hold the Search InfoBoxes
logo_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 is intermediate HTML skill – if you are uncertain how to create a table, then you should take a look at www.htmlgoodies.com which has a number of great tutorials! The actual HTML code for the table we need to use on this design is:

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

searchboxarea

languageboxarea

breadcrumbarea

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

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

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: