Column Layout Grid v2.x Support

Hi there!

I am using Column Layout Grid for Product Listing - Version: 2.3.1 on Zen Cart 1.5.1, and it works mostly excellent! BUT, in Internet Explorer 9 - when I hover over the Products, they start to stack on top of each other!?? I'm running ie10, and setting the standards (you know - using F12) to IE9 does NOT make the error occur.. Lowering it to IE7 makes look strange though...

The site is live and the problem can be seen here; (remember it only happens in "true" IE9)

http://www.hvitveis.no/index.php?main_page=index&cPath=1

just mouse over the Products, and it will start to jump around... any help is most welcome - and again - thank you for a great plugin! :D

Case closed... it was actually a width:100% in itemTitle that caused the problem... hehe.. who would have known, eh....? :cool:

Hello

I have this plugin working on my site, the only issue I have images from different height and the grid dont look nice, I theres a way with css to make the grid height always the same??

my site its https://www.cobanipa.com.mx/store

Add to your stylesheet```
.centerBoxContentsProducts>a:first-child {display: block; height: 100px;}
.centerBoxContentsProducts {margin-top: 1.0em; border-bottom: 1px solid #dedede;}

Hi All

I'm having some trouble finding where to change the style of the sorter links.

Sort by:
Item Name-
Price

and

Sort by:
Item Name+
Price

In my template the text is pretty small, there's no space between the + or - and the text, and the listbox is to narrow. In classic or one of the other templates they look better, but unfortunately I'm stuck with this one. Viewing code does not display any of that text. My CSS snooper in Webmaster tools doesn't see the style of the listbox or the text either. Can't find it!

I'd like to resize and bold the text at a minimum, and changing the text to pics would be best. I certainly want the DESC ASC toggle to be clearer.

Can anyone tell me where I'd make these edits?

Thanks!

-Pat

The desc/asc toggle text is an admin setting; you can change it from -/+ to whatever you want, including a space if desired.
For styling the sorter, see post #47 in this thread, and the thread it refers to.

I'm using Zen Cart V 1.5.0

My problem is this.. I installed the Column Layout Grid.. I have it set to show 3 products each row.. The width is messed up somewhere and I can't find out where to change this.. here is the cakes page: http://theposhbox.net/ZenCart/index.php?main_page=index&cPath=5

See the third product is almost over the right hand side of the site. Each of those columns are: <td width="31.5%"> which is correct. I think where it went wrong is this: The <div class="centerBoxWrapperContents"> is fine, then next is: <table width="100%" cellspacing="15" cellpadding="1" border="0" align="center"> which is WIDER than the centerBoxWrapperContents, which then makes the <td width="31.5%"> spill over to the right..

I hope that made sense.. so I think I have to somehow change my Table width of 100%? to maybe 80% Or is there a different fix?

Thanks for any help, Pamela

There should not be any tables in grid view. This probably means that you have a mod file missing, as the stock files point only to table handling and not to div handling as grid view needs.

I'm so so confused.. because when I look at other stores using this grid, I see the same setup with the table.. It's like this:

<div class="centerBoxWrapperContents"> <table width="100%" cellspacing="15" cellpadding="1" border="0" align="center"> <tbody> <tr> <td width="31.5%" valign="top" align="center"> <td class="vDotLine" rowspan="2"></td> <td width="31.5%" valign="top" align="center"> <td class="vDotLine" rowspan="2"></td> <td width="31.5%" valign="top" align="center"> </tr> </tbody> </table> </div>

Pamela

This is what the source code for CLG grid view should look like: ```html

<div id="gridSorter">Sort by: <ul><li class="item"><a href="http://localhost/zc151/index.php?main_page=index&cPath=21&page=1&sort=2a" title="Sort products descendingly by Item Name" class="productListing-heading">Item Name-</a></li><li class="item"><a href="http://localhost/zc151/index.php?main_page=index&cPath=21&page=1&sort=3a" title="Sort products ascendingly by Price" class="productListing-heading">Price</a></li><li class="item"><a href="http://localhost/zc151/index.php?main_page=index&cPath=21&page=1&sort=4a" title="Sort products ascendingly by Model" class="productListing-heading">Model</a></li></ul></div>

