how to put borders around images?

[Guest]

I want grey borders around the images in product listing and

in new products tables...

 

Whats the best way to do this?

 

Also check my site and tell me what you think :)

[radders]

Add the line $image.= 'class=fotgal';

in

includes/functions/html_output.php:

 

  if (tep_not_null($alt)) {

     $image .= ' title=" ' . htmlspecialchars($alt) . ' "';

$image .=  'class=fotgal ';

   }

 

Then in styles.css comment out the 3 lines begionning A:hover and replace with:

A:hover { color:#990000;font-weight:bold; text-decoration:underline}

.fotgal {border:2px; border-thickness: 2px; border-color: orange;

border-style: solid;}



A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px;

border-color: purple; border-style: solid}

 

This also will have a rollover effect for the image. Sorry the colours are taken from my site where you can see it in action.

 

hth

 

David

 

PS. I liked your site. I haven't managed to do a background yet. (I think it would benefit from a few more images to replace the rather strident placeholders).

[radders]

On checking more closely the stylesheet changes are simpler than I stated above:

 

In stylesheet.css simply add:

.fotgal {border:2px; border-thickness: 2px; border-color: orange; 

border-style: solid;} 

A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px;

[radders]

border-color: purple; border-style: solid}

Sorry this bit went missing!

[Guest]

Great, I will give that a shot and let you know how I go! :)

[Guest]

umm bad news... this method has put borders around EVERY image.. not just my product images...

 

I definetely don't want borders around my buttons :)

 

Any ideas?

[Guest]

ok found the answer....

 

just copy the entire tep_image function as a new function (ie tep_image_borders) and apply the change to the new function.

 

Then change any calls from tep_image to tep_image_borders in the product listing etc where you want your borders!

[radders]

Well it is working on the assumption that anything with width, height and an Alt tag is likely to be a clickable image. I see that some but not all buttons also have these. Failing that I wasn't able to distinguish between buttons and images. Buttons though are in a subdirectory so that might work but then there are the gifs such as the shopping cart.

Maybe there is a better way!

[radders]

ok found the answer....

 

just copy the entire tep_image function as a new function (ie tep_image_borders) and apply the change to the new function.

 

quote]

Sounds promising. Let me know how you get on!

[radders]

  if  ($width == SMALL_IMAGE_WIDTH && $height == SMALL_IMAGE_HEIGHT)  $image .=  ' class=fotgal ';

would be another way of doing it if all your thumbnail images are the same size

[Guest]

just copy the entire tep_image function as a new function (ie tep_image_borders) and apply the change to the new function.

 

Then change any calls from tep_image to tep_image_borders in the product listing etc where you want your borders!

Ick. I'm sorry, but that's just poor coding when the existing image function allows you to append parameters. For the calls to tep_images() where the image to be displayed is a product image, simply call it like this:

tep_image('picture.gif', 'a picture', 100, 80, 'class="fotgal"');

Of course remembering to add a style into the stylesheet called fotgal and defining it as a border of however many pixels, and whatever colour.