Rework product page - look!

[rjspomer]

I would like to rework css in the product page so I can move the additional images to be directly tight and side by side below the main image not spread out.

I have attached the desired look.


I would also like to add the swap feature but I understand that it does not work with IH2 and fual lightbox

This is the link to the page http://www.rjfinewood.com/store/tiss...faba950392ecbe

Thanks RJ

[kobra]

Most of this is in this thread
http://zen-cart.com/forum/showthread...hlight=ratkiss

[rjspomer]

Most of this is in this thread
http://zen-cart.com/forum/showthread...hlight=ratkiss

Hi Zen
Thanks I will this a try

[gjh42]

If you don't already have customization in your tpl_product_info_display.php, you can just use this mod in Downloads: Additional images relocated with CSS. Tweak it per Kobra's thread to keep the additional images on one line if you wish.

If you have edited your copy already, you can merge the mod edits with yours following the readme.

[rjspomer]

Hi Kobra,
I looked over the posting and I believe my issue is in the CSS I'm not quite sure of your response. This is my tpl_product_display.php for the product.


<!--bof Product URL -->
<?php
if (zen_not_null($products_url)) {
if ($flag_show_product_info_url == 1) {
?>
<p id="productInfoLink" class="productGeneral centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?></p>
<?php
} // $flag_show_product_info_url
}
?>
<!--eof Product URL -->


I simply added this to the stylesheet.css do I need to remove or replace any other reference to product description?

#productDescription {
float: right;
width: 68%;
}

#productAdditionalImages {
width: 180px;
}

#productAdditionalImages img {
margin : 1em 0 1em 0;
float : left;
}

Reduce this tag to a single entry by deleting it from others
.additionalImages {
clear: both;
}


the page I'm working on is http://www.rjfinewood.com/store/tiss...t-burl-21.html

Thanks for all your help
RJ

[gjh42]

You have a missing } after

#trailimageid img {
margin: 2px;
border: none;

and this comment needs to be deleted or surrounded by comment marks like /* */. As is, CSS sees it as a selector combined with .additionalImages.

Reduce this tag to a single entry by deleting it from others
.additionalImages {
clear: both;
}

Try a narrower width for this so it can fit beside the images:

#productDescription {
float: right;
width: 68%;
}

This is too narrow to fit your two images side by side, and this is what needs to float:

#productAdditionalImages {
width: 180px;
}

#productAdditionalImages img {
margin : 1em 0 1em 0;
float : left;
}



Beyond all this, you seem to have used a WYSIWYG editor program to move file elements around as well as to create the description. There are extraneous <font class="sectionDesc"> tags all over the place, and some of them might be causing difficulties. None of them are necessary; you should use <span class=...> tags instead, and put the font info in the stylesheet.

There are also some <br class="clearBoth" /> tags that may be keeping things from fitting the way you want. Until a bunch of these things are cleared up, it will be difficult to get a clean layout.

[rjspomer]

That worked great the missing } had me really messed up. What editor do you suggested I use. I am using front page. I did not realize that it was adding codeing.

Now the problem is I want the discription to be just to the right of the main photo and have the attributes moved up. This will keep every thing nice and tight so you do not need to scroll down.

Again Thanks so much. I am starting to grasp this a little more

RJ

[rjspomer]

Reworked page with your help

http://www.rjfinewood.com/store/tiss...t-burl-21.html

[gjh42]

Frontpage is evil :)
It will mess up your code, as you have seen.

The best way to edit PHP files is to ftp them to your pc and use a good file editor like Notepad++ or CrimsonEditor (both available free from www.sourceforge.net). Then ftp the edited file back to your site. This leaves you a backup copy on your pc as an added bonus.

[gjh42]

You still have a <br class="clearBoth" /> at the end of your Additional Product Images code.

You may get more consistent results by giving the description a big left margin instead of floating it.

/*beginning of additional images code*/
h1#productName, h2#productPrices, #productDescription {
    margin-left: 240px;
    padding-left: 0;
    }

#productDescription p, #productDescription font {
    margin-left: 0;
    padding-left: 0;
    }

#productAdditionalImages {
    width: 230px;
    }

#productAdditionalImages img {
    margin : 1em 0 1em 0;
    float : left;
    } 

#productAdditionalImages .clearBoth {display: none;}
/*end of additional images code*/