<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://localhost/zc151/index.php?main_page=product_info&cPath=21&products_id=28"><img src="images/gift_certificates/gv_5.gif" alt="Gift Certificate $ 5.00" title=" Gift Certificate $ 5.00 " width="100" height="80" class="listingProductImage" /></a><br /><h3 class="itemTitle"><a href="http://localhost/zc151/index.php?main_page=product_info&cPath=21&products_id=28">Gift Certificate $  5.00</a></h3><div class="listingDescription">Purchase a Gift Certificate today to share with your family, friends or business associates!</div><br />$5.00<br /><br /><a href="http://localhost/zc151/index.php?main_page=index&cPath=21&sort=20a&action=buy_now&products_id=28"><img src="includes/templates/template_default/buttons/english/button_buy_now.gif" alt="Buy Now" title=" Buy Now " width="60" height="15" class="listingBuyNowButton" /></a><br /><br /><br />GIFT005</div>
<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://localhost/zc151/index.php?main_page=product_info&cPath=21&products_id=29"><img src="images/gift_certificates/gv_10.gif" alt="Gift Certificate $ 10.00" title=" Gift Certificate $ 10.00 " width="100" height="80" class="listingProductImage" /></a><br /><h3 class="itemTitle"><a href="http://localhost/zc151/index.php?main_page=product_info&cPath=21&products_id=29">Gift Certificate $ 10.00</a></h3><div class="listingDescription">Purchase a Gift Certificate today to share with your family, friends or business associates!</div><br />$10.00<br /><br /><a href="http://localhost/zc151/index.php?main_page=index&cPath=21&sort=20a&action=buy_now&products_id=29"><img src="includes/templates/template_default/buttons/english/button_buy_now.gif" alt="Buy Now" title=" Buy Now " width="60" height="15" class="listingBuyNowButton" /></a><br /><br /><br />GIFT 010</div>
<div class="centerBoxContentsProducts centeredContent back" style="width:32.5%;"><a href="http://localhost/zc151/index.php?main_page=product_info&cPath=21&products_id=30"><img src="images/gift_certificates/gv_25.gif" alt="Gift Certificate $ 25.00" title=" Gift Certificate $ 25.00 " width="100" height="80" class="listingProductImage" /></a><br /><h3 class="itemTitle"><a href="http://localhost/zc151/index.php?main_page=product_info&cPath=21&products_id=30">Gift Certificate $ 25.00</a></h3><div class="listingDescription">Purchase a Gift Certificate today to share with your family, friends or business associates!</div><br />$25.00<br /><br /><a href="http://localhost/zc151/index.php?main_page=index&cPath=21&sort=20a&action=buy_now&products_id=30"><img src="includes/templates/template_default/buttons/english/button_buy_now.gif" alt="Buy Now" title=" Buy Now " width="60" height="15" class="listingBuyNowButton" /></a><br /><br /><br />GIFT025</div>

<br class="clearBoth" /> ``` What sites have you seen that have the tables? I would like to know how this happens.

Never mind, I know what the issue is. You have installed Column Divider Pro, which puts the grid into tables so it can work reliably for all browsers, even old IE versions. ```

<td class="vDotLine" rowspan="2"></td> ``` The tables are no longer required for any modern browser; I tried rewriting it to use divs with CSS instead of tables a few years ago, but IE was still not up to speed and would have required extensive (javascript, which I do not know much of) special handling to make it work.

In stylesheet_dotline.css, add this rule and change the width as required: ```
.centerBoxWrapperContents table {width: 95%;}

Sure, umm, I got the idea to do the Grid Layout from viewing almost all of Picaflor's Free templates.. one of them is here:
http://(sorry, site offline)/zc150/

But I did download the actual mod from the plugin section, what I'm using right now is not one of her templates, it's just the default that I've been altering in a new folder to keep the original in tact.

http://www.zen-cart.com/downloads.php?do=file&id=3

Maybe I have the wrong mod? Are there 2 column layout grid mods?

Pamela

I'd like to install this, but the version I downloaded says it works with version 1.3.9h and above. Do you have a version that will work with 1.3.9a?

Thanks,

John

I'm pretty certain that the current version will work with any ZC version back to v1.3.8. There is a minor change to product_listing.php during the v1.3.9 series, but it did not actually affect processing in any significant way (if I recall correctly).

Pamela -
The Column Divider mod used/uses an old form of Column Grid, heavily modified, to make its dividers work.
There is at least one other mod, SNAF, which uses recently written code to do similar jobs as Column Grid but for all types of listings (featured, specials, etc.) Single Listing Template also covers different listings with one style, though I forget whether it allows or uses the grid layout.

Ok I'm stuck!

I've been trying to find an answer on this forum, but I'm lost. I want to try and tidy-up the margins/spacing and all that etc..

Can anyone point me to the correct CSS to get this looking right?

http://www.webextend.co.uk/bristolfashion/index.php?main_page=index&cPath=1

Many thanks
Logicalstep

You can improve the spacing of the price and button with something like this in stylesheet_flexible_product_listing.css:```
.listingPrice {float: left; margin-left: 11em; line-height: 6em;} /demo setup/
.listingButtonGroup {float: right; width: 40%;margin-right: 3em; border-left: 1px solid #999999;} /demo setup/

The odd positioning is caused by the fact that you deleted the setting for .clearBoth in your stylesheet (line 331):```
.clearBoth {
}
``` This needs to be ```
.clearBoth {
clear: both;
}

That's fantastic! Thanks gjh42.

I'll probably be back with more questions :P

Logicalstep

What is up zenners. I'm working on an offline site so I can't post examples but I'm sure that you all know what I'm about to talk about. I'm using column layout grid and I would really like it if each product in each table row at least had their quantity boxes aligned. I have roughly 3000 products and can't take the time to make sure that each and every image is the same exact size. I'm just looking for a more professional look with my products and I have spent an entire day trying out css tricks and modifying the product_listing.php file. Any suggestions would be appreciated, just want a clean looking site like we all do :)

Thanks in advance.

---

so oddly enough, firefox is the only browser not liking that bit of code. But in my search for more answers I found a really old post that can better explain what I'm trying to achieve. Found HERE. The only exception being that I would like the product descriptions to also align with each other. I have already limited them to one line of text each. Let me know if this helps at all or if I have only confused you more.

Thanks!

---

^^^^^^^From previous post, found HERE.