How to change Product layout?

[sunshinepro]

Hello, So I've been looking for days now to figure this one out and I can not find anything that helps...

I'm trying to change the product layout.
I would like it to look something like this picture.

I have tried changing the css style sheet But no luck
I have Tried Changing the Tpl_product_listing_info.php and nothing...
I have also tried installing the layout grid mod.. Nothing..

I'm using Mother earth template.

Can someone please help me figure this out...

Thank You.

[fredmccay]

I have the same problems and I have 1500 products. I've heard they will address some of these issues in the next release but that won't be here for sometime. Changing the product layout page is difficult to not possible.

[sunshinepro]

I have the same problems and I have 1500 products. I've heard they will address some of these issues in the next release but that won't be here for sometime. Changing the product layout page is difficult to not possible.

I'm sure there is a way... Other wise other sites would not have it...

I really need help - Or perhaps a Template that is Designed like that, & I can change the colors and such...

Please Anyone?

[rstevenson]

So far you've said you need help but other than saying that what you tried resulted in "no luck" or "nothing" you haven't said what's wrong. Give us a link to your site and we can probably help.

Changing the product page is not rocket science. It's a matter of making changes (if necessary) to the PHP files which are used to assemble that page, and then fine tuning the CSS. But first tell us what you tried and what the result was -- in more detail than "nothing".

You might also want to look at the "Similar Threads" section, down below here.

Rob

[sunshinepro]

Ok well , To start with here is the link sunshineproductz.com

I have looked all over, trying to find the right tutorial on how to change the product layout to a similar one in the picture...

I have changed the tpl_product_listing_info.php by moving the php codes around to position where I want everything...

Then I Have edited the css Stylesheet added and changed these codes

/*.content,*/ #productDescription{
/*font-size: 1.2em;*/
margin: -12.0em 0.5em 0.5em 20em;
text-align:center;
}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em -23em ;
}

and seemed to position it a little more the way I would like it...

But the Problem I am Having is, The Text line... I would like the text to, as it is inserted, To follow under the picture rather then keep going down on the right side. I want it to stay on the right side, but if it get longer, Follow under the picture.
Plus I'm having a bit of trouble finding out how to fix the picture and the larger picture text from going into the Add to cart Button Box.

I hope this helps in explaining what I need help with.

if you need more info, please let me know!.

Thanks again.

[rstevenson]

Hi,

Site's looking good -- I like the Mother Earth template. First, a few basics...

1. Be sure to optimize your images before going live. The site is loading very slowly because of image size.

2. Careful how you move things around. You have the <!--eof Product description --> well above the <!--bof Product description --> part. That won't hurt anything, but it suggests you may have made other errors in moving bits of code in the PHP file.

3. Validating one of your product pages gives 13 errors. None of them will affect the issue you're asking about, but they may confuse older browsers. You should fix things like unencoded ampersands.

Now for the alignment issue. You said...

I would like the text to, as it is inserted, To follow under the picture rather then keep going down on the right side. I want it to stay on the right side, but if it get longer, Follow under the picture.

Interestingly, most people, when they ask about aligning things in the product description, want just the opposite. They want the text to stay over in a block and not wrap under the image. In other words, a stock Zen Cart does wrap text under the image. Do any of your products have enough text to show this? I couldn't find one that had enough text, but then I wasn't trying too hard.

What happens if you leave the changes in the PHP but temporarily put back a fresh, untouched stylesheet? (Remember that if you rename your changed stylesheet, make sure you call it stylesheet.bak and not stylesheet-bak.css. The former won't load; the latter will and will likely confuse the issue.

Let's reference one page until we get this worked out. I'm looking at your Hand Crafted Goddess Oak Wand product detail page, because it also has an additional image which is overlapping the text. I can see there that your main product picture is in a div which overlaps well outside the main (centercolumn) content area. Did you move that? (I'm using the Firebug addon in Firefox to see these things. It's highly recommended.)

Rob