How do I create Borders around product images, etc.?

[Guest]

Hi,

Are there files where I can enable borders around the images and to separate each product description etc., with a line between each product in the 'Lets See What We Have Here' category pages and the 'Whats New' product listings?

 

Hope this makes sense, thanks for any help :)

Jane

[Guest]

Hi,

Are there files where I can enable borders around the images and to separate each product description etc., with a line between each product in the 'Lets See What We Have Here' category pages and the 'Whats New' product listings?

 

Hope this makes sense, thanks for any help :)

Jane

 

 

Carried on searching the forum and managed to come across this for adding borders to product images, so thought I'd update it a bit and post it here

 

 

Add this code to stylesheet.css

 

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

 

 

The post I found was for New Products only, but I have also added the other files that have the same code that needs to be changed if you want borders on all product images. I think the files were the ones I've listed below but check all of them in includes/modules just to be sure :)

 

includes/modules/new_products.php

includes/modules/also_purchase_products.php

includes/modules/product_listing.php

includes/modules/upcoming_products.php

 

 

In all the files listed above, find code:

 

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

 

Change to this code:

 

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=imageborder')

 

 

Change this following code at your own risk:).....it puts a border around the image on the product information pages. I altered part of the code with the code shown above and I can't say I know what it is I removed exactly as Im just learning php as I go along but it did the trick in the end :)

 

Find this code in product_info.php

 

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

 

 

CHANGE IT TO

 

<td align="center" class="smallText">

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=imageborder') . '<br><br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=imageborder') . '<br><br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

[smellycat]

Carried on searching the forum and managed to come across this for adding borders to product images, so thought I'd update it a bit and post it here

Add this code to stylesheet.css

 

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

The post I found was for New Products only, but I have also added the other files that have the same code that needs to be changed if you want borders on all product images. I think the files were the ones I've listed below but check all of them in includes/modules just to be sure :)

 

includes/modules/new_products.php

includes/modules/also_purchase_products.php

includes/modules/product_listing.php

includes/modules/upcoming_products.php

In all the files listed above, find code:

 

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

Change to this code:

 

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=imageborder')

Change this following code at your own risk:).....it puts a border around the image on the product information pages. I altered part of the code with the code shown above and I can't say I know what it is I removed exactly as Im just learning php as I go along but it did the trick in the end :)

 

Find this code in product_info.php

 

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

CHANGE IT TO

 

<td align="center" class="smallText">

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=imageborder') . '<br><br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=imageborder') . '<br><br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

 

 

Thanks :thumbsup:

 

I did as suggested and have borders now, just what I've been trying to do :)

 

did have one problem though, when I replaced the code in product_info.php, click to enlarge photo took me to an error page. I removed the code and replaced with original and all is back to normal, no box around that but not that it matters too much ;) :)