Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Uniform Product writing

Uniform Product writing

Views: 2,893

Results 1 to 20 of 23
16 Oct 2006, 7:59 PM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Uniform Product writing

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.

16 Oct 2006, 9:37 PM
#3
pitrow avatar

pitrow

New Zenner

Join Date:
Sep 2006
Posts:
9
Plugin Contributions:
0

Re: Uniform Product writing

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.
8 Mar 2007, 4:06 AM
#4
micbat avatar

micbat

New Zenner

Join Date:
Mar 2007
Posts:
7
Plugin Contributions:
0

Re: Uniform Product writing

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!

22 Feb 2011, 7:49 PM
#5
zcadqliv avatar

zcadqliv

New Zenner

Join Date:
Jan 2011
Posts:
69
Plugin Contributions:
0

Re: Uniform Product writing

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.
22 Feb 2011, 7:56 PM
#6
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,616
Plugin Contributions:
0

Re: Uniform Product writing

We will probably need a URL to see the problem.

23 Feb 2011, 1:32 PM
#9
darkangel avatar

darkangel

Totally Zenned

Join Date:
Oct 2007
Location:
Emporia, Kansas
Posts:
1,729
Plugin Contributions:
0

Re: Uniform Product writing

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:

<div id="productMainImage" class="centeredContent back">

Replace with:

<div id="productMainImage" class="centeredContent">
23 Feb 2011, 4:06 PM
#10
zcadqliv avatar

zcadqliv

New Zenner

Join Date:
Jan 2011
Posts:
69
Plugin Contributions:
0

Re: Uniform Product writing

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

23 Feb 2011, 4:50 PM
#11
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Uniform Product writing

Try

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

23 Feb 2011, 4:58 PM
#12
darkangel avatar

darkangel

Totally Zenned

Join Date:
Oct 2007
Location:
Emporia, Kansas
Posts:
1,729
Plugin Contributions:
0

Re: Uniform Product writing

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?

23 Feb 2011, 5:36 PM
#13
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Uniform Product writing

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.

23 Feb 2011, 5:49 PM
#14
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Uniform Product writing

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;}

23 Feb 2011, 6:15 PM
#15
zcadqliv avatar

zcadqliv

New Zenner

Join Date:
Jan 2011
Posts:
69
Plugin Contributions:
0

Re: Uniform Product writing

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.

23 Feb 2011, 7:12 PM
#16
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Uniform Product writing

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.

23 Feb 2011, 7:53 PM
#17
zcadqliv avatar

zcadqliv

New Zenner

Join Date:
Jan 2011
Posts:
69
Plugin Contributions:
0

Re: Uniform Product writing

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?

23 Feb 2011, 8:44 PM
#18
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Uniform Product writing

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.

23 Feb 2011, 9:29 PM
#19
zcadqliv avatar

zcadqliv

New Zenner

Join Date:
Jan 2011
Posts:
69
Plugin Contributions:
0

Re: Uniform Product writing

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.

24 Feb 2011, 4:48 PM
#20
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Uniform Product writing

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