DURING THE BETA: This is a support thread for the Responsive Classic template built-in to Zen Cart v1.5.5 beta
Anne
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
.
Zen Cart - putting the dream of business ownership within reach of anyone!
Donate to: DrByte directly or to the Zen Cart team as a whole
Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.
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
.
Zen Cart - putting the dream of business ownership within reach of anyone!
Donate to: DrByte directly or to the Zen Cart team as a whole
Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.
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!
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 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.
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
Thanks,
Anne
Kudos to all 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!
Last edited by dbltoe; 20 Jan 2016 at 01:43 AM.
Are You Vulnerable for an Accessibility Lawsuit?
myZenCartHost.com - Zen Cart Certified, PCI Compatible Hosting by JEANDRET
Free SSL, Domain, and MagicThumb with semi-annual and longer hosting.
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?
Are You Vulnerable for an Accessibility Lawsuit?
myZenCartHost.com - Zen Cart Certified, PCI Compatible Hosting by JEANDRET
Free SSL, Domain, and MagicThumb with semi-annual and longer hosting.
Bookmarks