Forums / Templates, Stylesheets, Page Layout / Separator in category display

Separator in category display

Locked

Views: 1,308

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
10 Jun 2008, 1:57 AM
#1
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Separator in category display

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.

[argentiniansupermarket.com

](http://argentiniansupermarket.com)

10 Jun 2008, 3:59 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Separator in category display

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

10 Jun 2008, 2:50 PM
#3
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Separator in category display

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.

[argentiniansupermarket.com

](http://argentiniansupermarket.com)

15 Jun 2008, 9:36 PM
#4
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Separator in category display

Glenn,

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

[argentiniansupermarket.com

](http://argentiniansupermarket.com)

15 Jun 2008, 9:43 PM
#5
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Separator in category display

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!

[argentiniansupermarket.com

](http://argentiniansupermarket.com)

15 Jun 2008, 9:56 PM
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Separator in category display

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

17 Jun 2008, 3:40 AM
#7
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Separator in category display

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

[argentiniansupermarket.com

](http://argentiniansupermarket.com)