change font color in category's product listing

Hello zenners,

In the default layout, when you click on a category on the left box, the products for that category are listed on the right like this:

product image product name price
product description ... more info

Questions:

1. The product name is in blue and bold, the price is plain black. How can I change the color of these two objects? I couldn't find where to change in the css. I tried changing productlist-data and it change many things all at once. I just want to change product name and price' font color.

2. The description displayed here shows about five lines of text. Is it possible to have it display only two lines of text, then when you click on the details the full description is displayed?

Any help is much appreciated.

You can change the product name by adding or editing h3.itemTitle a {} in your stylesheet:

h3.itemTitle a { color: #112233;}

There is not a way to affect the price text alone without some recoding in
/includes/modules/your_template/product_listing.php. FInd this section:```php
case 'PRODUCT_LIST_PRICE':
$lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
$lc_align = 'right';
$lc_text = $lc_price;

    // more info in place of buy now

'<span class="listingPrice">' .
and
. '</span>'

to get```php
        case 'PRODUCT_LIST_PRICE':
        $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
        $lc_align = 'right';
        $lc_text =  '<span class="listingPrice">' . $lc_price . '</span>';

        // more info in place of buy now
```Then in your stylesheet, style as desired:

.listingPrice {color: #112233;}

You can set the number of characters displayed in the product listing description in admin > Configuration > Product Listing > Display Product Description.

Thank you so much!

All three solutions were clear and specific. I followed the instructions and fixed all of them. :thumbsup:

Do you happen to also know where to change the font for

1. the product description
2. the item name column title that is default blue
3. the price column title that is default blue?

Those already have tags that can be used to identify them.
You need to install Firefox and its Web Developer extension. The Information > Display Element Information button will show all kinds of useful class/id/etc. info about whatever element you click on. You can then style the elements in your stylesheet.

Thanks once again. I downloaded the web developer extension and figured out the div to change. Now it's fixed.

You're :thumbsup:

just what i was looking for.

Hi there, I have read this post thru, and I have a similar issue, I have done the first part you suggest, but where in the stylesheet should I put this?

.listingPrice {color: #112233;}

You can probably tell that I am a newbie; so please dont bite when I ask if that is the complete syntax which just needs pasting into stylesheet

p.s. I have managed to change all the other font colours to black- It really is only the price that needs changing now?

Thanks

Andy

Since that is a new class tag, it can go pretty much anywhere in stylesheet.css (though for sanity it would be best to put it near related rules, or at the end of the file, so you can find it easily.)

You can paste it in as is.

Thanks so much for the reply, I have tried it in several different places in the stylesheet and it has had no effect at all- See the link here

Sorry to be a nuisance but I am trying to work it out myself- with no avail

Andy

Your problem is with the new products centerbox, which is not related to the product listing. If you go to a subcategory page, say Bathroom Accessories-> Corner Shower Caddy, you will see those prices black while the new products box below has them white.
Your stylesheet has

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
.listingPrice {color: #000000;}
}

in an apparent attempt to influence this, but a whole rule like
.listingPrice {color: #000000;}
should never go inside another rule.

The text for the centerboxes is specified to be white, and links to be black; since the price is the only non-link text there, it shows white.
You have specified in the body that all text on the site should be white on a white background:```
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #FFFFFF;
background-color: #FFFFFF;
}

Change either the color or the background-color appropriately - probably

color: #000000;

You are a genius- thank you so much- Guess us newbies should do a bit more homework before we start a project like this :thumbsup:

Cheers once again

Andy

:clap:

Glad it's sorted. If font color was the only thing you were trying to resolve with the mod work you did, you might consider undoing it, as it will probably be handled by that basic fix. Keep a copy of the file(s) as they are now (in a different place for safekeeping) in case going back doesn't work.

The fewer modifications you have to existing files, the easier it will be to do upgrades. Even override files need to be compared and merged if their original changes from version to version (see the changelog for a new version to find this out.)

Hello Zenners

I am a newbie and have read through this post but still cannot figure out how to change the font color for **Item Name ** and Price. The colors are now in bold blue and is difficult to differentiate with the blue bar. I would like to change it to white just like the Product Image.

My site is http://cablemaster.com.sg/ecable and go to product listing page eg. click on Data Network, Cable, UTP Cat.5E Cables.
Please help. Thanks.:(

The blue heading text items are links, so you need to address them like:

a.productListing-heading {color: #ffffff;}

Thanks Glenn, you are the Master of Zen Cart.

It works like magic !! :clap:

A minor problem is that the mouse hover was formerly red but now its white (ie. no change as it is white when mouse hover). How can I retain the mouse hover to red?

a.productListing-heading:hover {color: #ff0000;}

OK solved my problem, thanks a million Glenn.:smile: