adding space between products

[recordshow]

Hello.
I am new to Zencart and was wondering how I can go about adding some space between products on the list page below so that it doesn't look like one big run-on mess. Also it might be nice to somehow align the image with the description a little better so that it's easier to tell what image goes where etc.. Jusy trying to make it look a little better overall. Any input is appreciated. Try not to be too harsh ;)


http://www.sandiegorecordshow.com/so...ndex&cPath=1_4

[recordshow]

Actually after clicking around my page a little more I realized that I like the layout for the "new products" page so maybe there is a way to just copy it or something?

[gjh42]

There isn't a simple way to copy the new products layout. You would need to be familiar with the code to try it.

There are a couple of ways to modify the product listing layout.
This definition added to the end of your stylesheet.css will give some space around each element of your product listing, and put a line under each item in the list:

.productListing-data {
padding: 0.5em;
border-bottom: 1px solid #33CC99;
}

Change the numbers as you wish; eliminate the border-bottom if you don't want the line. You can just have padding-bottom if you want.

For more complete control of spacing, dweingart submitted a nice simple mod which can be seen here. It allows product listing columns to be addressed separately and positioned/styled.

[recordshow]

Thanks for your reply.
I used the code you sent and it helped a little but the text is still too narrow.

Sadly I don't understand the link you sent me for the modification. I downloaded the "diif.txt" file from that thread but I'm not sure what that is or where it goes etc..

[gjh42]

The modifications go in /includes/modules/your_template/product_listing.php.

(around line 67)

  $list_box_contents[0][$col] = array('align' => $lc_align,
                                      'params' => 'class="productListing-heading"',
                                      'text' => $lc_text );
} 

add
col' . ($col + 1) . '
as shown:

  $list_box_contents[0][$col] = array('align' => $lc_align,
                                      'params' => 'class="productListing-heading col' . ($col + 1) . '"', //  dweingart mod
                                      'text' => $lc_text );
} 

and (around line 170)

      $list_box_contents[$rows][$col] = array('align' => $lc_align,
                                              'params' => 'class="productListing-data"',
                                              'text'  => $lc_text);
    } 

add
col' . ($col + 1) . '
as shown:

      $list_box_contents[$rows][$col] = array('align' => $lc_align,
                                              'params' => 'class="productListing-data col' . ($col + 1) . '"', //  dweingart mod
                                              'text'  => $lc_text);
    } 

In your stylesheet, you can then declare styling/position for any column number.