Responsive DIY Template Default for v1.5.x

[rbarbour]

Being uploaded today!

This is simply the template_default template made responsive, I wanted to upload this for those of you that like to design your own templates.

[picandnix]

Excellent.

[rbarbour]

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

This template package comes fully loaded with (NOTHING)!

This template package should only be used for reference in making your own template responsive or as a starting point for designing your own template. There a no added plugins or any bells and whistles included in this template package.

The ONLY (4) files needed on the catalog side are within the (common folder).

I included code to disable left & right column on the login page and right column on the shopping cart page (don't panic)! You should know where to change the code. HINT, the tpl_main_page.php file.

You do need to (RUN) the sql_patches.sql code in your admin (Tools > Install SQL Patches) to add a configuration to activate the responsive code (Doing this overrides the stock Column Width - Left/Right (Boxes) configuration).

I have also included the ADMIN layout_controller.php file (which is optional), this will allow you to hide/show side boxes at min-width from the ADMIN > TOOLS > LAYOUT BOXES CONTROLLER page.

If you choose not to use the side box min-width controller you do not need to include the ALTER TABLE query code within the sql_patches.sql file or the (2) files within the modules folder.

This code has been tested by others and myself but doesn't mean you will get the same results. Please remember going responsive alters the layout in many ways and many (APPEARANCE) plugins will most definitely need CSS tweaking.

A DEMO of what to expect can be found @ http://www[.]zcadditions[.]com/responsive_default/

[uswebworx]

A DEMO of what to expect can be found @ http://www[.]zcadditions[.]com/responsive_default/

404 NOT found demo!

[rbarbour]

404 NOT found demo!

The DEMOS will be back up by days end, just doing some internal upgrades.

[dw08gm]

1. Where are the .offset css classes used?

2. I see your /common/tpl_main_page.php retains the original table structure for its layout, whereas if the table layout was converted into divs and a fluid design approach adopted (see attached), much of the responsive code could be removed.

In my example,

• column left floats left with width prescribed in %
• column right floats right with width prescribed in %
• centre column does not need a prescribed width as it is determined by % margins equal to the side column % widths.

I understand the admin Column_Width setting refers to cases listed in tpl_main_page.php which in turn draws upon the widths of the side columns prescribed the responsive.css file. However, with my fluid arrangement, as the screen size reduces, the actual px width of the side columns also reduces, until a single critical width is reached when the largest sidebox will no longer fit snugly within its respective side column. Notwithstanding that this critical width can be made to vary by manipulating the screen display using Ctrl - or + on a PC, the implication is that responsive code only has to test for a single critical width. At default Ctrl 0 display, my critical width is 575px for my three column fluid layout (before the horizontal scrollbar appears or overlapping occurs), which means all css @media (min-widths > 600px) could be dispensed with. Meanwhile I have max width set in the body tag at 1200px.

Hope this helps.

[godt]

I hope this question hasn't been asked, but I am interested in playing around with the responsive template stuff, and I'm wondering if I understand the install properly. Is it the case that if I run the sql, and it flicks on the Layout Settings switch, if I come to a point where I don't want to use it, I can turn it off there. Is this correct?

[frank18]

I hope this question hasn't been asked, but I am interested in playing around with the responsive template stuff, and I'm wondering if I understand the install properly. Is it the case that if I run the sql, and it flicks on the Layout Settings switch, if I come to a point where I don't want to use it, I can turn it off there. Is this correct?

You may want to do a search for 'responsive template' (select Search Titles Only) and post your question there.

Cheers from the Sunny Coast

[rbarbour]

I hope this question hasn't been asked, but I am interested in playing around with the responsive template stuff, and I'm wondering if I understand the install properly. Is it the case that if I run the sql, and it flicks on the Layout Settings switch, if I come to a point where I don't want to use it, I can turn it off there. Is this correct?

Just change the value back to "0" Make sure any CSS changes you make are made in the responsive.css file

[godt]

Great. Thanks. And thanks for the responsive template stuff. Worth playing about with.