Forums / Templates, Stylesheets, Page Layout / Layout of product info page

Layout of product info page

Locked

Views: 1,326

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
11 Sep 2009, 9:54 AM
#1
sushigal avatar

sushigal

Zen Follower

Join Date:
Mar 2009
Posts:
435
Plugin Contributions:
0

Layout of product info page

Hi guys, I'm a bit of a beginner to css etc and am really stuck on this. I've searched the forums and found that I need to edit tpl_product_info_display.php to achieve how I want the layout to appear but just cannot draw from other threads exactly what to do.

Basically on my product info page;

http://www.thegreatgiftshop.co.uk/zencart/index.php?main_page=product_info&cPath=36&products_id=295

I would like everything to appear a bit neater. I'd like the please choose font dropdown and engraving text field to be as they are but without the huge gap between them, I can see that the 'add to cart' box is probably preventing this and I would also like to move that down underneath both of these next to the additional images.

I'll also be adding attribute images for the fonts and want these to appear to the right of the dropdown and the text field box. If you look on our friends site: http://www.tartantrader.co.uk/ go to one of the products and select a font, it shows the image of the font, I'd like my layout of the my product info page for engravable items to be more or less the same layout as his. If anyone could tell me which bit of code to move where etc I would be most grateful.

Sushigal

11 Sep 2009, 3:01 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Layout of product info page

Move the "add to cart" code block up to just above the "attributes" block, and add this to your stylesheet:

#productAttributes .clearBoth {clear: left;} - this fixes the gap from the add box

You could do

#cartAdd {position: relative; top: 20em;}

to move the add box down some. If you really want it all the way at the bottom of the page, leave it where you have it in the code.

11 Sep 2009, 3:13 PM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Layout of product info page

To get the attribute images (font examples) to the right, add to your stylesheet:

#productAttributes .clearBoth {clear: left;}

.attribImg {float: right; clear: right; width: 320px;}

14 Sep 2009, 8:25 AM
#4
sushigal avatar

sushigal

Zen Follower

Join Date:
Mar 2009
Posts:
435
Plugin Contributions:
0

Re: Layout of product info page

Thank you Glenn! :clap:

As you can see, the first attribute image ('to see a sample...') is not level with the 'font' drop down box, how can I make he top of this attribute image level with it?

I also asked in a previous thread (no one has answered) how can I only show the attribute image that is relevant to whatever option is picked from the 'font' dropdown. For example, when 'times new roman' is picked from the drop down, I only want the times new roman attribute image to appear on the right (with the top of this image being level with the font dropdown as I just mentionedy) How can I achieve this? Does it require a mod?

Many thanks. Really appreciate your help!

Regards,

Sushigal:D

14 Sep 2009, 10:32 AM
#5
kristina150 avatar

kristina150

New Zenner

Join Date:
Sep 2009
Posts:
13
Plugin Contributions:
0

Re: Layout of product info page

Title: ALERT: PayPal Direct Payment Error (10565 <!-- -->)
Content: 10565 Merchant country unsupported. - The merchant country is not supported.

This is an urgent matter. Above is the junk mail we received for many times in several e-mail of our companies, and that's all for the mail. We don't know either which site of our company it came from or which person. And we received e-mails from somebody complaining they had tried so many times to buy things from our sites but failed that they had to give up and buy from others.

Wonder what the matter is and what should we do. If anybody can help, we'll appreciate it very much.