Hi All,

Could anyone tell me where i can increase the gap between the products listed.

Have a look at : http://www.kim-roebuck.com/shop/index.php?main_page=index&cPath=1_2

Thanks,

Lance

Please refer to a previous topic.
Css Problem V1.3.1, product listings and info pages

Hope this helps.

.

Thanks, i found what i needed in there.
Just in case anyone wants to know, i just added the following into to my stylesheet:

.productListing-odd {
background-color: #FFFFFFF;
height: 100px; /* Pls! this > 80px of the Image height in Admin Settings*/
padding: 0.2em 0em 0.2em 0em;
}

.productListing-even {
background-color: #F2F9FF;
height: 100px; /* Pls! this > 80px of the Image height in Admin Settings */
padding: 0.2em 0em 0.2em 0em;
}

.productListing-data {
padding: 0.5em 0.2em 0.5em 0.2em;
border: 1px dotted #E6E6E6;
}

Hopefully this will help someone else like.

Thanks again,

Lance

Thanks Lance and Seethrou

Much appreciated that did help me.

Thanks...Lancebotha, I would, if I were you put the add to cart button on those pages and remove the qty box, especially as your max qty is 1...just an idea
Thanks
Pete

I added that to the css and no difference. Am i missing something, I assume that css fix was for v1.3 right? And the spacing between images was when viewing a category right?

Any help
Pete

Mediathing... are you sure you added it to the stylesheet.css for the specific template you are using i.e. future_zen?

Not sure but maybe you added it to the default template or something.

Yep, sure...check it. I'll try it again in a bit...see if I was missing something simple

Have a link to peek of?

.

Would I be right in thinking that I just add that to the bottom of stylesheet.css in:
public_html/includes/templates/future_zen/css/

and is this an instruction to change something else in admin?
/* Pls! this > 80px of the Image height in Admin Settings */

Thanks

mediathing:

Would I be right in thinking that I just add that to the bottom of stylesheet.css in:
public_html/includes/templates/future_zen/css/
Yes.

mediathing:

and is this an instruction to change something else in admin?
/* Pls! this > 80px of the Image height in Admin Settings */

Thanks
Yes, and please refer to the following.

============
And give below for furher reference hope it may helps the others with similar need,

For the CSS part, add the following to your boootm of you sytesheet:

/* Products Listing Adding */
.productListing-odd {
background-color: #FFFFFFF;
height: 100px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
padding: 0.2em 0em 0.2em 0em;
}

.productListing-even {
background-color: #F2F9FF;
height: 100px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
padding: 0.2em 0em 0.2em 0em;
}

.productListing-data {
padding: 0.5em 0.2em 0.5em 0.2em;
border: 1px dotted #E6E6E6;
}

.itemTitle, .listingDescription, {
padding: 0 1.5em 0 0.6em;
text-align: left;
}

With refer to above:

height: 100px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */

The => Image - Product Listing Height 80px,
which is the default setting in the Admin:
=> Image
==> Image - Product Listing Height 80 (default, the max. height of the pics to show)

And for a space clearance of display between the pics in the odd and even field,
In CSS the value of the "100px" of the:
height: 100px;
should be greater than the "80px" value in the image setting of the Admin.
The reason is you need to give some spare spaces to the pics to separate itself.

More Example:

You want to show your pics in max. height of 150 px, and with 20px for the blank space as the display clearance,
therefore in the Admin set the following:
=> Image
==> Image - Product Listing Height 150 (the max. height of the pics to show)

Then in your CSS set the value to height: 170 px; (greater than the 150px above)
then you will have the effects of minium row height: 170px
which mean: 10 px + 150px + 10px
(you have 10px and 10px or 20px of space clearance for the display)

the resulting effect will be:

[10 px min. display space clearance]
PICs of yours with 150 px max. height in odd rows
[10 px min. display space clearance]
[10 px min. display space clearance]
PICs of yours with 150 px max. height in even rows
[10 px min. display space clearance]

Pls note:

for the Product Listings,
There are three items can affect it:

.productListing-data
.productListing-odd
.productListing-even

That's better, works a treat now...Thanks
Pete

Thanks, this was very helpful

Anita

Seethrou... I've got a new idol... how do you guys know that?
Thx... u just sorted my problem too (thought u should know)
:yes:
jo

Tell you some secrets, most of the above and infos I posted are taken form this forum. :P
I always follow the forum, observe and take notes about what will be useful. Although some of them may not be used in short term, I need to know what to search at the first. :smile:

.

or how about this:

.productListing-data {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid black;
}

don't worry about image height, just adjust padding top & bottom, throw in a bottom border if desired.
Dennis

Yes, it's also fine. :smile:

However, if the images in use have different heights or size. Or the contents of the product description affect the heights greadly. Then a minium height of the rows should be maintained for a more constant display.

If possible, I would like browsing pages with smoothly tables of rows and columns in constant. Its easier to "read and choose", instead of forcing the eye to focus and search again and rethink. As years need browsing different kinds of docs, categories, specifications and data books from different sources. Beside the price, it may be a factor affect the choosing between similar products. But its only one's view. :P

.

That's true - hadn't thought of that. I process images to be fairly large on the product listing page (200x200, though proportional) so there's never more than about 2 or 3 viewable at once, and then fairly constant in size. So even if one is much shorter there's not that many others on the page to look to disproportionate.
Dennis

Small change to Lance's original CSS:

It was:

.productListing-odd {
background-color: #FFFFFFF;

should be

.productListing-odd {
background-color: #FFFFFF;

(there was one too many F's!)

Thanks,
Scott

One reference, may be useful.
All / New Product Listing - Alternating Colours

It copy the display layout of:
Product Listing Page

Mod into:
New Products Listing page
and
All Products Listing page

.