Zen Cart Logo
Forums / General Questions / Word wrap under product images - How to change?

Word wrap under product images - How to change?

Views: 1,037

Results 1 to 9 of 9
22 Apr 2011, 3:38 PM
#1
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Word wrap under product images - How to change?

My products are listed in 3 columns. Under the images are the discriptions. The discription is in sentences that are longed than the image is wide. How can I edit the text so it wraps sooner and thus is no wider than the image?
Is this done in stylesheet.css? I do not see it.

22 Apr 2011, 3:46 PM
#2
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,178
Plugin Contributions:
0

Re: Word wrap under product images - How to change?

Please post a link in question so I can view with firefox with add on called firebug.> yes, you will control this issue within the stylesheet.css

22 Apr 2011, 4:54 PM
#4
gjh42 avatar

gjh42

Black Belt

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

Re: Word wrap under product images - How to change?

Add to your stylesheet

.listingDescription {width: 200px; margin: auto;}

22 Apr 2011, 5:10 PM
#5
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Word wrap under product images - How to change?

See, I told you it was beyond me. Anyway, it worked great. Thanks:clap:
I also want to narrow the product name width. I tried .listingName{width: 200px; margin: auto;}:smile: but it did not work:censored: Seemed like common sense to me, but I guess not.
Can you help with that also.
Thanks.

22 Apr 2011, 5:35 PM
#6
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Word wrap under product images - How to change?

Also, what must proceed a line of comment. "" or "#" or something else? It appears that both are used in the places I looked but when I tried to comment out a code and replace it with my own it did not work. An example...
I changed "background-color:#003300; /
gives the store a white background /
}" so that it read "
background-color:#003300; /* gives the store a white background /
}" and then added the line "background-color:#000000; /
gives the store a white background /
}" and it changed the color to a light blue instead of black. So then I removed the "
" from the original line and changed it to color #000000 and the color changed to black.
So I guess I need to know how to comment out a line.

22 Apr 2011, 5:38 PM
#7
gjh42 avatar

gjh42

Black Belt

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

Re: Word wrap under product images - How to change?

If you are going to be styling a site, you should get Firefox and one or both of its Web Developer and Firebug extensions. Those will show you exactly what classes, ids etc. apply to any element on the page. They also let you try styling and see the results immediately, so you know what to add to the actual stylesheet.

The class that applies to the product name is .itemTitle.

CSS comments must be /xxxxx/.

22 Apr 2011, 5:58 PM
#8
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Word wrap under product images - How to change?

IT INSANITY:bangin:
:clap:I did it though.

For future reference, I added these to the bottom of "my_template/css/stylesheet.css...

/* change width of listing discription under products on product page */
.listingDescription {width: 200px; margin: auto;}

/* change width of listing title under products on product page */ .itemTitle {width: 200px; margin: auto;}

Looks much better

22 Apr 2011, 5:59 PM
#9
haredo avatar

haredo

Totally Zenned

Join Date:
Apr 2006
Location:
Texas
Posts:
6,178
Plugin Contributions:
0

Re: Word wrap under product images - How to change?

Well done... Welcome to Zen Cart and all her features... :smile: