Styling/Dimensions of Product Images on Shop Product Pages

Hi.

I use this template with J2.5 and Virtuemart 2.
I have a small layout problem on the VM2 product pages that I believe (although I don't know for certain) started occurring after I updated Virtuemart 2 (I now use version 2.0.20b).

For each product I have assigned multiple product images in VM2. The main/first product image loads fine, but the styling and dimensions of the additional ones shown as thumbnails has changed for the worse (they are now half the size than they were originally and their border has disappeared). They do not even display at all on Internet Explorer.

Please can you tell me how I can fix/correct this?

Thanks

Could You please enable a default template, and check if the problem exist also within it? If so, it would be mostly VirtueMart's plugin problem. If problem disappears, please write me back and Ill check more carefully what might be wrong.

Thanks for your reply Cyberek.

Do I try a default template by going to Template Manager and assigning another template as the default?

Thx

Exactly this is the way.
Then reload page and check if problem still occurs.

Cyberek, when I switch templates all the product images are displayed at the same size (i.e. no thumbnails).

So does this mean it is a template issue rather than a VM2 problem?

Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. link to this thread

Also please include a sample link to a product, where I can see how the things work when changing the template.
If it is a bug in our template, ill create a quick fix for You or send the case to developers.

Thanks very much Cyberek. So I can get that setup for you, please can you let me know your fixed IP address? Thanks

I have sent my fixed to you in PM and haven't received replay.

I have PM'd you the access details you need

Please edit: /templates/gk_bikestore/css/override.css and add at its end:

Code: Select all

.additional-images img {
width: 100px;
}


change number so it fits size you want.
Just remember to enable "CSS override" in template settings - advanced section.

If it goest to IE - please tell me which version You have problem with?

Thanks Cyberek - I have added the code and this has helped.
It has also fixed the problem in Internet Explorer.
The images are bigger but is it possible you can help me restore the original border around the thumbnails too? Thanks for all your assistance so far.

Could You show me how this border looked like? (screenshot edited with PhotoShop or other editing software would do the trick). Or just tell me how thick it was (1px, more?) and what colour?

It was border: 1px solid #e5e5e5;

I can pm you screen grab too if you'd like?

Ok, then edit in override.css the change I have sent to you, and change it to:

Code: Select all

.additional-images img {width: 100px; border: 1px solid #e5e5e5;}


If it will not work, try:

Code: Select all

.additional-images img {width: 100px; border: 1px solid #e5e5e5 !important;}


The first suggested code didn't work but the second did exactly what I needed.

Thanks Cyberek - you've been very helpful.