Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Infobox Header - Background Image


timmle

Recommended Posts

I'm trying to put a background image behind the text in the infobox headers.

 

Of course each infobox has certain images to corner off the boxes etc, but after changing the colour in stylesheet of the infobox header to the same as the background colour of my site i am still left with the corner_left image in place. (I have completely removed column_right so corner_right is not a problem)

 

I would like to know, if anybody can help, how to 1) remove completely the corner image on the left (not just colour it the same as the background in photoshop) and then 2) how to place a background image behind the infobox title.

 

I have tried - background-image: url (location of the image); - in the stylesheet but that did not work atall.

 

 

Please could you help with this, anybody?

Link to comment
Share on other sites

I want to do the exact same thing...

 

by the by, how did you remove the entire right column? I've removed all of the boxes in it, but the area where it's supposed to go is still there.

Link to comment
Share on other sites

I'm trying to put a background image behind the text in the infobox headers.

 

Of course each infobox has certain images to corner off the boxes etc, but after changing the colour in stylesheet of the infobox header to the same as the background colour of my site i am still left with the corner_left image in place. (I have completely removed column_right so corner_right is not a problem)

 

I would like to know, if anybody can help, how to 1) remove completely the corner image on the left (not just colour it the same as the background in photoshop) and then 2) how to place a background image behind the infobox title.

 

I have tried - background-image: url (location of the image); - in the stylesheet but that did not work atall.

 

 

Please could you help with this, anybody?

The info box corners are images.

You can turn them off in the info boxes.

 

in a line like

new infoBoxHeading($info_box_contents, true, false);

change to true to false

like

new infoBoxHeading($info_box_contents, false, false);

Link to comment
Share on other sites

I've removed all of the boxes in it, but the area where it's supposed to go is still there

To remove the whole right column and free up that space, in your /catalog/index.php find this code:

 

	<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
</table></td>

Replace it with:

 

<?php
 if ( false ) {
?>
<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
</table></td>
<?php
 }
?>

Unless you remove or "comment out" the code for the <td><table>...</table></td> osC uses for the right column, what you end up with is a blank table in the HTML.

:blush:

 

It's always a good idea to backup any file before making any edits.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

And this thread may prove useful in removing the image:

 

Click Me

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Thankyou for answering my question, now i have removed both the corner images by replacing both corner_right_left line and corner_left line with just - $left_corner = ''; .

 

Now how would i go about putting an image i have created behind the infobox title. It's going to be about 20pixels in height and about 100 in width. What code do i need to insert in that same file (includes/classes/boxes.php), and where do i place it so i can have this as the background image?

 

 

Thankyou again.

Link to comment
Share on other sites

Actually, I'd try it in the stylesheet.

 

In your /catalog/stylesheet.css find this code:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #bbc3d3;
 color: #ffffff;
}

Change it to something like this:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #bbc3d3;
 background-image: url(images/image.gif);
 background-repeat: no-repeat;
 color: #ffffff;
}

Your code for your TD.infoBoxHeading class may have different code in it.

 

The point I am getting across is to just add these two lines to it:

 

  background-image: url(images/image.gif);
 background-repeat: no-repeat

Of course you will need to use your own image name in place of image.gif

 

There are other values for the background-repeat: property that you may want to experiment with here:

 

CSS background-repeat Property

 

Please note that sometimes when you change your stylesheet nothing seems to change. That can be because you are looking at your PC's cache of the site.

 

If that happens, try clearing your browser cache then reload the page, or if you are using IE or Firefox hold down the <Ctrl> key while doing a page refresh.

 

This forces the browser to reload the page contents from the server.

 

If this doesn't work or isn't what you want, I don't have anything else to try.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

That worked a treat!

 

Thankyou very much. I just need to try and increase the height of the area so that it fits my entire image now instead of cropping it down but will that be in the classes/boxes.php?

 

Increasing the font size will do it but i want to leave the text the same size and just increase the size of the heading, in pixels if possible.

Link to comment
Share on other sites

The size is controlled in the stylesheet in the area you just edited:

 

  font-size: 10px;

Try adjusting what you have for the font-size in the TD.infoBoxHeading CSS property.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Or look at the PHP 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);
}
 }

That's my code.

 

Note near the end it has:

 

height="14"

several places.

 

You could try adjusting yours there.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Thanks, it worked really nice with the image (except for a small pixel that's kind of repeating the image even though it's not repeated... but it's ok, I'll figure that out later)

 

 

I've got one more question, how do I go about removing the text? ("Categories")

I commented out this part:

 

  $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

 

 

But that just made my image brake.

 

 

Thanks again!!

 

__________________

 

EDIT: I removed the text by leaving the define BOX_HEADING_CATEGORIES ' ' blank.

 

thanks!

Link to comment
Share on other sites

Back to the top of this. If the corners are pictures than it is not possible to change the color correct? Please let me know so I stop driving myself crazy trying to look for a way to do so. Thanks a lot. This is a very helpful post all together!

Stacy

Link to comment
Share on other sites

You have to use some sort of image editing program.

 

Then re-upload the new images.

 

It's not possible (to my knowlege) to change the color by other means.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

You have to use some sort of image editing program.

 

Then re-upload the new images.

 

It's not possible (to my knowlege) to change the color by other means.

 

Ok, I have changed the corner colors and gotten them to work on most of my boxes except the "New Products for July" box. Where is this located so I can change it manually so it identifies my corners (I had to change the format from gif to bmp so I have to change it in the php. Most of them changed when I changed it in the boxes.php but not the "New Products for July".) Thanks!

 

Nevermind. I found it.

Thanks

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...