Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Sep 2008
    Posts
    5
    Plugin Contributions
    0

    Default 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.

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: change font color in category's product listing

    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 Code:
            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 
    and add

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

    to get
    PHP Code:
            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.

  3. #3
    Join Date
    Sep 2008
    Posts
    5
    Plugin Contributions
    0

    Default Re: change font color in category's product listing

    Thank you so much!

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

    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?

  4. #4
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: change font color in category's product listing

    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.

  5. #5
    Join Date
    Sep 2008
    Posts
    5
    Plugin Contributions
    0

    Default Re: change font color in category's product listing

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

    You're

  6. #6
    Join Date
    Jul 2008
    Location
    london
    Posts
    169
    Plugin Contributions
    0

    Default Re: change font color in category's product listing

    just what i was looking for.

  7. #7
    Join Date
    Oct 2008
    Posts
    15
    Plugin Contributions
    0

    Default Re: change font color in category's product listing

    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

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: change font color in category's product listing

    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.

  9. #9
    Join Date
    Oct 2008
    Posts
    15
    Plugin Contributions
    0

    Default Re: change font color in category's product listing

    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

  10. #10
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: change font color in category's product listing

    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:
    Code:
    body {
    	margin: 0;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 62.5%;
    	color: #FFFFFF;
    	background-color: #FFFFFF;
    	}
    I don't think you want this.

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

    color: #000000;

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v150 Can I change the category and new product list font and background color?
    By soso838 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 11 Jun 2012, 06:55 PM
  2. Change the font color in Product Listing page
    By wilson_li in forum Templates, Stylesheets, Page Layout
    Replies: 27
    Last Post: 8 Aug 2011, 06:56 PM
  3. Font color change in the categories listing
    By Marlake in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 7 Jul 2010, 10:31 PM
  4. Change font color of header category links
    By peanut in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 18 Dec 2009, 03:00 PM
  5. How to change font color for Product Listing
    By Jbraz in forum Templates, Stylesheets, Page Layout
    Replies: 17
    Last Post: 23 Oct 2007, 03:21 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR