styling product listing pages with column layout grid

I think the question is irrelevant, since TPP applies to the product info page, not the product listing page. They are on different playgrounds.

Just wondering if anyone has used this mod with version 1.3.9 yet?

Regards,

Mike.

How do I get the Title to appear above the image instead of below?

Set the element sort order in Configuration > Product Listing.

Great!!! This is just what I was looking for, this is perfect, it's exactly what I was looking for! THANKS!

/Jacob

Is there anyway I can get a border/box around my products? With just the mod, they look kind of bunched together.

You can use stylesheet rules to get borders and margins pretty much anywhere. Seeing your site live will help us know which elements you need to style.

gjh42:

You can use stylesheet rules to get borders and margins pretty much anywhere. Seeing your site live will help us know which elements you need to style.

Thank you for the quick response. I ended up finding the solution myself (always happens after asking first :rolleyes:). The Column Divider Pro module did the trick.

Is it possible to set width of cells by specifying pixels (px;)?
/Jacob

Add to your stylesheet

#listCell0-0 {width: 170px;}
#listCell0-1 {width: 144px;}
etc...

The price/add column has a width setting in admin > Configuration > Product Listing.

...Unless by "cells" you mean the individual products in the grid layout. That is a totally different element.

Thanks! I am using your great add-on to style the product listing layout. It works terrific.

When I specify width (i.e. for .listingImageCell) only percentage values styles 'em (no px) do you know why?

//Jacob

I just saw .listingImageCell is part of #listCell0-0... sorry..

gjh42:

Set the element sort order in Configuration > Product Listing.

I installed your mod on my site (1.3.9g) and added some of the other mods you've listed in these threads. It looks terrific.

Thank you for all of your hard work for a great mod.

I have 3 columns, 21 rows per page. I have the product name above the image and the model number under the image, the price under that and then 1 of 2 things under the price. Either an "Add" box or a "More Info ..." line.

I have 3 questions.

1. Why am I getting either the add box or the info line? It does not seem to be a function of how much text I have in the product description. Some items have a little and some have a lot. How can I make it show one or the other?

2. Is there a way to not discplay eiither of the items?

3. Is there a way to increase the spacing between rows?

Thanks

Tom

gjh42:

You can use stylesheet rules to get borders and margins pretty much anywhere. Seeing your site live will help us know which elements you need to style.

Take a look at this page on my dummy site. I need each of those products to be inside a box and with a separation between each one. Also, is it possible to enlarge that product image?

For the boxes, I tried setting up borders in the stylesheet with .centerBoxContentsProducts and .centeredContent, but neither worked.

I was able to enlarge the product images myself (Admin>Configuration>Images), but I still need help with the borders.

Sorry for a third reply in a row, but I managed to figure it out using the web developer tool for Firefox. You need to install the Column Divider Pro to add space and then modify .centerBoxContentsProducts in your stylesheet for a border.

You can also change the width each product takes, by editing the calculation in product_listing.php or by specifying it in the stylesheet, and not have to install CDP if you don't need all of its dividers. It's a matter of taste...

agile4 - You will get "add to cart" if the product has no attributes; if there are attributes, then a choice has to be made in the product info page before it can be added. Downloads use attributes, and even if there is only one choice, it still needs to go to the info page.

You should be able to hide those links with your stylesheet; I am away from my reference copies of files now so can't tell you which rules to use.You may be able to get the increased spacing between rows by adding margin-top to .centerBoxContentsProducts {}

gjh42:

You can also change the width each product takes, by editing the calculation in product_listing.php or by specifying it in the stylesheet, and not have to install CDP if you don't need all of its dividers. It's a matter of taste...

I think your way may be better. Where is the calculation in product_listing.php? What would I change in my stylesheet?

Thank you.

I can't tell you the exact line numbers at the moment, but there are two lines close together that each contain floor(, and you can change the 100 or the -1 as you like.

1. tell me if I'm in the right thread (there seems to be two that are dealing with similar issues).

2. I'm using the grid layout and would i like to customize the appearance of the individual product listings in the grid using CSS.

I'm fairly competent at CSS, but I'm having a little trouble finding the correct elements to edit the appearance of.

Here is what I would like to accomplish:

• Add padding/ margin between the individual products listed in the grid (really either will suit my purpose, just need some spacing between each listing so they don't run together as much).

• Declare a consistent size for the grid listed products, and add a background image to them.

• Put the price and "Buy" image on the same line instead of having them vertically stacked.

Any help/ pointers/ directions would be awesome.

k