image around a virtuemart product or category

Hi.
Im testing a local site with boutique. Im trying to put a frame around the category and products in virtuemart but with no lock.

Can you guys help me?
I need something like this...

boutique.JPG

Thanks

Hi

It's not so hard if images will be all in the same size. But to tell You how to make it I would need to see it live and know the path to the image with border.

Hi
No, its not live, but we can assume as:
C:\xampp\htdocs\boutique\images

or if it was live

\images

thanks

Hi

Ok I'll try to guess than.

Assuming that border is an image that You can try adding it with css like that:

Code: Select all

.browse-view .row .product .spacer a {
display: block;
background: ([url_to_border]) no-repeat center center transparent;
padding: 20px;
}


Hi, And i add this code where? vm.css?

Thanks

Hi. Ok, i found it. But if i aplly your code it will look like this:

produtos.JPG

Note: Thats only two products in display but the code put the frame around the image, the description and the "details of product"

Hi

This is why it's so hard without seeing the site. I was guessing the correct code. Try to use it this way:

Code: Select all

.browse-view .row .product .spacer > a {
display: block;
background: ([url_to_border]) no-repeat center center transparent;
padding: 20px;
}


If this will not work either than please ignore it for now and get back to me when site will be online.

Hi. Ive used the code and it remains equal.

Ive launched the site here:
http://bit.ly/19DqyuS

The image that im trying to use is at:

(/images/site/moldura.png)

thanks

Hi

I could not found this image You have mentioned, but please try with this code:

Code: Select all

.category-view .row .category .spacer h2 a img {
    background: url("http://www.anaferrofashionstore.pt/images/site/moldura.png") no-repeat scroll center center / 100% 100% transparent;
    padding: 20px;
}


Hi. Yeah, this worked, but only for the categories. What about the products?

Thanks!

By the way, the image is hidden under the name moldura2.png so its still unseen to the public.

Hi

I think for products You just need to add new selector:

Code: Select all

.browse-view .row .product .spacer img,
.related-products-view .row .product .spacer img,
.category-view .row .category .spacer h2 a img {
    background: url("http://www.anaferrofashionstore.pt/images/site/moldura.png") no-repeat scroll center center / 100% 100% transparent;
    padding: 20px;
}