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 the original 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 echo
tep_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"><?php
echo HEADER_TITLE_MY_ACCOUNT; ?></a> | <a
href="/<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>"
class="headerNavigation"><?php echo
HEADER_TITLE_CART_CONTENTS; ?></a> | <a
href="/<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '',
'SSL'); ?>" class="headerNavigation"><?php echo
HEADER_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 is a line of text and is pretty much where we want the Breadcrumb 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 be black. 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 find the following code and delete it:
<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 echo tep_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"><?php echo
HEADER_TITLE_MY_ACCOUNT; ?></a> | <a
href="/<?php echo tep_href_link
(FILENAME_SHOPPING_CART); ?>"
class="headerNavigation"><?php echo
HEADER_TITLE_CART_CONTENTS; ?></a> | <a
href="/<?php echo tep_href_link
(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"
class="headerNavigation"><?php echo
HEADER_TITLE_CHECKOUT; ?></a> </td>
</tr>
</table>
After doing this your template for new oscommerce store Header Area should look like this:
