How do I align the Product Price Block to the right of the Main Image ?!?!

[jnb41578]

Hi,

I am running v1.50 and have wishlist and zenlightbox modules installed. I have been editing the /includes/templates/my_template/templates/tpl_product_info_display.php page to try to achieve what I want. This is the closest that I could get it.

<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->
</div>

<div id="p-right">

<div id="cart">
<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
<?php
// base price
  if ($show_onetime_charges_description == 'true') {
    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
  } else {
    $one_time = '';
  }
  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->

<!--bof Attributes Module -->
<?php
  if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
  }
?>
<!--eof Attributes Module -->

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
<P></p>
  <?php if (UN_MODULE_WISHLISTS_ENABLED) { ?>
            <div id="productWishlistLink" class="buttonRow back">
            <?php echo zen_image_submit(UN_BUTTON_IMAGE_WISHLIST_ADD, UN_BUTTON_WISHLIST_ADD_ALT, 'name="wishlist" value="yes"'); 
            //print_r($_REQUEST);
            ?></div>
    
        <?php }
            else
            {}
            ?>
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>

<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

What I want to achieve is the product price block to be aligned to the right of the main image.

1. How do I get the product price block to align along side the main image? (see embeded code above)

2. How do I get the Wishlist button to align UNDER the Add To Cart button and both be centered?

3. I also want to get rid of the cell padding and dividers for the additional images (see attached image) and have them neatly lined up below the main image. How do I achieve this? I am not entirely sure which file to edit.

Thank you for your time!

[haredo]

Jnb,
Please post a link to your site so I can view your page in Firefox using the add on called Fire bug to see if I can control your issue with the stylesheet.css

[jnb41578]

Thanks,

Here is a link to my site, it is direct to a product page.

http://www.svgattic.com/index.php?ma...roducts_id=279

Thanks again! :)

[twitchtoo]

Listen to Haredo... send your site link - it's a CSS fix :)

[haredo]

Jnb,
This is a tricky one ....
Make sure you have a back up copy first before you play in the stylesheet so if you don't like the changes you can revert back to the original ...

Add this to the bottom of the stylesheet.css

#productWishlistLink {
margin: 0px 0px 0px 190px;
}

#cartAdd {
margin: -70px 70px 0px 120px;
}

#cart {
background: none repeat scroll 0 0 #F1F1F1;
border: 1px solid #E1E1E9;
border-radius: 4px;
margin-left: 27px;
padding: 30px;
}

[jnb41578]

I added to the stylesheet.css and unfortunately the only thing that changed was the alignment of the buttons, which is a step in the right direction! :)

[haredo]

Well heck, I forgot to add this one ...
Add this to the bottom of the stylesheet.css

#productPrices {
float:right;
margin: -10em 0;
font-size: 3em;
}

[jnb41578]

Okay, I added that to the bottom and it moved the product price to the right of the image and increased the size...

[haredo]

includes/templates/14884/css/stylesheet_dotline.css
Just add the delete comment brackets below, highlighted in red

.vDotLine {
background-attachment: scroll;
background-color: transparent;
/*background-image: url("../images/delim_v.gif");*/
background-repeat: repeat-y;
font-size: 1px;
width: 20px;
}

.hDotLine {
/*background-image: url("../images/delim_v.gif");*/
padding: 1px 0px;
}


includes/templates/14884/css/stylesheeet.css

Find this:
#productAdditionalImages {
border-top: 1px dashed #CCCCCC;
margin-top: 20px;
}

Then place the delete comment brackets for border-top
/*border-top: 1px dashed #CCCCCC;*/

[jnb41578]

Okay, that brought the price back down and aligned the buttons a little differently.