Zen Cart Logo
trapezoid-twopenny
Open navigation menu
Home Community Forum Plugins
Documentation
For Developers For Storeowners
Services Donate Get Started
Forums / Templates, Stylesheets, Page Layout / Rework product page - look!

Rework product page - look!

Locked
Results 1 to 12 of 12
This thread is locked. New replies are disabled.
14 Mar 2008, 13:04
#1
rjspomer avatar

rjspomer

Zen Follower

Join Date:
Jan 2008
Posts:
173
Plugin Contributions:
0

Rework product page - look!

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.
http://rjfinewood.com/store/images/productpage.jpg

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/tissue-box-covers-regular-2/tissue-box-cover-exotic-european-walnut-burl-21.html?zenid=99a44d6be5efbfad98faba950392ecbe

Thanks RJ
15 Mar 2008, 15:17
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Rework product page - look!

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.
15 Mar 2008, 15:40
#5
rjspomer avatar

rjspomer

Zen Follower

Join Date:
Jan 2008
Posts:
173
Plugin Contributions:
0

Re: Rework product page - look!

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/tissue-box-covers-regular-2/tissue-box-cover-exotic-european-walnut-burl-21.html

Thanks for all your help
RJ
15 Mar 2008, 16:41
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Rework product page - look!

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.
15 Mar 2008, 18:14
#7
rjspomer avatar

rjspomer

Zen Follower

Join Date:
Jan 2008
Posts:
173
Plugin Contributions:
0

Re: Rework product page - look!

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
15 Mar 2008, 18:23
#9
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Rework product page - look!

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.
15 Mar 2008, 18:48
#10
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Rework product page - look!

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*/
15 Mar 2008, 19:06
#11
rjspomer avatar

rjspomer

Zen Follower

Join Date:
Jan 2008
Posts:
173
Plugin Contributions:
0

Re: Rework product page - look!

Thats what I am talking about. :clap:

Glen Thats great. Now to work on cleaning up these files. Is there an editor that has a that will show the PHP errors?

Thanks RJ
15 Mar 2008, 19:22
#12
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Rework product page - look!

You can run your site through the W3C HTML Validator (http://validator.w3.org/).

For individual files, Notepad++ has PHP color-coding and will indicate syntax errors.