Thumbnail List and Item Description (modification question)

General General Questions
1

In the “List” view of my store, I need to make the thumbnails larger. I did this through the design settings which only changes the thumbnail once the item is clicked upon.



I want to put the image of the house above the price and excerpt.







And then on the actual product description page, I want to do the same thing… put the house image above the price and text.







Does anyone know how to go about accomplishing this task? (I am running 2.0.10, by the way)



Thanks in advance.

2

Edit: I know it’s in the product.tpl file for the product description. The problem is that i don’t know what to do in order to move the ‘add to cart’ box elements under the image.

3

First you have to switch to design mode in the backend to see in the frontend, which file must be modified.



In your second sample it is the “skins\yourtemplate\customer\views\products\view.tpl” file.



Original code:


[quote]{hook name=“products:view_main_info”}



{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y"}
[COLOR=Red]
[/COLOR]

{include file="views/products/components/buy_now.tpl" product=$product but_role="action" show_qty=true show_sku=true obj_id=$product.product_id hide_form=$smarty.capture.val_hide_form capture_options_vs_qty=$smarty.capture.val_capture_options_vs_qty capture_buttons=$smarty.capture.val_capture_buttons}


{/hook}[/quote]

Change to:

[quote]{hook name="products:view_main_info"}


{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y"}

{include file="views/products/components/buy_now.tpl" product=$product but_role="action" show_qty=true show_sku=true obj_id=$product.product_id hide_form=$smarty.capture.val_hide_form capture_options_vs_qty=$smarty.capture.val_capture_options_vs_qty capture_buttons=$smarty.capture.val_capture_buttons}
[COLOR=Red]
[/COLOR]


{/hook}[/quote]You have to remove the close div tag of the image div container and put it after the description div. So will be the description div a child of image div.

Then you have to chnage your css file for a better look.
4

Thank you very much, indy0077. I have started on it and it works just as I need it to. Now I’m off to edit the CSS for it.



Thank you again.

5

If anyone knows how to enlarge the tumbnail on the top of the LIST view of CATEGORIES, that would be nice to know. It’s the last step and I haven’t been able to figure it out. I can’t find the CSS (or my changes don’t work) for the price and options box…



6
  1. Go to “Design > Appearance settings > Thumbnail width on product list page” there you can set the widht of the thumbnail, but I think you have to delete all images and upload again to avoid pixel stretch.


  2. It’s all in the style.css and style.base.css
7

That takes care of the thumbnails, without having to re-upload images.



I wasted a lot of time on the CSS. I can’t figure it out and it’s really pissing me off. I changed all kinds of thing to try getting it to work with no results. Changed it all back.



Anyone know where to edit this damn CSS for it?

8

If you use Firefox you could download Firebug as an addon and it will tell you exactly what CSS to change. It will not only tell you the name, but what style sheet and even the line number.



Firebug is really great and it will help you a lot.



Brandon

9

I used Firebug and got my alignment the way I wanted. Now I am noticing the left and right column are gone on both the category view and the product view.



I wonder which tpl or css element I screwed up. I hate to overwrite all my work…



EDIT: ok, I fixed the product_options.tpl file.