Replacing text in infoBoxHeading with images

[jbanda]

Ok, here's the problem:

My client has an unusual font for his logo, and wants as much of the content on his site in that font as possible (not my decision!). Of course, I can't define the font in the stylesheet because if the end-user doesn't have the font installed on their system, their browser will simply default to a more common font.

So, I've come up with a bunch of small graphics for the headers in the info boxes, but I can't seem to figure out how to replace the text with the graphic.

Please, don't tell me to modify the "TD.boxInfoHeading" in the style sheet, because I want a different graphic in the header of each info box.

Heeeeeeeellllllllp.....please....

[jbanda]

Never mind; I figured it out!

[urbancrunchy]

could you explain how you did it? i'd really appreciate the hints.

[seank123]

Did you make new sections in sylesheet.css for each infobox?? Or is there an easier way of doing it?

[jbanda]

Sorry it's taken me so long to get back - I've been busy!

Yes, seank123, you must make new sections in the stylesheet.css for infobox, plus change several other files for each header box.

For the "Categories" box, for example:

First things first - make the graphic you want to replace the text.

Add the style and the graphic to stylesheet.css:

TD.infoBoxHeading2 {
background-image: url('images/newgraphic.gif');
background-repeat: no-repeat;
}


Go to catalog/includes/languages/english.php and edit this bit of code:

// categories box text in includes/boxes/categories.php
define('BOX_HEADING_CATEGORIES', 'Categories');

to this:

// categories box text in includes/boxes/categories.php
define('BOX_HEADING_CATEGORIES', '');

Next, go to catalog/includes/classes/boxes.php and change this bit of code:

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

if ($left_corner == true) {
$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 == true) {
$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 == true) {
$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');
}

$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
'text' => $left_corner),
array('params' => 'width="100%" height="14" class="infoBoxHeading"',
'text' => $contents[0]['text']),
array('params' => 'height="14" class="infoBoxHeading" nowrap',
'text' => $right_corner));

$this->tableBox($info_box_contents, true);
}
}

to something like this:

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

if ($left_corner == true) {
$left_corner = tep_image(DIR_WS_IMAGES . 'trans_pixel.gif');
} else {
$left_corner = tep_image(DIR_WS_IMAGES . 'trans_pixel.gif');
}
if ($right_arrow == true) {
$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 == true) {
$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'trans_pixel.gif');
} else {
$right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
}

$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading2"',
'text' => $left_corner),
array('params' => 'width="100%" height="14" class="infoBoxHeading2"',
'text' => $contents[0]['text']),
array('params' => 'height="14" class="infoBoxHeading" nowrap',
'text' => $right_corner));

$this->tableBox($info_box_contents, true);
}
}

You'll need to change the dimensions in the former bit of code if the size of your graphic is different than what is specified.

Then, go to catalog/includes/boxes/categories.php and change this bit of code:

new infoBoxHeading($info_box_contents, true, false);

to this:

new infoBoxHeading($info_box_contents);

and I believe that's it. You do have to do it for each and every info box you wish to change.

Hope this helps.