Product Listing Layout Changes

[gunnerdaddy]

Hey all,
I'm trying to really work over the product listing pages on my site. What I have now is:




What I'm trying to achieve is something like this:



For the life of me, I haven't found anything in the forums about changing the TABLE that controls this, or even where it's located. The only thing that I know, is that you can't get this done making changes to the stylesheet.css. Any help would greatly be appreciated. Thanks, Mark

[schoolboy]

You may get the result you need using the following CSS...

Just copy it off this posting, and paste it at the BOTTOM of your stylesheet.css .

Remove/Edit declarations, and adjust colours, etc as per your requirements - this set of declarations was taken off a site that uses delicate shades of pink!

/*Product Listing Settings*/

.productListing-heading {
  font-size: 10px;
  font-weight: bold;
  color: #9933ff;
  padding: 3px;
  height: 20px;
}

.productListing-heading a {
  font-size: 10px;
  font-weight: bold;
  color: #9933ff;
  padding: 3px;
  height: 20px;
}

.productListing-heading a:hover {
  font-size: 10px;
  font-weight: bold;
  color: #3093df;
  padding: 3px;
  height: 20px;
}

#productsListingTopNumber, #productsListingListingTopLinks {
    padding-bottom: 4px
    }

#productsListingBottomNumber, #productsListingListingBottomLinks {
    padding-top: 4px
    }

TD.productListing-heading{
  background-color: #abbbd3;
  /*background-image: url(../images/tile_back.jpg);*/
}

TD.productlisting {
  border:1px solid #9a9a9a;
}

TD.productListing-data {
  font-size: 10px;
  padding: 5px;
}

TR.productListing-odd, TR.upcomingProducts-odd {
  background: #ffffff;
}

TR.productListing-even, TR.upcomingProducts-even, .productsNotifications {
  background: #F9EDFF;
}

TD.productListing-data-description-odd {
  background: #ffffff;
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #cc99ff;
}

TD.productListing-data-description-even {
  background: #C9F1CF;
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #cc99ff;
} 

[gunnerdaddy]

Thanks schoolboy. That got the background shading on every other line item working good. Now, I just need to figure out how to arrange the elements of each line item.

[gunnerdaddy]

Should I be looking at using the "column layout grid" module? Can I set it up to use one column, and will it let me move the elements around?

[nidkolio]

Should I be looking at using the "column layout grid" module? Can I set it up to use one column, and will it let me move the elements around?

Try this one
http://www.zen-cart.com/forum/showthread.php?t=100003
It worked for me. You can download it from post 50.
It will set for you classes for all elements from the product listing and you will be able to move it with css.
Also i think it include layout grid module.
Good luck

[schoolboy]

My css above won't apply to a column/grid listing layout.

But if you use firefox with web-developer, configuring the declarations is really quick and easy.