Need to remove <table> tags [contentMainWrapper etc] and replace with <div> tags

[Paul Randall]

Hi there,

I have inherited a Zen Cart e-commerce website to work on from another developer and looking at the source code there is a single row three column HTML table within the page source. The developer has assured me that he didn't put this markup in the design of the template as he uses CSS for layout so it must be generated by the Zen Cart back end itself.

The table has the ID of "contentMainWrapper"
The left cell has the ID of "navColumnOne"
The middle cell has the ID of "mainContent"
The right cell has the ID of "navColumnTwo"

I have been asked to create a mobile version of the site and was going to hack the CSS and use @media queries to re-lay it out expecting the layout of the site to use <div tags and modern CSS layout techniques and was surprised to find that the main columnar layout is a table.

Is this normal for Zen Cart?

Is there any hack I can do to change this and replace the <table><tr><td> tags with <div> tags in the source somewhere so it's CSS only please guys?

Thanks

Paul

[picaflor-azul]

Hi there,

I have inherited a Zen Cart e-commerce website to work on from another developer and looking at the source code there is a single row three column HTML table within the page source. The developer has assured me that he didn't put this markup in the design of the template as he uses CSS for layout so it must be generated by the Zen Cart back end itself.

The table has the ID of "contentMainWrapper"
The left cell has the ID of "navColumnOne"
The middle cell has the ID of "mainContent"
The right cell has the ID of "navColumnTwo"

I have been asked to create a mobile version of the site and was going to hack the CSS and use @media queries to re-lay it out expecting the layout of the site to use <div tags and modern CSS layout techniques and was surprised to find that the main columnar layout is a table.

Is this normal for Zen Cart?

Is there any hack I can do to change this and replace the <table><tr><td> tags with <div> tags in the source somewhere so it's CSS only please guys?

Thanks

Paul

I would recommend installing the DIY template default and using it to convert the current design to a responsive design.

Thanks,

Anne

[barco57]

The table has the ID of "contentMainWrapper"
The left cell has the ID of "navColumnOne"
The middle cell has the ID of "mainContent"
The right cell has the ID of "navColumnTwo"

That would be stock zen cart, so the previous developer was right, he didn't put them there, they were already there.

[Paul Randall]

Hi Anne,

That sounds way more involved than the client would be willing to pay for. Looking at the CSS the only thing that needs to be done is to remove these <table> tags and replace them with <div> tags and I can create a second CSS with @media queries. I don't need to reinvent the wheel.

Does nobody know where in the ZenCart code these <table> tags are generated please so I can modify the code?

Cheers

Paul

[picaflor-azul]

Hi Anne,

That sounds way more involved than the client would be willing to pay for. Looking at the CSS the only thing that needs to be done is to remove these <table> tags and replace them with <div> tags and I can create a second CSS with @media queries. I don't need to reinvent the wheel.

Does nobody know where in the ZenCart code these <table> tags are generated please so I can modify the code?

Cheers

Paul

Take a look at the DIY responsive template default to see how to accomplish this.

Thanks,

Anne

[keneso]

You find the table tags in the template files, start with includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php

[Paul Randall]

Wow thanks Keneso. I can see the <table tags exactly where you mentioned they would be. I'm going to try to find any CSS that may affect the table although I doubt there will be any then substitute some CSS and left floating divs to see if it breaks everything in the layout. Now this is progress :-)

Thanks for your help and also thanks to everyone else for their suggestions too. :-)

Cheers

Paul

You find the table tags in the template files, start with includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php