Changing Product Info Layout

[esugrue]

Hi!
I looked in the tutorials and forums and tried several things including relocating the Attributes Module --> section but I can't work out what I need to change.

As it is the Add to Cart section looks like this (as this product has an attribute the customer much choose)

[SCR]http://www.lemongrassmedia.com/zc_01.jpg[/SCR]

I want the Attributes Options section to be allighned right so it has more chance of being seen than it is now.

I have managed to align the Please Choose text right but can't align the rest.

eg

[SCR]http://www.lemongrassmedia.com/zc_02.jpg[/SCR]

I'm guessing it's something in tpl_modules_attributes.php - here is what I have now

<?php

/**

 * Module Template

 *

 * Template used to render attribute display/input fields

 *

 * @package templateSystem

 * @copyright Copyright 2003-2005 Zen Cart Development Team

 * @copyright Portions Copyright 2003 osCommerce

 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0

 * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $

 */

?>
<style type="text/css">
#productAttributes {
	text-align: right;
}
</style>


<div id="productAttributes">

<?php if ($zv_display_select_option > 0) { ?>

<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>

<?php } // show please select unless all are readonly ?>



<?php

    for($i=0;$i<sizeof($options_name);$i++) {

?>

<?php

  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {

?>

<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>

<?php

  }

?>

<style type="text/css">
#wrapperAttribsOptions {
	text-align: right;
}
</style>
<div class="wrapperAttribsOptions">

<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>

<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>

<br class="clearBoth" />

</div>





<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>

    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>

<?php } ?>





<?php

if ($options_attributes_image[$i] != '') {

?>

<?php echo $options_attributes_image[$i]; ?>

<?php

}

?>

<br class="clearBoth" />

<?php

    }

?>





<?php

  if ($show_onetime_charges_description == 'true') {

?>

    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>

<?php } ?>





<?php

  if ($show_attributes_qty_prices_description == 'true') {

?>

    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>

<?php } ?>

</div>

Can someone please point me in the right direction or change the code for me (my head hurts)

[schoolboy]

Why are you hard-coding css into a template PHP file?

[esugrue]

Hi

Hmm good question, I think I just did it to get it to work - well almost.

I'm just trying to get the purchase option in the same area of the product page, rather than one justified left and the add to cart justified right

[usernamenone]

OK, first take css code out of your php file.

Open you template>templates>tpl_modules_attributes.php and find this code:

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

and change to this

<div class="wrapperAttribsOptions">
<h4 class="forward"><?php echo $options_name[$i]; ?></h4>
<div class="forward"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

[esugrue]

Hi usernameone:

Thanks for the help, it's almost what I need

[SCR]http://www.lemongrassmedia.com/ti_03.jpg[/SCR]

The `Select Flavour' and `Please Choose' are aligned incorrectly.

I probably need to change another section in the same file and I tried but messed it up more !

Then I thought is it possible to put it all in the Add to Cart bordered box - so it's all in the one section and almost no chance of the customer missing it?

Thanks again for your help
Ernie

[usernamenone]

To be able to help further a link to you site is needed. I don't know without looking.

[esugrue]

Hi!

Here is a link to the page where the Add to Cart is off alignment.

http://goo.gl/FU4XF

(I used a shortener to stop Google indexing the sitename in its results)

Any help you can give is appreciated

Ernie

[usernamenone]

Off alignment to where. It looks good to me

[esugrue]

Hi!

Damn I don't deserve help I listed the wrong product link:

http://goo.gl/SDlle

Image of alignment of Options section on page:

[SCR]http://www.lemongrassmedia.com/to1.jpg[/SCR]

Thanks
Ernie

[usernamenone]

Open your templates stylesheet.css and find the below code

.forward, #shoppingCartDefault #PPECbutton{
float: right;
}

Add this to it , #attribsOptionsText

I haven't tested it so let me know if it works