Author Topic: Border Around the product image  (Read 8008 times)

jhunex909

  • Beginner
  • *
  • Posts: 10
Border Around the product image
« on: March 16, 2010, 08:26:22 am »
Can anyone can help me on how to add a border around the product image using css..  Thanks :)

Forrest

  • Full Member
  • ***
  • Posts: 1972
  • Me and my baby
    • Web Developer
Re: Border Around the product image
« Reply #1 on: March 16, 2010, 08:32:54 am »
img.browseProductImage {
   border:1px solid #000000;
}

Put in your:
components/com_virtuemart/themes/default/theme.css
or
your Joomla template css.

jhunex909

  • Beginner
  • *
  • Posts: 10
Re: Border Around the product image
« Reply #2 on: March 16, 2010, 08:45:46 am »
First thanks for your quick reponse. But after placing the codes, nothing happens.. It still no border.

Forrest

  • Full Member
  • ***
  • Posts: 1972
  • Me and my baby
    • Web Developer
Re: Border Around the product image
« Reply #3 on: March 16, 2010, 08:51:50 am »
Ah, that was for default category (browse pages). You can see your category product images will have this border now.

For your product details pages, try:

img.detailsPage {
   border:1px solid #000000;
}

and in your flypage (product details) template, add "class=detailsPage" to the image tag.

jhunex909

  • Beginner
  • *
  • Posts: 10
Re: Border Around the product image
« Reply #4 on: March 16, 2010, 09:05:44 am »
I place the css codes here components/com_virtuemart/themes/default/theme.css.
img.browseProductImage {
   border:1px solid #FFFF00; /*my customize color border*/
}
(I also try to add "." before the img but still not working).




[attachment cleanup by admin]

jhunex909

  • Beginner
  • *
  • Posts: 10
Re: Border Around the product image
« Reply #5 on: March 16, 2010, 09:18:32 am »
Sir my virtuemart is VirtueMart 1.1.3 stable. I also try to add border in themes/default/template/common/categoryChildlist.tpl.php. See my attach image. 

[attachment cleanup by admin]

Forrest

  • Full Member
  • ***
  • Posts: 1972
  • Me and my baby
    • Web Developer
Re: Border Around the product image
« Reply #6 on: March 16, 2010, 09:19:07 am »
I suggest you Google "css" and learn a little more.

You can try to add:
img.browseProductImage {
   border:1px solid #FFFF00 !important;
}


BUT THIS ALL DEPENDS ON THE FACT THAT YOU ARE IN FACT APPLYING A CSS CLASS OF "browseProductImage" to your images.. and that would depend on your cateogry template.

You can use an element inspector to check your current css, classes, and style sheets that are being used for that element. Google Chrome has a built in element inspector, and firebug can be downloaded for Firefox.

Likewise, if you are using cache, you would want to CLEAR YOUR CACHE to see changes.


jhunex909

  • Beginner
  • *
  • Posts: 10
Re: Border Around the product image
« Reply #7 on: March 16, 2010, 12:56:02 pm »
Im not that good in css. Sir Where can I exactly find the class browseProductImage.
Because when can't find that class in the template.css.. When I try to call the css inside the browse/browse_1.php, browse_2.php etc it removes my background images and also destroy my layout.. Sorry for my grammar..

Forrest

  • Full Member
  • ***
  • Posts: 1972
  • Me and my baby
    • Web Developer
Re: Border Around the product image
« Reply #8 on: March 16, 2010, 20:58:37 pm »
browseProductImage would not be in your template.css, but rather your THEME.CSS, whcih is the css for Virtuemart component, located in your VM theme directory.

components/com_virtuemart/themes/default/theme.css

Likewise, just because a class is assigned to an element, doesn't mean a CSS will have defined that element class.... meaning you may not find "browseProductImage" in theme.css if it has not been defined... which means you would want to define it as posted above.

jhunex909

  • Beginner
  • *
  • Posts: 10
Re: Border Around the product image
« Reply #9 on: March 18, 2010, 08:12:32 am »
Thanks Forrest. I already configure it out.. I just put/insert the browseProductImage class into the browse/browse_1.php etc. and it works. Thank you again.. I think this topic is solved..

ineteye

  • Beginner
  • *
  • Posts: 5
Re: Border Around the product image
« Reply #10 on: August 09, 2010, 17:50:36 pm »
And how to make border, without spaces, around image on description page?