Add Space between Products but keep transparency!

[obrien48]

http://www.obriendesign.co.uk/index....f2fviissob0pi0

Hi Everyone!

This should be so simple but I'm killing myself trying to figure it out. I want to add spacing in between the products so that they appear individually with a white background and then a transparent space (showing the yellow background) - the site would then look like a series of blog posts.

I thought I might add a div to wrap the individual data but couldn't figure out where it went in productlisting.php

Tried adding margin to the product image as well but nothing seems to be working. Anyone got any ideas? Thanks in advance AOB

[rstevenson]

Try...

.productListing-data {
     padding-bottom: 25px;
}

Rob

[obrien48]

Try...

.productListing-data {
     padding-bottom: 25px;
}

Rob

thanks for the reply Rob. Padding works fine however it means I still have white butting up together creating one solid background, what I really want is a transparent space in between these white blocks.

I've been trying to find the file where the table that drives the product listing originates so I can wrap it in a div - anyone got any ideas - the developers toolbox isn't offering any help.

[gjh42]

The product listing table is output by /includes/templates/your_template/common/tpl_tabular_display.php.
You would need to edit this line to put space between cells:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="<?php echo 'cat' . $cPath . 'Table'; ?>" class="tabTable">

I've never really used tables for layout, so am not sure how to get vertical spacing but not horizontal spacing... you should be able to look that up in an HTML tutorial.


HTML table elements are not subject to the CSS margin property, so you need to edit the table code.

[gjh42]

From all I can see, there is only one cellspacing dimension possible, which would apply in both directions. Thus this is not going to work for your needs.

There is archaic code commented out around line 175 of product_listing.php to put the description below the rest of the table cells it belongs with; you could uncomment this and change the 'text' => line to eliminate the description output. This would give a cell with a classname which could be styled with CSS, separating the rows of cells with actual information.

[obrien48]

From all I can see, there is only one cellspacing dimension possible, which would apply in both directions. Thus this is not going to work for your needs.

There is archaic code commented out around line 175 of product_listing.php to put the description below the rest of the table cells it belongs with; you could uncomment this and change the 'text' => line to eliminate the description output. This would give a cell with a classname which could be styled with CSS, separating the rows of cells with actual information.

Dude you rock! You pointed me in the right direction and I've been able to put together a work around - and as expected it was soooo simple!

So I added another fixed height <tr> to the tabTable.

Code now reads:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="<?php echo 'cat' . $cPath . 'Table'; ?>" class="tabTable">
<?php
for($row=0; $row<sizeof($list_box_contents); $row++) {
$r_params = "";
$c_params = "";
if (isset($list_box_contents[$row]['params'])) $r_params .= ' ' . $list_box_contents[$row]['params'];
?>
<tr <?php echo $r_params; ?>>
<?php
for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
$c_params = "";
$cell_type = ($row==0) ? 'th' : 'td';
if (isset($list_box_contents[$row][$col]['params'])) $c_params .= ' ' . $list_box_contents[$row][$col]['params'];
if (isset($list_box_contents[$row][$col]['align']) && $list_box_contents[$row][$col]['align'] != '') $c_params .= ' align="' . $list_box_contents[$row][$col]['align'] . '"';
if ($cell_type=='th') $c_params .= ' scope="' . $cell_scope . '" id="' . $cell_title . 'Cell' . $row . '-' . $col.'"';
if (isset($list_box_contents[$row][$col]['text'])) {
?>
<?php echo '<' . $cell_type . $c_params . '>'; ?><?php echo $list_box_contents[$row][$col]['text'] ?><?php echo '</' . $cell_type . '>' . "\n"; ?>
<?php
}
}
?>



</tr>
<tr height="50px"></tr>

Hope this helps someone in the future.

[gjh42]

Glad you got it working.
I believe it is invalid HTML to have a <tr> with no cells in it. If you add a <td> </td> inside it, it should validate so you have no errors introduced.