Infobox drop shadow

[jswan]

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

[Ajeh]

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.

[jswan]

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

[Ajeh]

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.

[jswan]

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

[Ajeh]

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.

[jswan]

Thanks, Linda. I'm going to give it a shot.

 

Jason