Let's start changing some code to allow us to give the side InfoBoxes some style! The problem here is that we need to make our “side” InfoBoxes differently to our other InfoBoxes (eg “New Products for...” box).
This is pretty easy :), all you need to do is open up: /includes/classes/boxes.php
And add the following code at the very end of the file before the ?> tag:
class SideinfoBoxHeading extends tableBox {
function SideinfoBoxHeading($contents,
$left_corner = true, $right_corner = true,
$right_arrow = false) {
$this->table_cellpadding = '0';
$left_corner = tep_image(DIR_WS_IMAGES .
'infobox/corner_left.gif');
if ($right_arrow == true) {
$right_arrow = '<a class="infoboxheadinglink"
href="' . $right_arrow . '">' . $contents[0]
['text'] . ' »</a>';
} else {
$right_arrow = $contents[0]['text'];
}
$right_corner = tep_image(DIR_WS_IMAGES .
'infobox/corner_right.gif');
$info_box_contents = array();
$info_box_contents[] = array('params' =>
'width="100%" class="SideinfoBoxHeading"',
'text' =>
$right_arrow);
$this->tableBox($info_box_contents, true);
}
}
Save the file.
Now add the following code to the exact same file, again making sure you add it directly before the final ?> tag:
class SideinfoBox extends tableBox {
function SideinfoBox($contents) {
$info_box_contents = array();
$info_box_contents[] = array('text' => $this-
>SideinfoBoxContents($contents));
$this->table_cellpadding = '0';
$this->table_parameters =
'class="SideinfoBox"';
$this->tableBox($info_box_contents, true);
}
function SideinfoBoxContents($contents) {
$this->table_cellpadding = '0';
$this->table_parameters =
'class="SideinfoBoxContents"';
$info_box_contents = array();
$info_box_contents[] = array(array('text' =>
tep_draw_separator('pixel_trans.gif', '100%', '1')));
for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
$info_box_contents[] = array(array('align' =>
(isset($contents[$i]['align']) ? $contents[$i]
['align'] : ''),
'form' =>
(isset($contents[$i]['form']) ? $contents[$i]['form']
: ''),
'params'
=> 'class="boxText"',
'text' =>
(isset($contents[$i]['text']) ? $contents[$i]['text']
: '')));
}
$info_box_contents[] = array(array('text' =>
tep_draw_separator('pixel_trans.gif', '100%', '1')));
return $this->tableBox($info_box_contents);
}
}
What we have done here is create an extra portion of code to allow us to differentiate between a “side” infoBox and a “normal” infoBox.
Now you must open up each of the infoBox files found in /includes/boxes/ and change the following code:
new infoBoxHeading
to:
new SideinfoBoxHeading
And:
new infoBox
to:
new SideinfoBox
We do this in order to tell our InfoBoxes to create themselves using the new code we just added to /includes/classes/boxes.php
Giving the InfoBoxes some Style
Now we open up stylesheet.css and amend the style which control how the side InfoBoxes look. Simply add the following piece of code:
.SideinfoBox {
background: #cccccc;
}
Why: This is to match the colour of the Left Hand Column Background.
Now find:
.boxText { font-family: Verdana, Arial, sans-serif;
font-size: 10px; }
Change it to:
.boxText { font-family: Verdana, Arial, sans-serif; }
Why: We will be controlling the font size elsewhere in the stylesheet :)
Now add the following code (to stylesheet.css):
TD.SideinfoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
background: #cccccc;
color: #000000;
font-variant: small-caps;
}
Also add the following code (to stylesheet.css):
.SideinfoBoxContents {
background: transparent;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
line-height: 1.5;
}
After making these changes, your site should now look like this:
