Home | Store | osCommerce Tutorials

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:

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.

osCommerce Main Categories Header

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.

osCommerce Main Categories Header customization

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 osCommerce Main Categories 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 Main Categories Header customization

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.