Responsive DIY Template Default for v1.5.x

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.

Excellent.

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/

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?

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?

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

Cheers from the Sunny Coast

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? Just change the value back to "0" Make sure any CSS changes you make are made in the responsive.css file

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

godt:

Great. Thanks.

NP

godt:

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

Hope so, haven't gotten to much feedback from the forums but everyone else is eaten it up!

rbarbour:

Hope so, haven't gotten to much feedback from the forums but everyone else is eaten it up!

Working with it...slowly.

Hi Raymond

Just a newbie question, How does the browser or phone know what size the screen is or is this done in a dynamic environment.

also do you need to do a new site/store.

Thankyou for the contribution.
Peter

tenthilltoys:

Hi Raymond

Just a newbie question, How does the browser or phone know what size the screen is or is this done in a dynamic environment.

The traditional (HTML TABLES) that stock Zen Cart uses is converted to (DIV's) only in 1 file, the tpl_main_page.php

By using (DIV's) we are able to use CSS to control the widths of the (3) main columns, the left column, the center column and the right column.

CSS media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device (width of device) the site is being displayed on and all expressions in the media query are true.

To fully understand I recommend taking 5 minutes to Google "css media queries".

I also include the meta name=viewport in the html_header.php file to help with the width resizing based on width of device.

To fully understand I recommend taking 5 minutes to Google "viewport meta tag".

I only suggest doing research because it will help you understand how the content on your website is moved around, re-sized and changed about.

tenthilltoys:

also do you need to do a new site/store.

The code provided has been proven to work on existing templates, simply merging the code shouldn't affect your templates current layout.

Running the sql file adds an ADMIN configuration to activate (convert) the HTML Tables to DIV's

Some sites will convert easier than others, this depends allot on the (APPEARANCE) modules installed, any added fixed widths set in your stylesheet or hard coded in your PHP files.

I recommend coping your site to a sub folder and testing that way.

tenthilltoys:

Thankyou for the contribution.
Peter

Your most welcome!

How would one go about limiting the max width of the store display but retain responsive shrinking of the total width?

Reason for this question is that I have a 1600-something wide monitor which makes the store look too stretched. In fact, it looks quite funny when fully extended :laugh:

Cheers / Frank

frank18:

How would one go about limiting the max width of the store display but retain responsive shrinking of the total width?

By using the available media queries within the responsive.css file.

find towards the bottom of that css file:
@media (min-width:1200px){.row{margin-left:-5px;*zoom:1;}

.onerow-fluid controls the wrapper around the left, center and right column. However my code will only allow one to alter the code greater than 1200px (currently). More media queries can always be added

find:
.onerow-fluid{width:100%;*zoom:1;}

change to:
.onerow-fluid{width:1200px;*zoom:1;}

this should prevent that wrapper from extending past 1200px

to further customize, you may want to also stop your header and footer from extending past 1200px, to do this you would have to add right below .onerow-fluid{width:1200px;*zoom:1;}:

div#headerWrapper,div#navSuppWrapper{width:1200px;} /stock Zen Cart Classes/ID's/

frank18:

Reason for this question is that I have a 1600-something wide monitor which makes the store look too stretched. In fact, it looks quite funny when fully extended :laugh:

Cheers / Frank

I bet it does! :laugh:

rbarbour:

By using the available media queries within the responsive.css file.

find towards the bottom of that css file:
@media (min-width:1200px){.row{margin-left:-5px;*zoom:1;}

.onerow-fluid controls the wrapper around the left, center and right column. However my code will only allow one to alter the code greater than 1200px (currently). More media queries can always be added

find:
.onerow-fluid{width:100%;*zoom:1;}

change to:
.onerow-fluid{width:1200px;*zoom:1;}

this should prevent that wrapper from extending past 1200px

to further customize, you may want to also stop your header and footer from extending past 1200px, to do this you would have to add right below .onerow-fluid{width:1200px;*zoom:1;}:

div#headerWrapper,div#navSuppWrapper{width:1200px;} /stock Zen Cart Classes/ID's/

I bet it does! :laugh:

Too easy... thanks for the hints, makes perfect sense (what else :D)

Cheers / Frank

frank18:

Too easy... thanks for the hints, makes perfect sense (what else :D)

Cheers / Frank

Q. You using the code to convert existing template or to create a new one?

rbarbour:

Q. You using the code to convert existing template or to create a new one?

A. neither - just curious for future reference, need to know what to do when the time comes to convert an existing template

Great work as always - thanks a mile!

frank18:

A. neither - just curious for future reference, need to know what to do when the time comes to convert an existing template

Great work as always - thanks a mile!

Keep me posted, still awaiting some feedback, thanks and your welcome!

rbarbour:

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

404 NOT found demo!

uswebworx:

404 NOT found demo!

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

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.