X-Cart forums

[chiaze]

Maybe there's a simple solution to this that I'm not realizing...

I would like to have a thin border around my product images, both the thumbnails and the detailed images.

Right now the thumbnails have a thin border in red but also a thicker border inside that in pink, and then the picture in the center. I set the thumbnail pic to what I thought was the maximum size, 150px by 150px, thinking that would fill up the space and cover the pink border, but that hasn't happened.

The detailed images just show as is. I need to add a border around it but am wondering if there's a way to do it in the template, rather than having to create that border around every image in Photoshop.

Thanks for any tips!

[balinor]

Just add a border to product_thumbnail.tpl and modules/Detailed_images/product_images.tpl

[chiaze]

What would be the code for adding a border please?

And, I'm not using the Detailed Images mod. Just the X Cart standard images within the Product Details page.

Also, I can't seem to identify which part of product_thumbnail.tpl refer to border thickness or color. Recap: my thumbnails now have a picture, a thick pink border, and a thin red border. I'd like it to be just a picture with a thin red border.

I'm using the Fashion Mosaic template, not sure if that affects things, but this is my product.thumbnail.tpl:

{* $Id: product_thumbnail.tpl,v 1.14 2004/06/24 09:53:29 max Exp $ *}
{if $config.Appearance.show_thumbnails eq "Y"}
{if $usertype eq "C"}<DIV class="ProductTopBorder">{/if}<IMG id="{$id}" src="{if $tmbn_url}{$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?productid={$productid}{if $file_upload_data.file_path}&tmp=y{/if}{/if}"{if $image_x ne 0} width="{$image_x}"{/if}{if $image_y ne 0} height="{$image_y}"{/if} alt="{$product|escape}" {if $usertype ne "C"}border="0"{else}class="ProductBorder"{/if}>{if $usertype eq "C"}</DIV>{/if}
{/if}

[balinor]

Then both will be handled by product_thumbnail.tpl. See the class that is called at the end of the template? That controls the border - class="ProductBorder"

Look at skin1.css and adjust it accordingly. The code for borders in css is:

border: 1px solid #000000;

Change the border size, style and color to what you would like.

[chiaze]

Thank you!

To get the effect I wanted - a thin, colored border around the product thumbnail - I had to not only change the Product Border to 0px, but also change the ProductTitleBorder to FFFFFF.