CSS <Style> Borders on Catalog Images?

[WoodsWalker]

Hi Folks!

 

I've recently learned how to apply CSS styles to images, and the simple border I can add to photos really enhances the look of my other web pages. Is there a way I can apply these to the images in my osC catalog? I've searched around, and gone through product-listing.php with a fine-toothed comb, but can't fathom how to do it.

 

Any guidance would be much appreciated.

 

Thanks,

~Wendy

[Black Jack 21]

Hi Folks!

 

I've recently learned how to apply CSS styles to images, and the simple border I can add to photos really enhances the look of my other web pages. Is there a way I can apply these to the images in my osC catalog? I've searched around, and gone through product-listing.php with a fine-toothed comb, but can't fathom how to do it.

 

Any guidance would be much appreciated.

 

Thanks,

~Wendy

 

Start your search with /includes/functions/html_output.php -> function tep_image. There is a "border="0" definition.

[jefs.42]

but....

 

osC uses that function for pretty much EVERY image. I'm guessing you don't want borders on all of them. And if you did then just a

img {
border: 1px solid #123;
}

 

would do the same thing much quicker.

 

 

what you most likely want is probably just on product images? maybe in certain places or everywhere?

 

What you want to do is find the specific places you want the image to have a border -

product_info.php

includes/modules/product_listing.php

shopping_cart.php

 

 

find the tep_image functions in those and add the style to the 'parameters' argument.

 

so for example:

tep_image(DIR_WS_IMAGES.'image.jpg','alt text','width','height',' style="border: 1px solid #123"');

[WoodsWalker]

Thanks Andreas and Jef - that's just the advice I was looking for! :D

 

I'll try it and report back.

 

~Wendy

[h2oHOH]

You can also add borders from external stylesheet which is easier to edit and make changes:

 

/*------Listings--------*/

 

.productListing-data a img {

border: 1px solid #000;

}

 

/*------for columns--------*/

 

.boxText a img {

border: 1px solid #000;

}

 

/*------product descriptions--------*/

 

.smallText a img {

border: 1px solid #000;

}

 

etc....