FAQ: remove infobox corners

osCommerce is kinda coded a bit clunky – we have to take into account that the majority of the codebase has not been updated in around 8 years. For this reson some things are done in osCommerce, which now, as webdesigners, we laugh at. But 8 years ago, it was almost cutting edge…

A question that I see posed almost daily on the osCommerce forum is;

I’m trying to change the original install color “grey” to blue, especially on each boxes header.

The problem here is that part of the infoBox is made out of color via css and the corners are made by the use of matching grey images (rounded corner images and square images). What I am going to do in this post is show you a few ways to get rid of those boxes once and for all!

So, let’s assume you changed the loo of your infoBox from the standard grey to blue;

As you can see, those grey images are showing and really interfere with the design. How to remove them?

Option 1: Via CSS

In the stylesheet.css file, you could do something as simple as;

.infoBoxHeading img { display: none; }

Just add that code at the bottom of the stylesheet, upload it and refresh the page. Now the infoBoxes look like this;

You can see that the text of the infobox now is aligned left. This might suit your needs. If not, you can try;

Option 2: In the boxes class file

Take that line of code back out of stylesheet.css so the grey boxes reappear in your design. Open up includes/classes/boxes.php and find;

[php]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 = ‘‘ . tep_image(DIR_WS_IMAGES . ‘infobox/arrow_right.gif’, ICON_ARROW_RIGHT) . ‘‘;
} 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’);
}[/php]

Change it to;

[php]if ($left_corner == true) {
$left_corner = tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
} else {
$left_corner = tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
}
if ($right_arrow == true) {
$right_arrow = ‘‘ . tep_image(DIR_WS_IMAGES . ‘infobox/arrow_right.gif’, ICON_ARROW_RIGHT) . ‘‘;
} else {
$right_arrow = ”;
}
if ($right_corner == true) {
$right_corner = $right_arrow . tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
} else {
$right_corner = $right_arrow . tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
}[/php]

And find;

[php]$info_box_contents[] = array(array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_image(DIR_WS_IMAGES . ‘infobox/corner_left.gif’)),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading” width=”100%”‘,
‘text’ => $contents[0][‘text’]),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_image(DIR_WS_IMAGES . ‘infobox/corner_right_left.gif’)));[/php]

Change this to;

[php]$info_box_contents[] = array(array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’)),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading” width=”100%”‘,
‘text’ => $contents[0][‘text’]),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’)));[/php]

Save the file and upload and your boxes should now look like this:

As you can see, this way preserves the spacing in the header area of the infoBoxes.

If that way does not float your boat, then try;

Option 3: Change the actual images

Undo the changes you made (if you tried Option 1 or Option 2). Now make yourself some corner images and replace the images you find in /images/infobox/ – the good thing about doing it this way is that you can still have rounded corners;

So, there you have 3 ways in which to change the appearance of your infoBox Corners. Easiest way is Option 1 in my opinion.

In a future post, I will show how to completely change the style of the infoBoxes to allow rounded corners without using images! How to make all 4 corners rounded and much more.

4 Replies to “FAQ: remove infobox corners”

  1. Carl – no I haven’t but it’s fairly easy – amend the boxes class file…might make a good blog post for the future.

Leave a Reply

Your email address will not be published. Required fields are marked *