How can I add a border to product images only

[Guest]

How can I add a border to product images only

If I change style.css in style sheets as below, it add a border to all images including cart and paypal logo's.

}

img {

border: 3px solid #a5a5a5;

}

Is there away I can just add aborder to my product images only?

thanks

Paul

[Robsta]

I've answered this somewhere already

Another suggestion in addition to my other answer in the other post, somewhere, is to add it to the product details template directly, in viewProd.tpl.

[Guest]

I've answered this somewhere already

Another suggestion in addition to my other answer in the other post, somewhere, is to add it to the product details template directly, in viewProd.tpl.

I can not find your other post anywhere?

To be honest I am novice and know nothing about tpl files. I suppose I was hoping that someone would be able to provide me with some code to add or replace that would make this work?

[Guest johnclaim]

You can add border to the image by give border 1. Please try.

By

John Claim

Bestofcolleges in US :)

[leeofaccy]

Hi

Which images do you want the border on? Latest Products, Featured Products, the View Product Page?

Also, which skin are you using?

[Guest]

Can anybody tells me about how really themes is generated actually i want to generate a theme which makes my PC looks like iMac

<< url removed, please read the rules >>

[Robsta]

Can anybody tells me about how really themes is generated actually i want to generate a theme which makes my PC looks like iMac

The skins are documented at cubecartforums.org.

[Guest RobertJohn]

I have just started using CC and having been able to add a border to product images in my previous web site, I was also trying to find the answer to this one. Having read this post I still have no idea. I searched for "the other post somewhere" - thanks moderator. I've looked through viewProduct.tpl although not a web developer - I do have a background in serious computer programming for a living, and I can't join the dots on this one.n My site has a lot of products which have a white (or pale) background and a border would make such a big difference. Could someone give us a clue?

Many thanks - my site??? www.sentientheart.co.uk take a look, you will see that I have already (in 2 days) made a big difference to the look....

Thnx

[leeofaccy]

Hi

As a basic way of doing this for the View Product Page, is to open skins/YOUR_SKIN/styleTemplates/content/viewProd.tpl and find this line

<div style="text-align: center;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" /></div>

and change the border="0" to ="1" for example.



Same for Latest Products found at skins/YOUR_SKIN/styleTemplates/content/index.tpl. Find this line

<a href="index.php?_a=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" title="{VAL_PRODUCT_NAME}" /></a>

Change the border value on this line too.



For a better result you could create a new style in layout.css, called div.latestProds img and style the border to better suite your site. For example 

div.latestProds img {

	border: 1px dotted #000000;

	padding: 5px;

}

Would give you a 1px dotted black border with 5px of padding on the image.

You would also have to make a new style for the View Product page and apply it to the image with class="YOUR_STYLE". For example if you created a style on layout.css called viewProdImg, the code you would need is

<div style="text-align: center;"><img class="viewProdImg" src="{IMG_SRC}" alt="{TXT_PRODTITLE}"  title="{TXT_PRODTITLE}" /></div>