News:

Looking for documentation? Take a look on our wiki

Main Menu

Need Help with repositioning product page thumbnail images

Started by ShannonN54, September 11, 2012, 20:57:22 PM

Previous topic - Next topic

ShannonN54

Hello all
In an attempt to make my cart more responsive friendly I need to move the product thumbnail images  (product view) from left side of description (default) to above description while moving the result shown under the top margin to keep level with normal default position. I also need to remove the default 'customer review text'

I attach a screenie of what I hope to achieve. Can someone point me to the correct file to edit please.
Thanks in advance
Shannon



[attachment cleanup by admin]

jenkinhill

Make a copy of this template file:
joomla_root/components/com_virtuemart/views/category/tmpl/default.php

The part to edit is from around line 230, starting with    // Show Products ?>

Alter this to suit your requirements and place the edited file, preferably with a changed file name to avoid confusion, in  joomla_root/templates/your_joomla_template/html/com_virtuemart/category/  (make the directory if it does not already exist.) Then set that filename as an override in VM configuration/templates/Shopfront Settings/Category Layout  or Category Browse Page  setting in Category editor (you could just make the change here if you use different layouts for different categories.

Add styles if necessary for your changes to the end of your Joomla template css file. Using overrides and adding css like this ensures the changes are not overwritten by a VM update. 
http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

ShannonN54

#2
Quote from: jenkinhill on September 11, 2012, 23:15:23 PM
Make a copy of this template file:
joomla_root/components/com_virtuemart/views/category/tmpl/default.php

The part to edit is from around line 230, starting with    // Show Products ?>

Alter this to suit your requirements and place the edited file, preferably with a changed file name to avoid confusion, in  joomla_root/templates/your_joomla_template/html/com_virtuemart/category/  (make the directory if it does not already exist.) Then set that filename as an override in VM configuration/templates/Shopfront Settings/Category Layout  or Category Browse Page  setting in Category editor (you could just make the change here if you use different layouts for different categories.

Add styles if necessary for your changes to the end of your Joomla template css file. Using overrides and adding css like this ensures the changes are not overwritten by a VM update. 
http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Thanks for your fast reply & directions. However, I probably need a little more info & some handholding here, please.
Feel free to assume I'm lacking  in css editing skills (which shall become obvious) .  I see the area in question in the file suggested but think I cannot do anything till I find where the all  div class calls are

With my limited experience with css mods, esp. with VM stuff, I have managed to modify the vmsite-ltr.css file to get the effect I wanted generally but I still need some help to remove the category title, which is pushing the first image & description down further than the row position of the others, and if possible the middle image needs to move further to the right. I find this image positioning appears to be the same code for the three inmages  so have not a clue what to do.

I've included a screenie of the results I'm now acheiving after the slight mod to css.

I hope I'm not testing your patience but I am so unfamiliar with css.
Blessings Shannon

ShannonN54