newbie. problem with replacing a text with an image

[techan]

Hi,
I just replaced what's new infobox with an image file.
But the problem is the image covered the link icon which is supposed to take me to the list of what's new products.

This is what I did.


english.php

define('BOX_HEADING_WHATS_NEW', '');

includes/class/boxes.php

class infoBoxHeadingwhatsnew extends tableBox { 
  function infoBoxHeadingwhatsnew ($contents, $left_corner = true, $right_corner = true, $right_arrow = false) { 
$this->table_cellpadding = '0'; if ($left_corner == false) { $left_corner = tep_image(DIR_WS_IMAGES . ''); } else { 
$left_corner = tep_draw_separator(''); } $info_box_contents = array(); 
$info_box_contents[] = array(array('params' => 'height="23" class="infoBoxHeadingwhatsnew"', 'text' => 
$left_corner), array('params' => 'width="100%" height="23" class="infoBoxHeadingwhatsnew"', 'text' => 
$contents[0]['text']), array('params' => 'height="23" class="infoBoxHeadingwhatsnew" nowrap', 'text' => 
$right_corner)); $this->tableBox($info_box_contents, true); } }

whats_new.php

new infoBoxHeadingwhatsnew($info_box_contents, true, false, tep_href_link(FILENAME_PRODUCTS_NEW));

catalog/stylesheet.css

TD.infoBoxHeadingwhatsnew { 
background: #F4B0E0; 
background-image: url('images/whatsnew.gif'); 
background-repeat: no-repeat;
color: #F4B0E0;
}

The image I used on what's new infobox, my little link icon disappered.
How can I make it appered?


Thanks for any help.

[red_fraggle]

All you had to do is change the stylesheet.css like so:

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
<!-- this is the change i made --!> background-image: url(images/nav_bar_bg.gif);
color: #ffffff;


Undo all the other stuff you did and get back to basics!

[techan]

thanks red fraggle.
But the problem is I'm going to use all different images on each infoBox.
Then, the way you suggested does not make sense.

Can you suggest another way?

[techan]

I just found how to fix this problem. But doesn't work...

This is from wiki doc.


This works on all the boxes except the includes/modules/new_products.php pages.

To change the includes/modules/new_products.php page:

Make a new class in includes/classes/boxes.php

class newProductBox extends tableBox { 
function newProductBox($contents) { 
$this->table_data_parameters = 'class="newProductBox"'; 
$this->tableBox($contents, true); } }

Setup a new class in the catalog/stylesheet.css

.newProductBox { 
background-image: url(images/yourimage.gif); 
background-repeat: no-repeat; height: 30px; }

Then, in includes/modules/new_products.php about line 42 put the name of the new class you just made:
Change:

new infoBox($info_box_contents); ?> < !-- new_products_eof //-->

To:

new newProductBox($info_box_contents); ?> < !-- new_products_eof //-->

The problem is nothing is changed from the original setup.
Image is not loaded on the top of the new product info box.
I made sure file name and everything I can.
What's the problem?