Separator in category display

[ckosloff]

Hi all,

I have noticed that when clicking on All Products, products display in a neat fashion with a tidy separator (horizontal ruler) in between.
However, when clicking on any category or subcategory, products are piled up without any separator, so it is confusing for unsuspecting first viewer.
I need to reproduce the All Products layout in the Categories layout.
I know that this is done via the templating system, probably in includes/templates/custom_template/templates/etc.
Could somebody point out what template needs to be customized and how?
I couldn't find any useful post or tutorial but, if they exist, would appreciate to be pointed to the right direction.
Thanks in advance.

[gjh42]

Actually, for this you would edit /includes/modules/your_template/product_listing.php if you need to change the php coding.

You can get dividers just by adding to your stylesheet:

/* space & border between listing items */
.productListing-odd td, .productListing-even td {
	text-align: left;
	vertical-align: top;
	padding:0.5em;
	margin-bottom: 1em;
	border-bottom: 3px double #aaccbb;
	}

Adjust to taste.

[ckosloff]

Hey Glenn,

Thank you so much for fast reply, as usual.
I am at present unable to test, but will over the weekend.
Will keep you updated.
Best regards.

[ckosloff]

Glenn,

Looks great.
I'll keep toying with it.
No need to modify any PHP files, it is just a style trick.
Thanks!

[ckosloff]

Oops!
I posted too early.
What happens is that individual categories look fine, e.g. small, medium, large, etc.
However, when clicking on All Products, which already has a separator, there are too many.
The description for All Products is wrapped in the double separators.
I would like to know how you see what to modify, do you use Web Developer Toolbar in Firefox?
Thanks!

[gjh42]

Yes, the Web Dev's Information > Display Element Information button is one of my best friends.

The .productListing-odd and .productListing-even classes are used in both product listing and all listing pages. You can restrict them by making the selectors like this:

#productListing .productListing-odd td, #productListing .productListing-even td {
...

[ckosloff]

This last mod. worked like a charm.
Thank you so much!
Time to study CSS in depth...