Results 1 to 8 of 8
  1. #1
    Join Date
    Mar 2006
    Location
    Sacramento, CA
    Posts
    93
    Plugin Contributions
    0

    Default Add css to product listing listbox

    I'm trying to add a background to each product in my main product listings. I created a css class with the background I want, but I can't figure out where to add the css tag. I'm using zen 1.3.7 with the column display already built in... I want a box, more or less, around each product.

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

    Default Re: Add css to product listing listbox

    You don't need to add a new class - just use one of the many that are already there. Do a view source and you will see various classes and ids called out.

    .productListing-even and .productListing-odd will probably be the classes you want.

  3. #3
    Join Date
    Dec 2005
    Location
    SWFL
    Posts
    469
    Plugin Contributions
    0

    Default Re: Add css to product listing listbox

    If you're not already, use Firefox with the Firebug plugin installed. It will help you easily find the CSS you need to modify.

    HTH,
    Lesli in SW Florida ~ writer, teacher, and dodging hurricanes!

  4. #4
    Join Date
    Mar 2006
    Location
    Sacramento, CA
    Posts
    93
    Plugin Contributions
    0

    Default Re: Add css to product listing listbox

    Thanks for the tips. I'd used the developer's tool kit to try to find what files to use css classes in, but hadn't thought to use view source.

    I ended up creating new classes anyway (seemed to have better luck getting the spacing right), but the view source really helped me identify where I needed to be working.

    Now I'm trying to find where the to put a class for something else, though, and the view source isn't helping this time. I want to add a class to the freeshippingoptions text in the shipping estimator & checkout pages. I looked at the source, and there is no class currently defined. The class on the other shipping option is generic (bold, I think), so won't help me find the file. I've tried a couple of files I thought might make sense, but haven't found the right spot to put the css class yet.

    Do you know any more tricks for me to find this, or can somebody please tell me which file to use?

    Thanks.

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,061
    Plugin Contributions
    25

    Default Re: Add css to product listing listbox

    Firefox's Firebug or Web Developer extensions are made for the purpose of helping edit your CSS (among other things), and will show you all the id's and classes that actually control any element on your site. Most of the time there is already some combination of selectors that you can use to customize an element.

  6. #6
    Join Date
    Mar 2005
    Posts
    198
    Plugin Contributions
    0

    Default Re: Add css to product listing listbox

    Grrrr! Can anyone help please?

    I am wanting to increase the space between my index product listing rows, as well as add a horizontal rule.

    The code looks like this:

    Code:
    <div class="centerColumn" id="indexProductList">
    
    <h1 id="productListHeading">FOR HER</h1>
    
    
    <div id="indexProductListCatDescription" class="content"><br /></div>
    
    <br class="clearBoth" />
    
    <div id="productListing">
    
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="cat2Table" class="tabTable">
      <tr  class="productListing-rowheading">
    
       <th class="productListing-heading" align="center" scope="col" id="listCell0-0">Product Image</th>
       <th class="productListing-heading" scope="col" id="listCell0-1"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=index&amp;cPath=2&amp;page=1&amp;sort=2a" title="Sort products descendingly by Item Name" class="productListing-heading">Item Name-</a></th>
      </tr>
      <tr  class="productListing-odd">
       <td class="productListing-data" align="center"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=7"><img src="images/anuenue_SM.jpg" alt="ANUENUE: Goddess of the Rainbow (a-noo-ay-noo-ay)" title=" ANUENUE: Goddess of the Rainbow (a-noo-ay-noo-ay) " width="40" height="48" class="listingProductImage" /></a></td>
       <td class="productListing-data"><h3 class="itemTitle"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=7">ANUENUE:  Goddess of the Rainbow  (a-noo-ay-noo-ay)</a></h3><div class="listingDescription">“Anuenue”, sacred Goddess of the heavenly rainbow, is the divine bridge between Heaven and Earth. Her arch of colors that appear in the heavens after...</div></td>
      </tr>
    
      <tr  class="productListing-even">
       <td class="productListing-data" align="center"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=9"><img src="images/areyla_SM.jpg" alt="AREYLA: Goddess of the First Light (ar ay lah)" title=" AREYLA: Goddess of the First Light (ar ay lah) " width="40" height="48" class="listingProductImage" /></a></td>
       <td class="productListing-data"><h3 class="itemTitle"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=9">AREYLA:  Goddess of the First Light  (ar ay lah)</a></h3><div class="listingDescription">Areyla is an ancient goddess from the land of Mu, long before the great sea isolated Hawaii in the Pacific Ocean. She was given the heavenly task to...</div></td>
      </tr>
      <tr  class="productListing-odd">
       <td class="productListing-data" align="center"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=12"><img src="images/kala_SM.jpg" alt="KALA: Goddess of Infinite Possibilities (kah-lah)" title=" KALA: Goddess of Infinite Possibilities (kah-lah) " width="40" height="48" class="listingProductImage" /></a></td>
       <td class="productListing-data"><h3 class="itemTitle"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=12">KALA:  Goddess of Infinite Possibilities  (kah-lah)</a></h3><div class="listingDescription">Infinite possibilities, that is what all life is made of. And we, as humans, are given the greatest gift: free will—the choice to create our heart’s...</div></td>
    
      </tr>
      <tr  class="productListing-even">
       <td class="productListing-data" align="center"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=1"><img src="images/leilani_SM.jpg" alt="LEI LANI: Heavenly Lei of Love (lay ee lah nee)" title=" LEI LANI: Heavenly Lei of Love (lay ee lah nee) " width="40" height="48" class="listingProductImage" /></a></td>
       <td class="productListing-data"><h3 class="itemTitle"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=1">LEI LANI: Heavenly Lei of Love  (lay ee lah nee)</a></h3><div class="listingDescription">A “Lei Lani” is a radiant garland worn around the neck—a symbol of regalness, splendor, grace, and supreme beauty. The sacred symbol of the waves...</div></td>
      </tr>
      <tr  class="productListing-odd">
       <td class="productListing-data" align="center"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=5"><img src="images/namaka_SM.jpg" alt="NAMAKA: Great Goddess of the Sea (na ma ka)" title=" NAMAKA: Great Goddess of the Sea (na ma ka) " width="40" height="48" class="listingProductImage" /></a></td>
       <td class="productListing-data"><h3 class="itemTitle"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=5">NAMAKA:  Great Goddess of the Sea  (na ma ka)</a></h3><div class="listingDescription">The great ocean is where all life begins, and all things flow back unto her. Namaka, The great sea goddess of Hawaii, is a loving protectress of all...</div></td>
    
      </tr>
      <tr  class="productListing-even">
       <td class="productListing-data" align="center"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=10"><img src="images/pilialoha_SM.jpg" alt="PILI ALOHA: The Beloved (pee-lee ah-lo-ha)" title=" PILI ALOHA: The Beloved (pee-lee ah-lo-ha) " width="40" height="48" class="listingProductImage" /></a></td>
       <td class="productListing-data"><h3 class="itemTitle"><a href="http://mahanamaui.net/mahanazen/index.php?main_page=product_info&amp;cPath=2&amp;products_id=10">PILI ALOHA: The Beloved  (pee-lee ah-lo-ha)</a></h3><div class="listingDescription">The beloved is your sweetheart, yourself, or the divine love of the universe. When a Pili Aloha is given as a gift, you are literally saying “you are...</div></td>
      </tr>
    I cannot, for the life of me, get the CSS to change it! First of all, there are no stylesheets called "productListing"—only ".productListing-rowheading" which, when I apply changes to it, do not seem to change anything.

    In other words, all the class and id styles referenced in the code do not seem to exist in the style sheet. It's like they are an evolution or something. When I change Body or H3 it changes everything, including the listing, and I don't want the changes throughout the site—only for the index listing.

    Can anyone point out to me what I'm missing?

    Thanks much!

  7. #7
    Join Date
    Mar 2005
    Posts
    198
    Plugin Contributions
    0

    Default Re: Add css to product listing listbox

    Nevermind. While I was using the Search Forum function someone else posted the exact thing for the space between images. I'm all set.

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

    Default Re: Add css to product listing listbox

    A note: There are many classes/ids provided in the code but not actually mentioned in the stylesheet. They are there for your use if you decide you want something different from the stock appearance. Just add the relevant tag to your stylesheet and style as desired.

    .productListing-rowheading applies to the heading row. .productListing-even and .productListing-odd are for the actual products.

 

 

Similar Threads

  1. How do I add a unique css class (or html id) to product listing items?
    By feemcgill in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 19 Apr 2011, 05:51 PM
  2. using dropdown listbox to create product
    By 510ego in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 23 Feb 2011, 12:37 AM
  3. using dropdown listbox to create product
    By 510ego in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 23 Feb 2011, 12:26 AM
  4. how to add freeshipping listing as new product listing and special listing
    By zeme_09g in forum Built-in Shipping and Payment Modules
    Replies: 0
    Last Post: 15 Apr 2010, 10:35 AM
  5. Add/Change CSS for Product Listing with Column Layout Mod
    By Berne in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 25 Aug 2009, 08:56 AM

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