Grid Layout Assistance Needed

[gjh42]

Yes, that will happen. You need more detailed class tags to be able to specify distinctions between top/left/other elements in the grid. That would involve some recoding. I did some work on it, but ran into the brick wall of div height making it impossible to have a fully automatic flexible height divider system without using table layout. If you are willing to specify a fixed height to the elements, the divider layout you want can be done. I shelved development before doing the detailed coding, but it is not difficult in concept.

To get this layout immediately, you would be best off using Column Divider Pro from Free Addons. It uses lots of table/spacer elements in what seems a clumsy fashion, but it does the job. From what I have seen, it only puts divider lines between the elements, but if it does not have an option to put them around the outside as well, you could add a border to the whole wrapper of listings.


If you want a fully gridded box around the listings, you could make a wrapper div for the listing elements and give that a border-left and border-bottom.

[gee38l]

Yes, that will happen. You need more detailed class tags to be able to specify distinctions between top/left/other elements in the grid. That would involve some recoding. I did some work on it, but ran into the brick wall of div height making it impossible to have a fully automatic flexible height divider system without using table layout. If you are willing to specify a fixed height to the elements, the divider layout you want can be done. I shelved development before doing the detailed coding, but it is not difficult in concept.

To get this layout immediately, you would be best off using Column Divider Pro from Free Addons. It uses lots of table/spacer elements in what seems a clumsy fashion, but it does the job. From what I have seen, it only puts divider lines between the elements, but if it does not have an option to put them around the outside as well, you could add a border to the whole wrapper of listings.


If you want a fully gridded box around the listings, you could make a wrapper div for the listing elements and give that a border-left and border-bottom.

Ok i have just installed the column deivider pro that you recommended and it seems that its squishd my products please have a look at my new products and category products...

Thanks

[gee38l]

Ok i have fixed the squished products, now back to what i wanted to make it look like...

How do i add a box around the item and center it both vertically and horizontally?

Thanks for your patience

[gjh42]

.centerBoxWrapperContents table {border: 1px dotted #555555;}

Adjust as required.

You appear to have gotten the listing elements nicely centered already.

[gee38l]

.centerBoxWrapperContents table {border: 1px dotted #555555;}

Adjust as required.

You appear to have gotten the listing elements nicely centered already.

Ok i added that to the stylesheet but all that does is add a box around the entire products page not the individual products?

[gjh42]

OK... a really close look at the Dealsdirect site (faint lines!) shows that what you are after is not a solid grid, but separate boxes around each product, with space between them.

Sorry for all the running around; all you need for this is to specify the border on .centerBoxContentsProducts, as well as height and a margin:

.centerBoxContentsProducts {border: 1px solid #999999; margin: 3px; height: 260px;}

Since this will make the products add up to wider than the space available, you will need to edit a file to reduce the assigned width of products. I'll have to go look that up and get back.

[gjh42]

In your Column Grid version of /includes/modules/your_template/product_listing.php, find this section:

// Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 0.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
    }
  } 

and change both instances of
floor(100/...) - 0.5
to
floor(100/...) - 1.5

// Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 1.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1.5;
    }
  } 

Adjust the 1.5 as required to work with the margin you want.

There are several ways you can tweak this calculation; experiment if you wish once you understand the logic.

[gee38l]

In your Column Grid version of /includes/modules/your_template/product_listing.php, find this section:

// Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 0.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
    }
  } 

and change both instances of
floor(100/...) - 0.5
to
floor(100/...) - 1.5

// Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 1.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1.5;
    }
  } 

Adjust the 1.5 as required to work with the margin you want.

There are several ways you can tweak this calculation; experiment if you wish once you understand the logic.

Thanks for the advise can i just ask what exactly does the above do? I have been playing around with it for the past hour and i have not seen any changes :S

Also i have any question if you have a look at the picture a have attached of the new products you will see that they dont size properly how can i get them to stay the same size all the time evenly spread vertically and horizontally like the products in my categories and dealsdirect?

[gee38l]

It seems that doing the mod to product listing you mentioned above has made the products go to the left in ie7 and not firefox

[gjh42]

The calculation sets the percent width for the individual products. Changing from 0.5 to 1.5 means only a 1% change (about 5px) per item, so you might not notice it. It will probably make no difference anyway with the Column Divider Pro mod still installed; that change is needed when using the plain Column Layout Grid mod.

The product varying width issue may be due to modifying the CDP code. I don't know how that code works in detail, so can't advise on it. If you still want to use that mod, I suggest you post in its support thread for help; otherwise, uninstall it and install just Column Grid, and see if that clears up the problem. It will give you smaller gutters between the products, at any rate.