border product image

Hi all,

In the virtuemart store I would like to add a border 1px around all product images...Can anybody help me out where to adjust the css to have the border around all images of the store on all pages?

Thanx!
Paul

Hi.
Please add this code to override.css:

Code: Select all

 .nspArt img {
border-style: solid;   //your style
border-width: 1px;
}

And if you want also this:

Code: Select all

 .main-image img.product-image, .featured-view .spacer img, .latest-view .spacer img, .topten-view .spacer img {
border-style: solid;  //your style
border-width: 1px;


Hi Mike,

Thank you for the quick reply. However, the code shows no border. I activated css override in template settings, but nothing happens.

Thank you.
Paul

So, please open gk.stuff.css file and find the following line:

Code: Select all

 .nspArt img {
border: none;
background: white;
padding: 0;
}

And change it to:

Code: Select all

 .nspArt img {
border: none;
background: white;
padding: 0;
border-style: solid;
border-width: 1px;
}

Also vm.css file:

Code: Select all

.main-image img.product-image, .featured-view .spacer img, .latest-view .spacer img, .topten-view .spacer img {
max-width: 100%;
height: auto;
width: auto;
}

And change it to:

Code: Select all

 .main-image img.product-image, .featured-view .spacer img, .latest-view .spacer img, .topten-view .spacer img {
max-width: 100%;
height: auto;
width: auto;
border-style: solid;
border-width: 1px;
}

I checked it all and it works for me.

Hi Mike,
Works on all but the flypages (product previews)....
Can you help me out on that?
Thanx, rest works fine!
Paul

Please edit modal.css file and change the following line:

Code: Select all

 .sbox-content-image img {
display: block;
width: 100%;
height: 100%;
}

to:

Code: Select all

 .sbox-content-image img {
display: block;
width: 100%;
height: 100%;
border-style: solid;
border-width: 1px;
}

Hi,

Where is the modal.css?
Its not in the regular css folder?

You can find it in media / system / css folder.

Hi Mike,

It works on the popup image now, but still the flypage itself shows no border..
see attachment!

Thanx again!

Please paste link to your site.

Please paste link to your site.

http://www.14skates.com/online-catalogue/decks-and-hardware

Thank you

Please find in the vn.css file the following line:

Code: Select all

 .browse-view .row .product .spacer img, .related-products-view .row .product .spacer img {
max-width: 90%;
height: auto;
}

And change it to:

Code: Select all

 .browse-view .row .product .spacer img, .related-products-view .row .product .spacer img {
max-width: 90%;
height: auto;
border-style: solid;
border-width: 1px;
}

You are a legend. Problem solved.

Thank you.

No problem at all. I'm glad I could help.
See you around...