DURING THE BETA: This is a support thread for the Responsive Classic template built-in to Zen Cart v1.5.5 beta
Anne
Printable View
DURING THE BETA: This is a support thread for the Responsive Classic template built-in to Zen Cart v1.5.5 beta
Anne
I'd like to be the first to give a HUGE THANKS to Anne at Picaflor-Azul for the time and hard work she put into the new Responsive Classic template that's included in the (very soon-to-be-released) v1.5.5 release of Zen Cart.
And special thanks also to Ray Barbour for the extensive work done to prepare the Responsive DIY components that have been built-in to this template.
Please show picaflor-azul and rbarbour your thanks for their contributions by supporting their businesses and commercial services offered:
http://www.picaflor-azul.com
http://zcadditions.com
Template Tips - Responsive-Classic
The Responsive-Classic template is an HTML5 template, designed to display content appropriately according to the device the customer is browsing with. It adapts ("responds" responsively) to the size and orientation (portrait vs landscape) of the device the visitor is using to access your site.
a) Buttons are CSS-driven. Unlike previous templates all the buttons in this template are CSS-based. You no longer need to create graphics/images for every possible button in your store. But, you'll need to enable CSS buttons in your Admin, via: Admin->Configuration->Layout Settings->Use CSS Buttons? = True
b) Changing/Customizing Colors - The colors for all the components have been conveniently located in one place: stylesheet_colors.css
c) Responsive Component Behavior - There are separate stylesheets which drive the responsive components of mobile vs tablet vs desktop. They are named responsive.css, responsive_default.css, responsive_mobile.css, responsive_tablet.css
I'd like to thank Chris (DrByte) and the rest of the Zen Cart development team, first and foremost for including the Responsive DIY components in the v1.5.5 release. So THANK YOU!
Second, I think the entire Zen Cart development team has gone above and beyond in showing the community that they are here, they are listening, they are taking everyone's (suggestions and rants) into consideration, they are committed and devoted.
Any business owner should only be proud to have a back-end platform that has so many great and dedicated developers! :bigups:
I also want to thank all the Zen Cart contributors for their continued support and use of the Responsive DIY components, a special thanks to Anne at Picaflor-Azul :hug: for her dedication and unbelievable devotion to working with, improving on and implementing the Responsive DIY components into her unique and truly impressive Responsive Templates.
v1.5.5 is a huge stepping stone for what v1.6.0 will bring, stay tuned.
Quote:
Originally Posted by DrByte
Thank YOU, Raymond for your incredible contribution to the community. I love working with your code and especially the flexibility and options it gives me as a designer. With your code as a base I never worry that there will be problems with native or zen cart functionality. I am happy an honored to collaborate with you :smile:Quote:
Originally Posted by rbarbour
Thanks,
Anne
Kudos to all:bigups: It's great to see things moving the way they are.
I have just a few things to suggest you take a look at. The new extension for chrome browser (Responsive Web Design Tester ) allows me to see the code better than anything I've found before. What I see as a minor problem in regular mode has to do with the product info settings in three stylesheets. #pinfo-right and #cart-box or the two IDs that start us down the road to change.
It all starts with a difference in the stylesheet between the two IDs, their width, and their padding. The standard stylesheet.css shows around line 344The problem is that this setting doesn't allow the #pinfo-right to follow the #cart-box properly. My fix is to change the line 344 code toPHP Code:#pinfo-right{float:right;width:55%;padding:20px 0 0 0;}
This makes the two play well together with the desktop/laptop view.PHP Code:#pinfo-right{float:right;width:52.5%;padding:1em;}
However, now that we've messed with the stylesheet.css, it requires that the responsive_mobile and responsive_tablet stylesheets be modified next. Otherwise, we get some strange looks.
First the responsive_mobile.
Lines 143 and 144get change toPHP Code:#cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
#pinfo-right{float:left;width:49%;}
Lines 371 and 372PHP Code:#cart-box{width:49%;float:right;margin-bottom:2em;}
#pinfo-right{float:right;width:49%;}
get changed toPHP Code:#cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
#pinfo-right{width:100%;}
This fixes both the landscape and portrait "look" for mobile phones.PHP Code:#cart-box{padding:15px 0;margin-bottom:2em;}
#pinfo-right{padding: 15px 0;}
Then comes responsive_tablet.
Line 74becomesPHP Code:#cart-box{width:51.5%;}
commenting out the un-required call.PHP Code:/*#cart-box{width:51.5%;}*/
Lines230-235are changed toPHP Code:#pinfo-right{float:left;width:49%;}
#pinfo-left{float:none;}
#pinfo-left{width:100%;}
#productAttributes{width:90%;margin:0 auto;}.wrapperAttribsOptions input[type=text]{width:75%;}
#cart-box{padding:15px 0;margin-bottom:30px;}
as a lot of the portrait calls were repeats of or in opposition to other stylesheet calls.PHP Code:#pinfo-right{float:right;width:50%;}
/*#pinfo-left{float:none;}
#pinfo-left{width:100%;}*/
#productAttributes{width:90%;margin:0 auto;}.wrapperAttribsOptions input[type=text]{width:75%;}
/*#cart-box{padding:15px 0;margin-bottom:30px;}*/
This may look like at lot was incorrect BUT, truth was that the original calls in the stylesheet.css caused the "trickle-down" glitches.
Hope this helps someone out there. Sure is easier to work with changes with the way it's set up in 1.5.5!
Thank you for posting ;) I'll take a look and if all is well, get these changes included.Quote:
Originally Posted by dbltoe
Thanks,
Anne
I find that when expressing widths as percentages, it sometimes pays to also express the horizontal components of padding and margin (and occasionally even border) as percentages.
I notice that the CSS_read_me.txt is not added to the responsive_classic css folder. Are there plans for some examples in the responsive_classic to show how to do these things in a responsive template?
What sort of examples would you like to see?Quote:
Originally Posted by dbltoe
Thanks,
Anne