Author Topic: Putting borders around images on front page  (Read 2266 times)

fenalla

  • Beginner
  • *
  • Posts: 1
Putting borders around images on front page
« on: June 28, 2011, 20:41:07 pm »
I am confused about how to create borders around all the images on the front page. I know I must create a class and apply that class, but my knowledge of php is terrible and am not sure where to place the code. I'm assuming the class must be applied in shopIndex.tpl.php? But where, exactly?

I was able to create a class called img.browseProductImage in my Joomla theme css file, and it successfully applies borders to images on each of the category pages. I used it in the browse_3.php file:

<div style="float:left;width:90%" >
     <a href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>">
        <?php echo ps_product::image_tag( urldecode($product_thumb_image), 'class="browseProductImage" border="2" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
       </a>
  </div>


But I can't figure out how to get the border to appear on the image on the front page, or each product's flypage. (I'm using flypage.tpl.php.)

I've seen some posts concerning this but no answers...
Thanks for any help.


Joseph Kwan

  • Advanced
  • Full Member
  • *****
  • Posts: 2344
Re: Putting borders around images on front page
« Reply #1 on: July 01, 2011, 01:06:54 am »
add a <div class="homePageContainer"> tag in the shopIndex.tpl.php file enclosing everything like this
<div class="homePageContainer">
  <!-- original content goes here -->
</div>

You can then use CSS target the img element inside this div.

.homePageContainer img {border:1px black solid }

 
Joomla/VM Upgrade Services. Problems with your migration? We can help.
Custom extensions to VM. Performance Tuning. Template modifications and advices.
Pay service to make VM work according to your needs. Your Joomla/VM solutions are just a PM away.

riaanoliver

  • Beginner
  • *
  • Posts: 6
    • Design4u Website Design Sydney
Re: Putting borders around images on front page
« Reply #2 on: July 01, 2011, 08:47:03 am »
HI The following will work;


<div style="float:left;width:90%; border: 1px solid color;" >
     <a href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>">
        <?php echo ps_product::image_tag( urldecode($product_thumb_image), 'class="browseProductImage" border="2" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
       </a>
  </div>


Hope this helps.
Design4u Creations
http://www.design4u.com.au