Border around images

[mesaboogie]

I have alot of products already uploaded to the catalog and now I would like to have a border around them ... I'm not concerned about the mopics pics, just the pics that appear on the catalog as thumbnails ... I can probably bring all the pics back into my computer, run them through photoshop and reupload ... but is there an easier way ... is there something I can type into the stylesheet to make this happen ... I want the border to be 1px black ...
I have been looking at the stylesheet for the CSSFLUID template and I can't find anything relating to thumbnails ... maybe I'm looking in the wrong place...
I have firebug for firefox installed and maybe I'm stupid but I can't find anything ... can someone please help me or let me know if this is possible ..

thank you !

[pgmarshall]

Which pages do you want the border on?

The homepage, product listings or product info pages ... or all of them?

You can do this using css. I think I posted something on this board a while back ... here is the thread.

(Best to have a quick trawl through the boards first ... )

Hope it works for you,

Regards,

[mesaboogie]

thanks for the reply ... I want the border to be on all the PRODUCT PICTURES that are on the catalog ... I guess I should have put the border on them before uploading them to the catalog, then they would have to appear with a border .... if this can't be done on the stylesheet, would it work if I was to bring them all back in, put a border on them in photoshop, and then
reupload them ... I could bring them all in from the images big folder, and then just reupload to the main images folder and the images big folder, will this work and then in the future for any new products put a border on them before uploading ... I did search through the forum before posting, and I saw the thread that you are referring to, but on the stylesheet for the CSSFluid template, there is no reference for the below on the stylesheet

put this in the stylesheet.css on about the 5th line after .orderEdit

Code:
.imageborder {border: #666666 1px solid;}

[ridexbuilder]

If you fancy it around all images, why not try adding the following to templates/CSS-fluid-1/stylesheet.css ?

img {
border: 1px solid black;
}

[mesaboogie]

ridexbuilder ... thank you ... I will give that a try ... is there any particular place that this should go on the stylesheet ... I'm not sure if you have access to the stylesheet for the CSSFluid template ... if so, can you PLEASE tell me exactly where to enter this ... and should the code you posted be entered exactly how you posted it .... again, THANK YOU SO VERY MUCH

[mesaboogie]

me again .. I tried the code you posted and it put borders around all the images on the site ... I only want a border around the PRODUCT PICS ....
is there a way I can tell it do only put a border on product pictures

[ridexbuilder]

templates/CSS-Fluid-1/stylesheet.css - at end of file
[Of course, you should be working with your own template name, not the supplied ones]

.productListing-img a img {
border: 1px solid black;
}

catalog/includes/modules/product_listing_col.php - around line 162

             $lc_text = '<span class="productListing-img"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing[$x]['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $listing[$x]['products_image'], $listing[$x]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></span>';

Do the same for catalog/includes/modules/product_listing.php, around line 191, if required.
[Note this file hasn't been updated for Dynamic MoPics ]
The same span can be used for other display pages, where required.

Another example:
catalog/templates/fallback/content/product_info.tpl.php - around line 105

<script language="javascript"><!--
document.write('<?php echo '<span class="productListing-img"><a href="' . tep_href_link($lightlarge) . '" target="_blank" rel="lightbox[group]" title="'.addslashes($product_info['products_name']).'" >' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $product_info['products_image'], addslashes($product_info['products_name']), PRODUCT_IMAGE_WIDTH, PRODUCT_IMAGE_HEIGHT, 'hspace="4" vspace="4"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?></span>');
//--></script>
<noscript>
<?php echo '<span class="productListing-img"><a href="' . tep_href_link($lightlarge) . '" target="_blank" rel="lightbox[group]" title="'.addslashes($product_info['products_name']).'" >' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $product_info['products_image'], addslashes($product_info['products_name']), PRODUCT_IMAGE_WIDTH, PRODUCT_IMAGE_HEIGHT, 'hspace="4" vspace="4"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a></span>'; ?>
</noscript>

[ridexbuilder]

Just remember to use the Thanks/Rep buttons!

[mesaboogie]

THANK YOU SO MUCH .. I will let you know how things go