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?
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?
A better solution would be to give the required amount of bottom margin/padding through CSS.
[FONT=Microsoft Sans Serif]CSS Evangelist[/FONT]
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>.
Link us to your page.
[FONT=Microsoft Sans Serif]CSS Evangelist[/FONT]
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!
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
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.
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!
Bookmarks