Uniform Product writing

How do I get the description of my products going down the page in a straight line rather than fitting around the photo....?
Please take a look to see what I mean!

http://www.acfurniturehire.co.uk.whisky.webhoster.co.uk/ac-store/index.php?main_page=product_info&cPath=11_19_122_123&products_id=48

Edit you stylesheet.css file and find this entry and pull it out into it's own entry lioke this:

#productDescription {
width: 55%;
float: right;
}

And instead of using the Classic template and making edits to it that you will lose when an upgrade is applied, create your own template and make edits to it.

kobra:

Edit you stylesheet.css file and find this entry and pull it out into it's own entry lioke this:

#productDescription {
width: 55%;
float: right;
}

> And instead of using the Classic template and making edits to it that you will lose when an upgrade is applied, create your own template and make edits to it.


another approach is to use clear:left instead of float:right, which will drop your text down below the image.

Pitrow:

another approach is to use clear:left instead of float:right, which will drop your text down below the image.

Thanks pitrow - that was exactly the code I was looking for!

kobra:

Edit you stylesheet.css file and find this entry and pull it out into it's own entry lioke this:

#productDescription {
width: 55%;
float: right;
}

> And instead of using the Classic template and making edits to it that you will lose when an upgrade is applied, create your own template and make edits to it.

So, this worked genius for me - as long as there is no picture (there is the "No picture available" box). Once I add an image, the text gets pushed down and to the right. Changing image size didnt help. I played with %, left/right/center etc, no help. If I delete image it goes back to where I need it - directly to the right of the image box and straight down. With the image, down, even with bottom of image box and far right. I did raise the "Add to Cart box" but this doesn't seem to be a problem where there is an empty image box. Would greatly appreciate any help.

We will probably need a URL to see the problem.

That was a fast response!

Sorry - here is the right way:
http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=366

Here is the altered way:
http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=377

zcadqliv:

That was a fast response!

Sorry - here is the right way:
http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=366

So you have it the way you want it?

did you want the image centered on the page with the text below it?

see my fantasies realm link in signature

if so then try this

includes/templates/your_template/templates/tpl_modoules_main_product_image.php

find:

Replace with:

I want it to look exactly like this:
http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=366

-and it does, when the image box is empty. The problems is, when I upload a pic in Admin it shifts the text to another part of the page.

Like this:http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=376

Try

#productDescription {
margin: 0 10px 0 -50px;
}

zcadqliv:

I want it to look exactly like this:
http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=366

-and it does, when the image box is empty. The problems is, when I upload a pic in Admin it shifts the text to another part of the page.

Like this:http://glimmerdog.com/index.php?main_page=product_info&cPath=36&products_id=376

well then I am confused royally because the image of the way you said it looked when image was added is NOT the way this bottom link at glimmerdog is....unless glimmer dog is just an example and your site is a dif name with the unwanted results...

that bottom link shows the image on the left with the contents listed directly beside it.

so maybe it is fixed?

Or instead of editing the PHP files as in post 9, just add to your stylesheet

#productMainImage {float: none;}

If you weant the description etc to reliably clear your main image and form a clean column to the right of it, you can use in your stylesheet

#productDescription {margin-left: 210px;}

adjusting to clear the widest image you will have by a comfortable amount. This will work correctly in variable width sites, unlike the float: right; option.

You will need to find which of your several major stylesheets has a rule for #productDescription, and edit that rule so that your desired behavior happens.

Your stylesheet.css has:

#productDescription {
float: center;
}

#productDescription {
margin: 0 10px 0 -50px;
}

You should delete both of these rules, as float: center; is an invalid declaration and will be ignored, and the margin is reset later in stylesheet_main.

Your stylesheet_main.css has:

#productDescription {margin:0px 10px; padding:0;}

Change this to

#productDescription {margin:0 10px 0 180px; padding:0;}

Brilliant! Like those guys in the Guiness beer commercials.

That did it. Can you tell me how to have the text wrap downwards instead of under the "Add to Cart Box"?

Also - the "Add to Cart" text and the "Categories" links in left sidebox are gray and I want to change the color but cant find the right .css location. Im guessing you will know that instantly.

I am both humbled and grateful for all the help. Thanks.

Since your site has a fixed width, you can add to the #productDescription rule:

#productDescription {margin:0 10px 0 150px; padding:0; width: 400px;}

To find which classes/ids to style in your stylesheet, install Firefox and its Web Developer and Firebug extensions. They are the main tools we use to find this kind of information; the Web Dev Information > Display Element Information button will show what classes, ids, ancestors, etc. apply to any given element.

Great! Thanks all of your help!
Last question - When I post links to my site which is really the index.php should I remove the links later for security purposes and leave the rest of the thread?

You can only edit posts for seven minutes, so the question is moot. If you are concerned about security or search engines, post the URL with some spaces added in the middle. Just having a link to your site (any page) will not affect security unless you have an old unpatched version or some other current vulnerability.

Got it. So I was looking for another answer and I see in all my searches that you were the one that helped the person so Ill just ask now. I have FB and Twitter links. I would like to move them to about the FAQ in the header, up (not sure how far) and closer to each other. Can you tell me which file I should be in? Before they abandoned me, someone added the links to tpl_header and I dont know if they added code anywhere else. Thanks. Sorry.

The most likely file is tpl_header.php. I can't be certain without actually seeing your files.