Grid Layout Assistance Needed

[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?