Add separator on product listing page

[CobraPlant]

I want to add a separator (<hr>) between each item on my product listing page. I looked in product_listing.php, but I don't know where to put this code or even if this is the way to do it. Any ideas how to do this?

[Nimbuz]

A better solution would be to give the required amount of bottom margin/padding through CSS.

[CobraPlant]

I was thinking that I might be able to do it in CSS, but I don't know what codes to use or where. I'm new to CSS. Which line of codes do I look for and what would I do if I were to increase the padding? This might be a more elegant solution than <hr>.

[Nimbuz]

Link us to your page.

[CobraPlant]

Here you go:
http://www.cobraplant.com/plants/ind...dex&cPath=2_13

While we're on the topic of CSS, I've been trying to add a shadow to the entire page, both left and right.

I placed the following div codes in tpl_main_page.php (along with the appropriate closers):
<div id="mainWrapperLeft">
<div id="mainWrapperRight">
<div id="mainWrapper">

In CSS, I added the following to #mainWrapper:
#mainWrapperLeft {
background-image:url(../images/testdropshadowL.gif);
background-position: top left;
background-repeat: repeat-y;
}

#mainWrapperRight {
background-image:url(../images/testdropshadowR.gif);
background-position: top right;
background-repeat: repeat-y;
}

Because my test gif was 40 pixels wide, I added a margin of the same size to the mainWrapper. So far, I'm not getting anything. Any thoughts what I might be doing wrong?

I've also been looking for places to increase the padding between the items on the product listing page, but still I don't know what I'm looking for.

I appreciate your help!

[nev]

the product list displays in a table so dont think you can squeeze an <hr /> in there
but you can try adding a bottom border that would give you that separator look

find in your stylesheet (line 1095)

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

}


and right under it add aditional definitions for the .productListing-data

so you can add

.productListing-data {
border-bottom: 1px green solid;
padding: 15px 0px;
}

or what ever other combination of line color, thickness, style and padding you want.

hope this helps

[gjh42]

It may work easier to rearrange the divs:

<div id="mainWrapper">
<div id="mainWrapperLeft">
<div id="mainWrapperRight">

and then add 40px of padding to left and right sides of #mainWrapperRight. (No padding on #mainWrapper.) See my site for an example.

[CobraPlant]

YAY!!! Thanks guys for your help! I did the recommended changes, and I got the desired effect. I got a separator between each item in product listings AND I have a drop shadow around the page. I still need to tweak the images, but with your guidance, I know what I'm doing!