change column layout product listing to 3 table cells

Hi ,
I want to change the mod for column layout.
It's all in Divs but I want to change it to 3 td columns so that the longest one determines the overall height of the row.

Has anybody done this?

Are you using tpl_tabular_display.php or tpl_columnar_display.php?

hey Steve,
Im using the modified product_listing.php that came with the module for columnar display. This is creating DIVs. I've it set to 3 divs per row . Well I actually took out the percentage and gave them a fixed width.

See here

I need to change them to table cells because the tallest in each row needs to influence the hight of the others in the row.

It's all in Divs but I want to change it to 3 td columns so that the longest one determines the overall height of the row.
Do you want this to be fixed height? or dynamic based on the content?

You can assign a height to the div FYI

Hi Kobra,
its needs to be dynamic based on the content. A fixed height leaves too much white space if the content is not enough to fill it.

have look here

I need to change them to table cells because the tallest in each row needs to influence the hight of the others in the row.
Wanting this as dynamic but then based upon the tallest is going to be a tricky call

I have not seen this done, but I am half blind

In div's it would take a div def for the row and 100% as the height and the columns remain dynamic and hopefully expand to fill the div height or something along that line...take some hacking

Or do you want the borders not to all be the same per row?

Hi Kobra,

I have been looking for a solution to this for a few weeks now. Looking at div hacks using background images. But you have to know the height of the tallest div. I don't think it is possible. I've converted the featured products and new products modules to use table cells, so all 3 products per row are the same height.

Unfortunately, I'm going to have to convert the product listing to table cells also. I know somebody in here has done that for the div columns, but I can't find it now or they didn't post up the solution.

Remind me to post the solution for converting the featured products to table cells

Since we already opened this topic can I ask what I need to edit to widen the divs as right now my products are grouped too closely together with the 3 column display . Thanks!
~Renee

Redcinamn,

Please a url to the page you are asking about

Hi Renee,
i removed $col_width from

$list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"' . ' ',

Well at least I think it was there!

then I set the width of .centerBoxContentsProducts in my stylesheet to what i needed it. In my case 188px.

Here is the URL example

http://www.moppetfrocks.com/shop/index.php?main_page=index&cPath=63

Thanks
~Renee

hi Renee,
The reason they are not extending is because you second column, the right hand table column #navColumnTwo is still present.

I'm guessing from the website that there will be nothing needed in the right hand column. You can set the width of this in the admin, or you could set its width in the stylesheet. Hope you understand.

In admin I have the right column boxes set to o

Column Width - Right Boxes 0px
~Renee

Hi,
If you look at your source code you will see the following.

<td id="navColumnTwo" class="columnRight" style="width: 150px">

have you gone to Configuration -> Layout settings

make sure

Column Width - Right Boxes 0px

otherwise find the file that creates that right column, I think its tpl_main_page.php, and edit it. Make sure you place it into your overrides directory

In admin/layout settings I have the right column boxes set to o

** Column Width - Right Boxes 0px**

and in tpl_main_page.php

mine reads: <td id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">

~Renee

have you them set to '0' or set to 'o'

down a few lines there is also

Column Width - Right 0px

check that also.

You could just remove

style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>"

The best way to disable the right column completely is in tpl_main_page.php in includes/YOUR_TEMPLATE/common/tpl_main_page.php.

Near the top of the file are four lines:

• Note: header can be disabled in the tpl_header.php<br />
• Note: footer can be disabled in the tpl_footer.php<br />
• <br />
• $flag_disable_header = true;<br />
• $flag_disable_left = true;<br />
• $flag_disable_right = true;<br />
• $flag_disable_footer = true;<br />
• <br />
• // example to not display right column on main page when Always Show Categories is OFF<br />
• <br />
• if ($current_page_base == 'index' and $cPath == '') {<br />
• $flag_disable_right = true;<br />
• }<br />
• <br />

Simply set the flag_disable_right to true (and make sure it's not commented out). This willl disable the right column on every page.

To disable it on only certain pages, read the comments in the heading of tpl_main_page.php:

• // example to not display right column on main page when Always Show Categories is OFF<br />
• <br />
• if ($current_page_base == 'index' and $cPath == '') {<br />
• $flag_disable_right = true;<br />
• }<br />
• <br />
• example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br />
• <br />
• if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br />
• $flag_disable_right = true;<br />
• }<br />

Got it, there is more than one option in product layout to put in the 0px

there is column width right boxes and column width right, I missed the last. I did not have to alter the php at all.

Thanks
~Renee

Renee & All,

About left or right column removal:

There is no need to set this, be it left or right column to "0" or to resort to editing the files as has been suggested...

If you want to disable the left or right or both columns:

admin > config > layout settings > Column Left Status - Global > set to "0"

admin > config > layout settings > Column Right Status - Global > set to "0"

hi kobra,
I never noticed that before. I must set that now.
Thanks