How Do I Put A Border Around Product Images?

[Drewster]

OK, I've been searching the Forums since 6 o'clock this morning, and can't seem to find an easy answer. My site is a work in progress, so there's not much there. First, please refer to:

http://totallycooltees.com/store/ind...in_page=mypage

How do I go about adding a border to the "3 Drinks" product image I have there, and subsequent other product images as I add them? I don't want a border around the entire center column, or Add To Cart buttons, or anything else...JUST around my product images.

I'm using the Classic template and have just changed some colors...nothing else.

Anybody got an answer that doesn't require an entire a complete rewrite like most of the other solutions I've found so far?

Thanks in advance!

[s_t_e_v_e]

The above Url is not a product page... those pages have divs thats can be styled with CSS, the page link above has html that needs some tags so they can be styled in your style sheet...

if you get firefox 3 with the web developer add on, you will be able to find out what parts of your stylesheet need to be changed for the product images.

You won't need a full rewrite, just a few changes here and there...

[gizmo_girl]

Can you just put a border around your images before you save/upload them? That's what I did for the pet tags on my site:
http://www.kings-kreations.com/zen/i...=index&cPath=1

There's probably an easier way in the stylesheet somewhere, but, like you, I couldn't find the "easy" solution.

[gjh42]

It appears that you have built a new "define page" named mypage, and made a set of nested tables to output your content. You don't have any useful class or id tags on the elements, so it will be tricky to get a border as is; however, if you add appropriate tags, the border becomes trivially easy. Your current output:

<table width="100%" border="0" cellspacing="2" cellpadding="2"> 
	<tr>
		<td class="breadCrumb">&nbsp;</td>
	</tr> 
	<tr>
		<td class="pageHeading" align="center">  <h1>This is mypages heading!</h1> </td>
	</tr> 
	<tr>
		<td class="main">

			<table width="400" border="0" cellspacing="2" cellpadding="2">
			  <tr>
			  <td align='center'><a href='index.php?main_page=tshirt&act=showdesign&did=34&view=design'><img src='designs/small/3drinks-150.gif.gif' border='0' width='175' height='175'></a></td>			  </tr>
			</table>
			<div align="center" class="tabletxt">
					
			</div>		
		</td>
	</tr> 
	<tr>

		<td class="main">  <a href="http://totallycooltees.com/store/index.php?main_page=index"><img src="includes/templates/template_default/buttons/english/button_back.gif" alt="IMAGE_BUTTON_BACK" title=" IMAGE_BUTTON_BACK " width="39" height="15" /></a> </td>
	</tr> 
</table>

The "breadcrumb" part does not belong in this section at all (notice the real breadcrumbs just above the <td> you tagged breadcrumb.)
It would be much simpler and more flexible if you scrap the old-fashioned tables and just use a few divs which you can style in your stylesheet:

<div id="mypageContent">
	<h1 class="pageHeading">  This is mypages heading!</h1>
	<div class="imageLink"><a href='index.php?main_page=tshirt&act=showdesign&did=34&view=design'><img src='designs/small/3drinks-150.gif.gif' border='0' width='175' height='175'></a></div>
	<div class="text"> </div>
	<div class="backButton">  <a href="http://totallycooltees.com/store/index.php?main_page=index"><img src="includes/templates/template_default/buttons/english/button_back.gif" alt="IMAGE_BUTTON_BACK" title=" IMAGE_BUTTON_BACK " width="39" height="15" /></a> </div>
</div><!--mypage content-->

The border becomes

#mypageContent .imageLink img {border: 3px inset #aabbcc;}

Adjust to taste.