Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Infobox drop shadow


jswan

Recommended Posts

Hi:

 

I'm asking for more trouble than this is worth, but...

 

In an effort to give my look and feel more visual interest, I thought drop shadows would be nice on my infobox. Any way to do that? will I need to use background images?

 

Jason

Link to comment
Share on other sites

In the boxes you can add footers to them with:

 

// WebMakers.com Added: Example of adding a Footer to a Box

   new infoBox($info_box_contents);



   $info_box_contents= array();

   $info_box_contents[] = array('align' => 'left',

                                'text'  => ''

                               );

   new infoBoxFooter($info_box_contents,false,false);

 

Just add that under the last part of the code in a box.

 

Then in the /includes/classes/boxes.php add this code and you can customize it for the differences you might need.

 

// WebMakers.com Added: Allows a footer that matches the header to be added

 class infoBoxFooter extends tableBox {

   function infoBoxFooter($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {

     $this->table_cellpadding = '0';



     if ($left_corner) {

       $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) {

       $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) {

       $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);

   }

 }

 

Now you have a footer you can utilize and modify for images, styles, etc. to create this look.

Link to comment
Share on other sites

Hi Linda:

 

Thanks for taking the time to give me a detailed reply. This sounds like what I need. Do you suggest, then that I use a background image for the main infobox content?

 

Jason

Link to comment
Share on other sites

Well ... if you use an image you can get a *shadow* of the image. But you could also do this with a color and only use the left corner of the box that is the color of your column.

Link to comment
Share on other sites

Well, I'm afraid you lost me on that idea. It may be that it's too late for me to think straight, but I don't understand your suggestion. What do you mean only use the left corner of the box that is the color of my column? Do you mean to create a new column between the left_column and the body? Fill it with a shadow looking color? I have a feeling that I am way off.

 

Jason

Link to comment
Share on other sites

I was thinking draw the box like normal ... then use the footer I gave you with just the left image on but make that the color of the column. That then gives the appearance of being pushed over by 10-14px to the right.

 

Or, use images for the boxes to give the real effect of image shadowing by having the image actually contain the image and shadow together.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...