Forums / Templates, Stylesheets, Page Layout / Black border box around product rows?

Black border box around product rows?

Locked

Views: 2,054

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
12 Sep 2010, 10:38 PM
#1
sports_guy avatar

sports_guy

Totally Zenned

Join Date:
Apr 2007
Location:
Dayton, Ohio
Posts:
682
Plugin Contributions:
0

Black border box around product rows?

Hi. I am trying to put a 1px black border box around each product area. Please refer to this page: http://www.lasilhouettelingerie.com/shop/bodysuits-c-70

As you can see the odd and even rows don't currently have a 1px black border and the images are also touching (so I think I would also like to add a little padding between products).

I can see in my source code for the page above I have this:

<tablewidth="100%" border="0" cellspacing="0" cellpadding="0" id="cat70Table" class="tabTable">
<trclass="productListing-rowheading">
<thclass="productListing-heading" align="center" scope="col" id="listCell0-0">Product Image</th>
<thclass="productListing-heading" scope="col" id="listCell0-1"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=index&cPath=70&page=1&sort=2a" title="Sort products descendingly by Item Name" class="productListing-heading">Item Name-</a></th>
 
<thclass="productListing-heading" align="right" width="125" scope="col" id="listCell0-2"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=index&cPath=70&page=1&sort=3a" title="Sort products ascendingly by Price" class="productListing-heading">Price</a></th>
 
 
 
  </tr>
 
 
 
  <trclass="productListing-odd">
 
 
 
   <tdclass="productListing-data" align="center"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=405"><imgsrc="images/Cass Cami.gif" alt="Cass and Co. Control Camisole" title=" Cass and Co. Control Camisole " width="63" height="80" class="listingProductImage" /></a></td>
 
 
 
   <tdclass="productListing-data"><h3class="itemTitle"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=405">Cass and Co. Control Camisole</a></h3><divclass="listingDescription">This control cami provides support and moderate slimming and can be worn as inner or outerwear, layered, or as exercise wear. A great fit for all...</div></td>
 
 
 
   <tdclass="productListing-data" align="right">$72.00<br /><br /><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=405">... more info</a><br /><br /></td>
 
 
 
  </tr>
 
 
 
  <trclass="productListing-even">
 
 
 
   <tdclass="productListing-data" align="center"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=660"><imgsrc="images/75015.jpg" alt="Wolford Berlin Body" title=" Wolford Berlin Body " width="59" height="80" class="listingProductImage" /></a></td>
 
 
 
   <tdclass="productListing-data"><h3class="itemTitle"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=660">Wolford Berlin Body</a></h3><divclass="listingDescription">Soft cotton against the skin and a ######## sheen on the outside. The purest interpretation of luxury. Color: Black (We have this item in stock! Please...</div></td>
 
 
 
   <tdclass="productListing-data" align="right">$220.00<br /><br /><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=660">... more info</a><br /><imgsrc="includes/templates/template_default/buttons/english/button_sold_out_sm.gif" alt="Sold Out" title=" Sold Out " width="51" height="18" /><br /><br /></td>
 
 
 
  </tr>
 
 
 
  <trclass="productListing-odd">
 
 
 
   <tdclass="productListing-data" align="center"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=650"><imgsrc="images/string body cape.jpg" alt="Wolford Cape Town String Body" title=" Wolford Cape Town String Body " width="59" height="80" class="listingProductImage" /></a></td>
 
 
 
   <tdclass="productListing-data"><h3class="itemTitle"><ahref="http://www.lasilhouettelingerie.com/shop/index.php?main_page=product_info&cPath=70&products_id=650">Wolford Cape Town String Body</a></h3><divclass="listingDescription">A light cotton blouse with modern details and a practical feature: it can't slip out of place, because the seamlessly attached string body holds the...</div></td>
 
 

I would assume I would find this code to add the border:

productListing-odd
productListing-even
productListing-rowheading

but these specifications are not in my styelsheet (nor the default stylesheet).

The only .productListing items I found were:

.productListing-data
.productListing-rowheading
.productListing-heading

I don't understand why these items show in my source code but do not show in my css stylesheet. Please help me add a 1px black border around each producst listing (with a little padding between products).

Building a better web, one site at a time: Dayton Web Design

13 Sep 2010, 5:44 AM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Black border box around product rows?

What is the link to your page?

Zen-Venom Get Bitten

13 Sep 2010, 6:01 AM
#4
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Black border box around product rows?

OPPS!:oops: Saw the link

I don't understand why these items show in my source code but do not show in my css stylesheet.
Not all tags are in the stylesheet as it would be huge if they were

Try adding this to the bottom of your stylesheet and adjust to suit

TR.productListing-odd {
        background-color: #ffffff;
    height: 1.5em;
    vertical-align: top;
        }

TR.productListing-even {
    background-color: #9a9a9a;
    height: 1.5em;
    vertical-align: top;
        }

Zen-Venom Get Bitten

13 Sep 2010, 6:25 AM
#5
sports_guy avatar

sports_guy

Totally Zenned

Join Date:
Apr 2007
Location:
Dayton, Ohio
Posts:
682
Plugin Contributions:
0

Re: Black border box around product rows?

Sorry to do this to you Kobra. I added your code to the bottom of my sytlesheet like you said, and yes the odd and even rows did change color (so I know this setting should also be able to add a black border and space between product listings). As of right now each image touches so it looks sloppy.

I added this:

TR.productListing-odd {
    background-color: #FFFFFF;
    height: 1.5em;
    vertical-align: top;
 margin-bottom: 4em;
 border: 1px solid #000000;
 }
TR.productListing-even {
    background-color: #FFFFFF;
    height: 1.5em;
    vertical-align: top;
 margin-bottom: 4em;
 border: 1px solid #000000;
 }

Thinking I could space in between each odd and even row and add a black border around each product, but nothing happens still. What could I be doing wrong here?

Building a better web, one site at a time: Dayton Web Design

13 Sep 2010, 6:31 AM
#6
sports_guy avatar

sports_guy

Totally Zenned

Join Date:
Apr 2007
Location:
Dayton, Ohio
Posts:
682
Plugin Contributions:
0

Re: Black border box around product rows?

Ok. I have the padding by changing to this:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
 text-align: center;
 padding-top: 2em;
 }

Still have yet to find out where to add the black border (so it goes around the whole product (i.e. image, title, description, price, and add to cart).

Building a better web, one site at a time: Dayton Web Design

13 Sep 2010, 6:40 AM
#7
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Black border box around product rows?

You added padding to all items and should have seperated this out

td .productListing-data {
        padding: 0em 0em 1em 0em;
        }

You will not like the border as it will create boxes inline around each element

Zen-Venom Get Bitten

13 Sep 2010, 7:03 AM
#8
sports_guy avatar

sports_guy

Totally Zenned

Join Date:
Apr 2007
Location:
Dayton, Ohio
Posts:
682
Plugin Contributions:
0

Re: Black border box around product rows?

Ok I was able to seperate that out. I see what you mean about seperating that item out.

Building a better web, one site at a time: Dayton Web Design