image around a virtuemart product or category

GK User
Fri Jun 07, 2013 3:12 am
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
User avatar
Expert Boarder

teitbite
Fri Jun 07, 2013 9:58 am
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.
User avatar
Moderator

GK User
Fri Jun 07, 2013 2:10 pm
Hi
No, its not live, but we can assume as:
C:\xampp\htdocs\boutique\images

or if it was live

\images

thanks
User avatar
Expert Boarder

teitbite
Sun Jun 09, 2013 5:52 pm
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;
}
User avatar
Moderator

GK User
Tue Jun 11, 2013 8:58 pm
Hi, And i add this code where? vm.css?

Thanks
User avatar
Expert Boarder

GK User
Tue Jun 11, 2013 9:15 pm
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"
User avatar
Expert Boarder

teitbite
Thu Jun 13, 2013 10:24 pm
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.
User avatar
Moderator

GK User
Thu Jun 27, 2013 1:49 am
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
User avatar
Expert Boarder

teitbite
Fri Jun 28, 2013 10:06 pm
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;
}
User avatar
Moderator

GK User
Wed Jul 10, 2013 2:39 am
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.
User avatar
Expert Boarder

teitbite
Fri Jul 12, 2013 2:43 am
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;
}
User avatar
Moderator


cron