Forums / Templates, Stylesheets, Page Layout / Product page details - Custom positioning

Product page details - Custom positioning

Views: 802

Results 1 to 9 of 9
22 Aug 2011, 10:22 PM
#1
andeem avatar

andeem

New Zenner

Join Date:
Aug 2011
Location:
Little Ferry, NJ
Posts:
5
Plugin Contributions:
0

Product page details - Custom positioning

Hi there,
I've done some searches in this forum and a few others and I can't seem to figure out a problem I'm having-

On our zen cart (Ver 1.3.9h), we're looking to move around some of the details on a product once you go into its specific details page.

We wanted to have the div that contains:
Model number
Shipping weight
Units in stock
Manufacture

float to the right, while the price and such floated to the left. However we ran into a problem once we changed the CSS, this also floated the UL in the product description to the right along with it!

Very confusing. Normally i'd just go into the page and change the UL, but this happens across all pages that include a UL in the description. It's a lot harder to change all descriptions with UL than it is to change a div to float to the right, but we've hit a brick wall as to how to make sure it doesn't make the details float as well.

Example picture of what I mean: http://imgur.com/x9n7E

Any ideas? I can give a URL if you need to take a look at the code.

22 Aug 2011, 10:56 PM
#2
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Product page details - Custom positioning

URL please?

24 Aug 2011, 12:48 AM
#4
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Product page details - Custom positioning

in your:

includes/templates/CUSTOM_TEMPLATE/templates/tpl_product_info_display.php

add div around this section

<div class="productInfoDetailList"> <!--bof Product details list --> CONTENTS_WITHIN <!--eof Product details list --> </div>

then add the float:right rule to your stylesheet leaving the UL untouched

24 Aug 2011, 3:22 AM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Product page details - Custom positioning

There is no need to add a wrapper div in the PHP file, as the ul has an id already:

<ul id="productDetailsList" class="floatingBox back"> <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>

Add to your stylesheet something like

#productDetailsList {float: right;}

which will affect that list and nothing else.

24 Aug 2011, 6:33 PM
#6
andeem avatar

andeem

New Zenner

Join Date:
Aug 2011
Location:
Little Ferry, NJ
Posts:
5
Plugin Contributions:
0

Re: Product page details - Custom positioning

Hi!

rbarbour's div idea worked the best, the other one unfortunately didint seem to yield the results I needed, but it took care of the problem! Thank you so much guys :)

25 Aug 2011, 7:22 AM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Product page details - Custom positioning

Score one for Template Monster again! Their custom version of tpl_product_info_display.php has changed the standard
<ul id="productDetailsList" class="floatingBox back">
to
<ul>
which removes the ability for the details list to be individually controlled by the stylesheet.

25 Aug 2011, 7:26 PM
#8
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Product page details - Custom positioning

Sure did thats why I suggested adding a div. Good old TM!