Boxes: Changing the Look and Style

We have learned how to add and remove boxes, move them from side to side, and add and remove links and pages. Now we will delve into actually making them look different. This is where we get into modifying the font, graphics, colors and styles of the boxes.

The key files in these modifications are:

catalog/includes/classes/boxes.php - This controls the actual building of the boxes.
catalog/stylesheet.css – This is where you change or add styles to affect the boxes.
catalog/includes/boxes/ - all PHP files here are the actual boxes.

The next example will demonstrate what code you need to edit in boxes.php and stylesheet.css in order to remove the corner graphics, change the color, and add a top and bottom border as a box separator.

In stylesheet.css, create the style infoBoxHeading and make it have a top and bottom border with a width of 2px.

In /catalog/includes/classes/boxes.php find the following code (about line 97-100):

class infoBoxHeading extends tableBox {
    function infoBoxHeading($contents, $left_corner = false, $right_corner = false, $right_arrow = false) {
      $this->table_cellpadding = '0';

And add this line below it:

$this->table_parameters = 'class="infoBoxHeading"';

This will create a class tag in the generated html code when the blocks are drawn which will change the heading to have the top and bottom border. See screenshot:

Next, to clean up the box headings, we want to remove the rounded and square corner graphics from the boxes completely. There are 2 ways to do this. One, remove the code that creates this or change the graphics to an transparent .gif. I find the easiest way is to load the transparent gif. To do this, simply find this code in boxes.php :

class infoBoxHeading extends tableBox {function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {$this->table_cellpadding = '0';
      if ($left_corner) {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
      } else {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
      }
      if ($right_arrow) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner) {
        $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
      } else {
        $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
      }

and replace the highlighted paths with the filename ‘pixel_trans.gif’ It should look like the code that follows:

class infoBoxHeading extends tableBox {
    function infoBoxHeading($contents, $left_corner = false, $right_corner = false, $right_arrow = false) {
      $this->table_cellpadding = '0';
      $this->table_parameters = 'class="infoBoxHeading"';
      if ($left_corner) {
        $left_corner = tep_image(DIR_WS_IMAGES . 'pixel_trans.gif');
      } else {
        $left_corner = tep_image(DIR_WS_IMAGES . 'pixel_trans.gif');
      }
      if ($right_arrow) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner) {
        $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'pixel_trans.gif');
      } else {
        $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
      }
This removes the corner images completely. You could also specify your own images just as easily. One final change is to increase the height of the box heading. This makes the headings on the boxes wider. To do this, find the following code in boxes.php :

$info_box_contents = array();
      $info_box_contents[] = array(array('align' => 'left', 'params' => 'height="14" class="infoBoxHeading"', 'text' => $left_corner),
                                   array('align' => 'left', 'params' => 'width="100%" height="14" class="infoBoxHeading"', 'text' => '<b>' . $contents[0]['text'] . '</b>'),
                                   array('align' => 'left', 'params' => 'height="14" class="infoBoxHeading"', 'text' => $right_corner));
      $this->tableBox($info_box_contents, true);

and change the highlighted heights to whatever number you want. Higher numbers = wider headings. I am changing them to 20 for this example. See the screenshot below: