Product Image Position

I've searched for this and my terms are too general to find it.

I just want my image on the right-hand side instead of the left-hand side in product view.

I can't find the setting -- does it exist? If not, what template file is this in?

Pullin' me hair out!! ;)

Thanks!

If you're talking about the product info page (which shows details of a single product), try editing your /includes/templates/your_template/css/stylesheet.css to add

#productMainImage {float: right;}

Look for any other instances of #productMainImage and ensure that you are not being overridden elsewhere.

Thank you! That's exactly what I needed. :)

http://mysticmountainnaturals.com/testsite/index.php?main_page=index&cPath=15_13
Or you can choose one of the product display modules
from above

I added a border to all my main images and now the text is adjacent the image border on the right side of the image. How do I move the product info to the right?
I tried margin on the image and on the div id, but didn't help.

Jack

A link to see the problem in action?

Thanks! Here you go ---
http://www.artbeautiful.com/index.php?main_page=product_info&cPath=7_102&products_id=1622

FYI, I downloaded your Categories Dressing but haven't tried it yet. To tell the truth, the Zen C learning curve for me, a non-developer, has been no curve at all --- just a sheer vertical wall.

It was a wall for me for quite a while, too... eventually I found the forum and started learning how & where to edit things.

Your first problem with the image is that you put your customized #productMainImage declaration above the existing one, so the original margins overrode yours. Always check to see if a class or id has been used in the stylesheet already, and if so try to edit that instead of adding another instance.

OK--done. What do I know?

Can you advise me on that table containing the product info? Do I need to create a new style for that to control the colors? If so, can you tell me the applicable .php?

Thanks.
J

You already have all the tags you need to control that table in your stylesheet (actually more than enough - you don't even need the .bodycopy).

You can style any or all of

#productDescription table { }
#productDescription tr { }
#productDescription td { }

with any CSS you want.

You can get rid of all the repeated
width="50%" align="left" valign="top" style="background-color: #F3F3F3;"
in the <td> tags, and put one declaration in your stylesheet that will control them all.```
#productDescription td {
width: 50%;
text-align: left;
vertical-align: top;
background-color: #F3F3F3;
}

I can't figure how to get rid of those repeated declarations. What drives those? They are not in the stylesheet.css that I can find. Is it a .php file? I'm using Firebug, also. This area is in a form.

When you do a view source, everything you see in that part of the page (the whole table) is in the product description text. Did you copy & paste a manufacturer's description?

I looked up these tags with the Developer Tool Kit and turned up nothing.

No, I did not copy/paste anything.

I think our posts are a little out of order. How do I locate and control "product description text"?

The product description is what you enter in the textbox when creating/editing a product. It is stored in the database, so you will never find it with the Developers Toolkit.

You could change the product description from```html

		</tr>
		<tr>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">Item #</td>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">9542</td>
		</tr>
		<tr>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">Image Size</td>

			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">27.5X27.75</td>
		</tr>
		<tr>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">Poster Size</td>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">31.5X23.5</td>
		</tr>
		<tr>

			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">Price</td>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">29.95</td>
		</tr>
		<tr>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">Publication Type</td>
			<td align="left" valign="top" style="background-color: #F3F3F3;" class="bodycopy">Distributed</td>
		</tr>

		
		</table>
		<br>
		<br>
		<br>
		<br>
		Keywords: <span style="font-size:10px; color:#0000FF">Hills, Horse, Jockey, Plants, Animals</span>

tohtml

</tr>
<tr>
	<td>Item #</td>
	<td>9542</td>
</tr>
<tr>
	<td>Image Size</td>
	<td>27.5X27.75</td>
</tr>
<tr>
	<td>Poster Size</td>
	<td>31.5X23.5</td>
</tr>
<tr>
	<td>Price</td>
	<td>29.95</td>
</tr>
<tr>
	<td>Publication Type</td>
	<td>Distributed</td>
</tr>

#productDescription td {
width: 50%;
padding: 2px;
}

#productDescription span {
margin-top: 6em;
font-size: 10px;
color: #0000FF;
}

Thanks, Glenn. I didn't enter the product descriptions. Someone else did. How would I find the best procedure to edit this as you suggest? Am i actually looking for an html file or is this edited via the admin?

Admin > Catalog > Categories/Products > navigate to your product and click the "e" button on the right.

If you have an HTML editor active in your admin, you won't be able to see the code in the description window. Try turning it off if that is the case.

I apologize, but are you suggesting I need to edit each of over 4000 products one at a time with this method? You make a statement below "and you would never need to enter the whole mass of code in descriptions again, which would also make it much easier to understand when looking at the raw text."

But, is this the only way to do this?? I hope I misunderstand. Would you clarify? I'm hoping there is a more global option.

Jack