Featured Products Listing Overlapping Images

Hi Everyone,

It's been a while since my last Zen Cart build and I've got myself a bit stuck. My plan is to only use a few parts of Zen to create a simple print my artwork based site. As I only need a few images on the homepage I opted for the 'featured products' box to appear, I've been able to resize everything and layout is basically there however as I need large images (275px square) everything is overlapping!

I've tried adding margin and padding to '.centerBoxContentsFeatured' to no avail and to be honest I'm stumped!

Link here

Also, I don't want the listing to 'wrap' over, instead I want a horizontal scroll bar to appear but only vertical is appearing at the moment!

Any advice of where to look would be great.

The link you gave doesn't work ...

lat9:

The link you gave doesn't work ...

Sorry here it is

https://www.crearty-kids.co.uk

I've completely broken it now! Probably with the dozen add ons I've loaded into the site trying to make it work!

Many thanks for your help :yes:

You're right, it's quite the broken site! Do you have a backup so you can get the site back to kind-of broken?

lat9:

You're right, it's quite the broken site! Do you have a backup so you can get the site back to kind-of broken?

Lol I did warn you! I've been playing with it and managed to get it back to state when I first posted. The ahem 'images' are just place holders for now so it's all about the spacing. In fact my plan is the strip out all the text and prices, replace the images with a buy it now button which adds directly to the cart and then replace the button with my 'product' image so one click to the cart. Phew, talk about the long way round!

OK, step#1: Go to your admin's Configuration->Index Listing and change Featured Products Columns per Row to something like 3 or 4 instead of the 6 that it currently is. You can't cram 275px worth of image into 16% of the page width!

lat9:

OK, step#1: Go to your admin's Configuration->Index Listing and change Featured Products Columns per Row to something like 3 or 4 instead of the 6 that it currently is. You can't cram 275px worth of image into 16% of the page width!

Ok done.

Can't I just add a scroll bar (horizontal) to the featured products div? What is the piece of code that calculates the width of featured products content divs? Can't it just be set to a static fixed pixel size?

obrien48:

Ok done.

Can't I just add a scroll bar (horizontal) to the featured products div? What is the piece of code that calculates the width of featured products content divs? Can't it just be set to a static fixed pixel size?
The featured products module (/includes/modules/featured_products.php (copied to /includes/modules/YOUR_TEMPLATE/featured_products.php before you edit it) contains the calculations.

lat9:

The featured products module (/includes/modules/featured_products.php (copied to /includes/modules/YOUR_TEMPLATE/featured_products.php before you edit it) contains the calculations.

Thanks so much. Last thing. How do I stop the listings 'rolling over' to the next line?

Set your featured products per row to the total number you want to use, then add to your stylesheet```
#indexHomeBody #indexDefault {overflow: auto;}
#featuredProducts {width: 1920px !important;}

You can also eliminate the PHP file modification (one less thing to maintain) by adding to your stylesheet ```
.centerBoxContentsFeatured {width: 275px !important;}

gjh42:

Set your featured products per row to the total number you want to use, then add to your stylesheet```
#indexHomeBody #indexDefault {overflow: auto;}
#featuredProducts {width: 1920px !important;}

Ok. Wow! What a stress :wacko:

Firstly thankyou SO much for all your help.

Here's how I/we did it!

1. Set your columns to row in admin>configuration>IndexListing to your required amount (I wanted 6).
2. Go to (/includes/modules/featured_products.php (copied to /includes/modules/YOUR_TEMPLATE/featured_products.php before you edit it)

**Find:**
    $col_width = floor(100/$num_products_count);
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS);

**Change to:**
    $col_width = floor(**YOUR_CALCULATED TOTAL NEEDED WIDTH**/$num_products_count);
  } else {
    $col_width = floor(**YOUR_CALCULATED TOTAL NEEDED WIDTH**/SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS);

3. Go to /includes/templates/template_default/tpl_modules_products_featured_listing.php   COPY TO /includes/templates/YOUR_TEMPLATE/templates/tpl_modules_products_featured_listing.php

**Find:**
<div class="centerBoxWrapper" id="featuredProducts">
<?php
/**
 * require the list_box_content template to display the product
 */
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
?>
</div>

**Add a div inside so it looks like this:**
<div class="centerBoxWrapper" id="featuredProducts"><div class="featuredProductsHolder">
<?php
/**
 * require the list_box_content template to display the product
 */
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
?>
</div></div>

4. Go to templates/YOUR TEMPLATE/css/stylesheet

Add:
.featuredProductsHolder {width: [YOUR TOTAL WIDTH] !important; height: [YOUR HEIGHT FOR THE SINGLE ROW] !important;}

.centerBoxWrapper { height:[YOUR CHOICE]; width:[OF SITE/CENTER COLUMN; overflow: auto;}


That's it! In the end it was quite easy just took time getting there! Now for part 2. 
[A link to my site](http://www.crearty-kids.co.uk)

Good luck everybody and happy Zenning!

obrien48:

Ok. Wow! What a stress :wacko:

Firstly thankyou SO much for all your help.

Here's how I/we did it!

1. Set your columns to row in admin>configuration>IndexListing to your required amount (I wanted 6).
2. Go to (/includes/modules/featured_products.php (copied to /includes/modules/YOUR_TEMPLATE/featured_products.php before you edit it)

Find:
$col_width = floor(100/$num_products_count);
} else {
$col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS);

Change to:
$col_width = floor(YOUR_CALCULATED TOTAL NEEDED WIDTH/$num_products_count);
} else {
$col_width = floor(YOUR_CALCULATED TOTAL NEEDED WIDTH/SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS);

3. Go to /includes/templates/template_default/tpl_modules_products_featured_listing.php COPY TO /includes/templates/YOUR_TEMPLATE/templates/tpl_modules_products_featured_listing.php

Find:

<div class="centerBoxWrapper" id="featuredProducts"> <?php /** * require the list_box_content template to display the product */ require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); ?> </div>

Add a div inside so it looks like this:

<div class="centerBoxWrapper" id="featuredProducts"><div class="featuredProductsHolder"> <?php /** * require the list_box_content template to display the product */ require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); ?> </div></div>

4. Go to templates/YOUR TEMPLATE/css/stylesheet

Add:
.featuredProductsHolder {width: [YOUR TOTAL WIDTH] !important; height: [YOUR HEIGHT FOR THE SINGLE ROW] !important;}

.centerBoxWrapper { height:[YOUR CHOICE]; width:[OF SITE/CENTER COLUMN; overflow: auto;}

That's it! In the end it was quite easy just took time getting there! Now for part 2.
A link to my site

Good luck everybody and happy Zenning!

Sorry something I forgot: in > /includes/modules/YOUR TEMPLATE/featured_products.php

**Find: **
class="back"' . ' ' . 'style="width:' . $col_width .'%;">

Remove the bold part.

I'm glad it is working for you, though I think you made it considerably more complicated than it needed to be. When I added the two stylesheet rules I posted to your page in Firebug, it got the same functionality as you asked for with no extra coding.

gjh42:

I'm glad it is working for you, though I think you made it considerably more complicated than it needed to be. When I added the two stylesheet rules I posted to your page in Firebug, it got the same functionality as you asked for with no extra coding.

Hmmm, didn't work for me. Nevermind, got it working and learned a thing or two!

Thanks for all your help.