osCommerce Main Categories Header Customization Example
The osCommerce Main Categories Header is very simple. There is not so much room for customization.
Look review the codes structure of the osCommerce Main Categories Header again. This is simply a table with 1 row and 3 columns.
- the left column is the infobox/corner_left.gif image ,
- the middle column is the $info_box_contents[0]["text"], and
- the right column is the infobox/pixel_trans.gif image.
The following picture shows the web layout of the osCommerce Main Categories Header:
This was the codes that we wrote in previous osCommerce tutorial to display the osCommerce Main Categories Header:
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
//codes display the Main Categories Header
echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\">" . "\n";
echo "<tr>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\">" .
tep_image (DIR_WS_IMAGES . 'infobox/corner_left.gif') . "</td>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\" width=\"100%\">" .
$info_box_contents[0]["text"] . "</td>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\">" .
tep_image(DIR_WS_IMAGES . 'infobox/pixel_trans.gif') . "</td>" . "\n";
echo "</tr>" . "\n";
echo "</table>" . "\n";
// The following line is not required since we write our own codes to display the Categories Header
// new infoBoxHeading($info_box_contents, true, false);
The Main Categories Header display same as the original osCommerce shop.
Okay! Let's try to customize the osCommerce Main Categories Header.
Remove Left Round Corner of Main Categories Header
It can be done by changing the corner_left.gif on the left column to corner_right_left.gif. The corner_right_left.gif is actually a small square grey image. We also remove the right column which is not necessary.
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
//codes display the Main Categories Header
echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\">" . "\n";
echo "<tr>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\">" .
tep_image (DIR_WS_IMAGES . 'infobox/corner_right_left.gif') . "</td>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\" width=\"100%\">" .
$info_box_contents[0]["text"] . "</td>" . "\n";
echo "</tr>" . "\n";
echo "</table>" . "\n";
// The following line is not required since we write our own codes to display the Categories Header
// new infoBoxHeading($info_box_contents, true, false);
Here's the result.
It looks consistency with other box headers.
Add Decorative Image to Main Categories Header
The Main Categories Header is too plain. Let's add a decorative image 
to the Main Categories Header.
The codes now becomes:
$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
//codes display the Main Categories Header
echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\">" . "\n";
echo "<tr>" . "\n";
echo "<td height=\"32\" class=\"infoBoxHeading\">" .
tep_image (DIR_WS_IMAGES . 'main_categories_bullet_2.gif') . "</td>" . "\n";
echo "<td height=\"32\" class=\"infoBoxHeading\" width=\"100%\">" .
$info_box_contents[0]["text"] . "</td>" . "\n";
echo "</tr>" . "\n";
echo "</table>" . "\n";
// The following line is not required since we write our own codes to display the Categories Header
// new infoBoxHeading($info_box_contents, true, false);
The result becomes:
osCommerce Customization Tips:
Use a custom CSS class for an outstanding Categories Header.
This is the end of the osCommerce Main Categories Header customization example.