Product Page Layout Help, Please.

[panicrecords]

Hi.

I'm better at describing things with pictures than with typing out a book to convey what I'm trying to accomplish.

I want to change the look of the product pages.

I want the title on top above the description and image.

I'd also like it so that the text doesn't wrap around the image and just run down the right side on it's own.

And...if possible, but not crucial, to move the quantity/add to cart box to the left side.

Here's what my page currently looks like:


And here's what I want it to look like (this is photoshopped, not coded...I can't figure out how to code it to look like this):



Can anyone point me in the right direction to accomplish this?

[stiggy100]

Could you please post a link to your site?

You can do some of this in your stylesheet, although I should think you will need to modify tpl_product_info_display.php also (especially in the case of the title being above the image - although this may be doable in your CSS stylesheet.

Basically when you post your link, all I will be doing is using Firefox's Firebug addon and also Firefox's Web Developer Addon. These allow you to firstly identify what code creates the position etc of certain elements and also allows you to modify it to 'see what happens'

Its an invaluable resource, so if you dont have it, get it immediately!

[panicrecords]

Hey Stiggy, Thanks for the reply.

Here's a link for one of the product pages

http://www.panicrecord s . n e t/estore/index.php?main_page=product_info&cPath=3&products_id=191

I'll look into that firebug add on right now and see what it's all about, anything that helps me get through these things is welcomed by me.

[stiggy100]

OK,

So what I suggest is that you create yourself a new stylesheet for your product info page. You will place it in the CSS folder (along with your other stylesheets in YOUR TEMPLATE.

This stylesheet will be called product_info.css

Once you have created it add the following:


#productDescription {
width: 350px;
float: right;
text-align: justify;
}

#cartAdd {
float: left;
}

This should do the trick with those 2 requests...

Now I think you will need to slightly change the order of your tpl_product_info.php in order to get the title as you desire...

[stiggy100]

In terms of the product title....

Please Please back up and save before doing this but:

In your tpl_product_info.php

Move:

<!--bof Product Name-->
<h1 id="productName" class="productGeneral">Make Do And Mend - We're All Just Living 10" - Preorder</h1>
<!--eof Product Name-->


ABOVE

<!--bof Main Product Image -->

Im not overly handy using PHP so use at your own substantial risk

Its crazy enough it just might work

[panicrecords]

Thanks for the help with this stuff Stiggy.

Both of your suggestions actually worked. I always back up my files in case I screw something up, that way I can just start over after I change something if it doesn't work.

The only thing now is the price is on a separate line from the title of the product. I'm looking at how to get that to just be on the same line.

I got that Firebug thing, I like it. I think it will come in really handy for me. I'll have to figure out how to use it a little better though.