align product image to right

[manage-it]

How do I align the product detail image to the right and the product description to the top left?

[subb]

i too would love to know how to do this.

i would like to have each products' description on the left and the image to the
right.

cheers for any help

[bombknex]

I can give you guys some hints because I don't have time to go into the full explanation but basically you want to take a look at tpl_product_info_display.php located in includes/templates/YOUR_TEMPLATE/templates

If you scroll through the code you'll find this section:

/**
 * 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-->

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

<!--bof free ship icon  -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current)) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon  -->

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->
<br class="clearBoth" />

You'll probably see some other stuff in the code that looks familiar too. Both the product image and description are wrapped in divs (you can see this by viewing the source on your product page). You can try rearranging the code above to have description come before the image but you may also have to edit the stylesheet and setup some styles for the divs that the content is wrapped in. Try the float and position properties. In CSS those are used for positioning elements on a page.

Thats all I can do for now... Gotta get back to work

- Jonah

[subb]

thanks very much for the quick reply Jonah, much appreciated mate.

i did do some digging around and found that the CSS property

.back {
	float: left;
	}

was the section i needed to change to

.back {
	float: right;
	}

again, many thanks for the help

[bombknex]

No problem. You may want to be careful editing that style class because it applies to other elements in the store besides on the product page. For example, many of the back/forward or back/submit buttons that are arranged one on the left and one on the right are controlled by .back and .forward

Do some looking around to make sure nothing else looks out of place. Another thing you could do is edit tpl_main_product_info.php or tpl_main_products_image.php to have custom classes for your needs. For example, where you see in the code .back change it to .custom (or whatever) and then create this new class in the stylesheet.

Hope that helps!

[clydejones]

thanks very much for the quick reply Jonah, much appreciated mate.

i did do some digging around and found that the CSS property

.back {
	float: left;
	}

was the section i needed to change to

.back {
	float: right;
	}

again, many thanks for the help

Changing that declaration may bring up problems in other places on your site since "class="back" to align other things to the left are used on several template pages throughout Zen Cart.

[Wils]

My take is that CSS is the way to go. Have not done extensive testing, but why not look at

#productMainImage {
float: right;
margin: 0em 5em 1em 5em ;
}

/Wils