Product Position - grid layout

[gee38l]

Hey All,

I have installed grid layout mod for products and i have nearly got it to how i want it to look like...

Just one thing i want to do is center the products within the box vertically i have sucesfully got it to center horizontally. Alternatively if thats not possible just shift the product down a few px's

Link: www.truwater.com.au

Can anyone assist?

Thanks in advance!

[focus360]

Do you know html?

Unfortunately you will struggle to do it just by editing the CSS.

However, by editing the template you could put each product image in a Table and give the cell a height (the maximum height of the image). Then valign="center" the cell.

We have done this on one of our websites and it looks good!

[gee38l]

Do you know html?

Unfortunately you will struggle to do it just by editing the CSS.

However, by editing the template you could put each product image in a Table and give the cell a height (the maximum height of the image). Then valign="center" the cell.

We have done this on one of our websites and it looks good!

Im learning html so im not the best at it!

Could you give me some assitance with product image table?

[focus360]

It's actually not in the template file and is PHP. If you are going to try this please BACKUP the two files that we edited:

1. Copy your includes/modules/product_listing.php into includes/modules/YOURTEMPLATENAME/product_listing.php (where YOURTEMPLATENAME is your template override folder)

We then edited the file in our template override folder. on line 217 from the if command to the break command. Heres what we changed it to:

if (isset($_GET['manufacturers_id'])) {
            $lc_text = '<table class="listingimg"><tr><td valign="middle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a></td></tr></table>';
          } else {
            $lc_text = '<table class="listingimg"><tr><td valign="middle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a></td></tr></table>';
          }
        }
        break; 

2. We gave the table a class name "listingimg" so we could mess around with the CSS. In our stylesheet.css we then added the following:

.listingimg{
	text-align:center;
	margin-top:10px;
}
.listingimg td{
	height:160px;
	width:181px;
}
.listingimg img{
	padding:0;
	margin:0;
}

Where height:160px was slightly higher than our image height. Width will depend on the width of each image column, so you can play around with it to see what fits your website.

[gee38l]

It's actually not in the template file and is PHP. If you are going to try this please BACKUP the two files that we edited:

1. Copy your includes/modules/product_listing.php into includes/modules/YOURTEMPLATENAME/product_listing.php (where YOURTEMPLATENAME is your template override folder)

We then edited the file in our template override folder. on line 217 from the if command to the break command. Heres what we changed it to:

if (isset($_GET['manufacturers_id'])) {
            $lc_text = '<table class="listingimg"><tr><td valign="middle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a></td></tr></table>';
          } else {
            $lc_text = '<table class="listingimg"><tr><td valign="middle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a></td></tr></table>';
          }
        }
        break; 

2. We gave the table a class name "listingimg" so we could mess around with the CSS. In our stylesheet.css we then added the following:

.listingimg{
	text-align:center;
	margin-top:10px;
}
.listingimg td{
	height:160px;
	width:181px;
}
.listingimg img{
	padding:0;
	margin:0;
}

Where height:160px was slightly higher than our image height. Width will depend on the width of each image column, so you can play around with it to see what fits your website.

OK i just did what u mentioned above and im not sure it has centered the items vertically....

[focus360]

It looks to me like they have. But can't be sure as your images are almost the same height anyway! So it would not be very noticable. Add maybe 10px to the .listingimg td height. And / or add a padding-top:5px; to the .listingimg td

[focus360]

You could also give the height of the title a fixed height and display block so then all your prices and buy it now buttons will line up nice.

[gee38l]

You could also give the height of the title a fixed height and display block so then all your prices and buy it now buttons will line up nice.

Would you be able to give me some more info in regards to getting the pricing and buy now button to align...?

[gee38l]

Ok i figured it out for the products in the category listing.... Now i just cant get it to work on the homepage with new products for "month" cant seem to find a div to use in the stylesheet can anyone assist?

[gee38l]

Anyone?