Add css to product listing listbox

[k4satin]

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.

[gjh42]

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.

[madmumbler]

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,

[k4satin]

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.

[gjh42]

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.

[Kayla]

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:

<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!

[Kayla]

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

[gjh42]

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.