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.

[panicrecords]

Got that part figured out. Price is next to the Title now, GREAT.

I just moved this

<?php
// base price
if ($show_onetime_charges_description == 'true') {
$one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
} else {
$one_time = '';
}
echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?>

To be on the same line as this <h1 id="productName" class="productGeneral"><?php echo $products_name; ?>

Then deleted the Price Block part altogether.

WALLA!

Now my last part is trying to cut down on that padding around the picture on the product page, which I assume I can do in the css.

Stiggy, thanks for getting me on the right path to get this figured out.

[stiggy100]

No problem, I see you have managed it

One thing I'll point out (although this isn't the appropriate section)

You need to sort your images out as they are displaying compressed (making pages load slowly for certain folks)

Id suggest you look seriously at Image Handler 2 in the addons section... This will help you out a million...

good luck...

RE: The padding - Firebug is your thing for that. I would suggest when you change anything relating to the product info page then you just add it into that new stylesheet and make the change there. Each to their own just m 2 cents

[panicrecords]

uhhhhhh. I'm completely new to Zen Cart.

Is that add on available from the zen cart site...I know this is probably the dumbest question.

I don't usually add things on, I just go straight out of the box and tweak things here and there.

[stiggy100]

Yep: http://www.zen-cart.com/index.php?ma...roducts_id=117

Have a very very good look through this section. You can save yourself weeks of effort...

Some of the addons I could not actually live without...