Product page layout

[zaphod2008]

My product page is a bit of a mess, see here...

http://www.football-gifts.eu/index.p...oducts_id=5837

Basically, I want to align attributes, Facebook buttons and add to cart button horizontally, maybe with a thin keyline on top of them. Also align "Size" text and pull-down menu beside it. I've no idea where to do any of this.

I've searched all over the forum to no avail. Any help greatly appreciated as it's driving me crazy at this stage!

[RescoCCC]

The file to edit is:

includes/templates/your_template/templates/tpl_product_info_display.php

You can re-arrange the various elements inside the file to create the layout you'd like. You can create a line by using the HR tag. Something like this:

<hr align="left" width="400px" />

Adjust to taste.

[gjh42]

Find in your stylesheet and change the 40em to something small:
.wrapperAttribsOptions {
margin-top: 0.3em;
margin-right: 40em;
margin-bottom: 0.3em;
margin-left: 0em;
}

Add to the bottom of your stylesheet:
#productAttributes {float: left;}
#productAttributes .clearBoth {clear: left;}
#fb-root {float: right; width: 200px;}

The #fb-root rule seemed to partially work when I first tested it, but doesn't now... not sure what's happening there except that it works with javascript replacement and an iframe and seems impervious to styling.

Maybe enclosing the whole fb section in a new div with an id like #fbWrapper will let you hang onto that to style it. You would do this in tpl_product_info_display.php as mentioned above.