Product Info Page Layout

[top hatt]

Hi: I am trying to customize the layout of the product info page without any success.

What I am trying to do is have the image left justified in one column and the price, attributes, and the add to cart boxes beside the image on the right. The product description centered would be under the 2 columns. The title would be centered above the 2 columns.

Product Name
Left Navbar Product Image Product Price
Product Attributes (no wrap)
Add to Cart
Product Description


I have tried to combine Product Info Centered by C. Jones and Product Info side by side by D. Carruth but I am just lost.

With the side by side template when I reposition the boxes they overlay all over the place. I tried using the Web Developer with Firefox and the elements show the boxes and the dimensions. I just don't know where to change them.

I'm sorry, I know I'm rambling. Any help would be appreciated.

Dave

[stevesh]

Mostly this kind of thing is a combination of editing tpl_product_info_display.php to place the various page elements in the proper places relative to one another, and some CSS work in the stylesheet to move stuff around using margin and padding.

There's a certain amount of experimentation involved. Examining Clyde Jones' Product Info mods is a good place to start, and you should install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

If Web Developer shows you a class or id name that isn't currently in your stylesheet, just add it to the end.

[top hatt]

Thanks for your quick reply. When I used the Web Developer tool I displayed the Elements. I found that the Attributes box, the Price box and the Add to Cart box were all way bigger that they needed to be. I thought it would be a real hack job to just adjust them with padding and margins but I don't know where to find and adjust the box sizes.

Again, any help would be appreciated.

Dave

[stevesh]

A link to your site. please.