Column Divider Lite

[qhome]

NEW CONTRIB!

Title: Column Divider Lite
version: 0.1
Author: QHome
Date: 6/7/2007


//-------------------------
What does this contrib do:
//-------------------------

This is a spin-off of the divider line I used in the Designer Monthly Boxes. Instead of limiting the divider to only the monthly specials, new products, and featured products, this contrib will make a divider for ALL pages that use the tpl_columnar_display.

It is quite simple to use. Just add the included tpl_columnar_display.php file to your template folder and it will override the default zen-cart one without changing any core files.

This will give divider lines for the following modules/pages:

- New Products on the main page
- Special Products on the main page
- Featured Products on the main page
- Special Products on the Specials... link
- Additional images on the product page
- Customers Also Purchased on the product page
- Cross Sell on the product page (note that Cross Sell is a separate contrib that would need to be installed separately.)


Note: If you are already using the Designer Monthly Boxes (DMB) contrib, these can both work together. Keep in mind that the other features of DMB are to allow custom positioning of the image and text within the box. This contrib only calculates the width and adds lines using the default image and text positioning. These 2 contribs both use the same stylesheet_dotline.css file and delim_v.gif image so no worries about overwriting.

//===============================================================

[HeathenMagic]

Hello Qhome,

I love this mod. it looks great. Will send you some Kudos when it comes to my next donation round.

Sincerely,

Russ

[qhome]

Glad you like it! Looks good on your site :)

[jettrue]

Hey there...

I'm having an issue with this mod, where there isn't enough padding between the columns, so the divider isn't showing.

Now, I noticed in your designer monthly boxes contribution, you create a table around each product, and the table has cellpadding and cellspacing and such, which allows the vertical line to show through.

However, if you simply install the column divider lite without designer monthly boxes (unless I've screwed something up), this doesn't happen, therefore the vertical lines aren't showing up. So, for a New Products with two products listed, each product div is occupying 50%, so there is no room for the vertical line.

I got around this by adding these lines to tpl_columnar_display.php:

$col_width = str_replace("50", "49", $col_width);
$col_width = str_replace("33", "32", $col_width);

The horizontal line doesn't show either, I fixed that by adding

padding:1px 0;

to .hDotLine.

[qhome]

Hey there...

I'm having an issue with this mod, where there isn't enough padding between the columns, so the divider isn't showing.

Now, I noticed in your designer monthly boxes contribution, you create a table around each product, and the table has cellpadding and cellspacing and such, which allows the vertical line to show through.

However, if you simply install the column divider lite without designer monthly boxes (unless I've screwed something up), this doesn't happen, therefore the vertical lines aren't showing up. So, for a New Products with two products listed, each product div is occupying 50%, so there is no room for the vertical line.

I got around this by adding these lines to tpl_columnar_display.php:

$col_width = str_replace("50", "49", $col_width);
$col_width = str_replace("33", "32", $col_width);

The horizontal line doesn't show either, I fixed that by adding

padding:1px 0;

to .hDotLine.

Yea, its more of a browser specific thing, but technically you are correct. I did have people running into the padding thing with horizontal lines as well. Your method will work for people with 2 or 3 columns but it can get hairy when adding more.

I will see what else can be done but your method is probably practical if I add the replace for up to 6 columns.


Thanks

[jettrue]

Yea, its more of a browser specific thing, but technically you are correct. I did have people running into the padding thing with horizontal lines as well. Your method will work for people with 2 or 3 columns but it can get hairy when adding more.

I will see what else can be done but your method is probably practical if I add the replace for up to 6 columns.


Thanks

I saw the issue on Firefox and IE6. Didn't check IE7.

The other thing to do, is to make a change in the module files for the all the different product listings. For example, in modules/new_products.php, you can change:

    $col_width = floor(100/$num_products_count);
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS);
  }

to

    $col_width = floor(100/$num_products_count) -.5;
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS)-.5;
  }

So that 50% becomes 49.5%, 33% becomes 32.5%, etc. I actually normally do the above on all zen cart installs, as I like to be able to add some padding between the columns. But I'm designing a new template, and want to change as few files as possible.

I found that adding left and right padding to .vDotLine works in Firefox, but not in IE, and it seems that either the option in this post, or the one above, is the best for cross browser issues.

[qhome]

I saw the issue on Firefox and IE6. Didn't check IE7.

The other thing to do, is to make a change in the module files for the all the different product listings. For example, in modules/new_products.php, you can change:

    $col_width = floor(100/$num_products_count);
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS);
  }

to

    $col_width = floor(100/$num_products_count) -.5;
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS)-.5;
  }

So that 50% becomes 49.5%, 33% becomes 32.5%, etc. I actually normally do the above on all zen cart installs, as I like to be able to add some padding between the columns. But I'm designing a new template, and want to change as few files as possible.

I found that adding left and right padding to .vDotLine works in Firefox, but not in IE, and it seems that either the option in this post, or the one above, is the best for cross browser issues.

Isn't there some sort of height: 1px hack for IE or something. I can't stay current with all the hacks

[awhfy99]

I was wondering if I might be doing something wrong or is it not meant to include the category view? It works fairly fine on the new products, etc., just not centered, but when I view a category (I use the column option to display my products), the dividers are not there. I do notice that there is no cell padding, even when I do a display by row, the images are crunched together. To make sure it wasn't the IH, I am importing some of the images from my live site.

[awhfy99]

I was wondering if I might be doing something wrong or is it not meant to include the category view? It works fairly fine on the new products, etc., just not centered, but when I view a category (I use the column option to display my products), the dividers are not there. I do notice that there is no cell padding, even when I do a display by row, the images are crunched together. To make sure it wasn't the IH, I am importing some of the images from my live site.

I did find a resolution for the padding and line separation of products when the row option is selected. I added

.productListing-data {
padding: 0.5em;
border-bottom: 4px solid #000000;
}

in the stylesheet.css, but this does nothing when the column option is applied.

[jheir16]

Hey there...

I'm having an issue with this mod, where there isn't enough padding between the columns, so the divider isn't showing.

Now, I noticed in your designer monthly boxes contribution, you create a table around each product, and the table has cellpadding and cellspacing and such, which allows the vertical line to show through.

However, if you simply install the column divider lite without designer monthly boxes (unless I've screwed something up), this doesn't happen, therefore the vertical lines aren't showing up. So, for a New Products with two products listed, each product div is occupying 50%, so there is no room for the vertical line.

I got around this by adding these lines to tpl_columnar_display.php:

$col_width = str_replace("50", "49", $col_width);
$col_width = str_replace("33", "32", $col_width);

The horizontal line doesn't show either, I fixed that by adding

padding:1px 0;

to .hDotLine.

Where exactly in the code did you add these lines?