Page 1 of 6 123 ... LastLast
Results 1 to 10 of 52
  1. #1
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Idea or Suggestion BETA feedback for Responsive-Classic in v155-beta

    DURING THE BETA: This is a support thread for the Responsive Classic template built-in to Zen Cart v1.5.5 beta

    Anne

  2. #2
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    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.

  3. #3
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    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.

  4. #4
    Join Date
    Feb 2010
    Location
    Syracuse, NY
    Posts
    2,159
    Plugin Contributions
    17

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    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.

    Quote Originally Posted by DrByte View Post
    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

  5. #5
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    Quote Originally Posted by rbarbour View Post
    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

  6. #6
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,106
    Plugin Contributions
    11

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    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 344
    PHP Code:
    #pinfo-right{float:right;width:55%;padding:20px 0 0 0;} 
    The 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 to
    PHP Code:
    #pinfo-right{float:right;width:52.5%;padding:1em;} 
    This makes the two play well together with the desktop/laptop view.

    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 144
    PHP Code:
    #cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
    #pinfo-right{float:left;width:49%;} 
    get change to
    PHP Code:
    #cart-box{width:49%;float:right;margin-bottom:2em;}
    #pinfo-right{float:right;width:49%;} 
    Lines 371 and 372
    PHP Code:
    #cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
    #pinfo-right{width:100%;} 
    get changed to
    PHP Code:
    #cart-box{padding:15px 0;margin-bottom:2em;}
    #pinfo-right{padding: 15px 0;} 
    This fixes both the landscape and portrait "look" for mobile phones.

    Then comes responsive_tablet.
    Line 74
    PHP Code:
    #cart-box{width:51.5%;} 
    becomes
    PHP Code:
    /*#cart-box{width:51.5%;}*/ 
    commenting out the un-required call.
    Lines230-235
    PHP 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;} 
    are changed to
    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;}*/ 
    as a lot of the portrait calls were repeats of or in opposition to other stylesheet calls.

    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.

  7. #7
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    Quote Originally Posted by dbltoe View Post
    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 344
    PHP Code:
    #pinfo-right{float:right;width:55%;padding:20px 0 0 0;} 
    The 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 to
    PHP Code:
    #pinfo-right{float:right;width:52.5%;padding:1em;} 
    This makes the two play well together with the desktop/laptop view.

    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 144
    PHP Code:
    #cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
    #pinfo-right{float:left;width:49%;} 
    get change to
    PHP Code:
    #cart-box{width:49%;float:right;margin-bottom:2em;}
    #pinfo-right{float:right;width:49%;} 
    Lines 371 and 372
    PHP Code:
    #cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
    #pinfo-right{width:100%;} 
    get changed to
    PHP Code:
    #cart-box{padding:15px 0;margin-bottom:2em;}
    #pinfo-right{padding: 15px 0;} 
    This fixes both the landscape and portrait "look" for mobile phones.

    Then comes responsive_tablet.
    Line 74
    PHP Code:
    #cart-box{width:51.5%;} 
    becomes
    PHP Code:
    /*#cart-box{width:51.5%;}*/ 
    commenting out the un-required call.
    Lines230-235
    PHP 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;} 
    are changed to
    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;}*/ 
    as a lot of the portrait calls were repeats of or in opposition to other stylesheet calls.

    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.

    Thanks,

    Anne

  8. #8
    Join Date
    Sep 2008
    Location
    DownUnder, overlooking South Pole.
    Posts
    976
    Plugin Contributions
    6

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    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.

  9. #9
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,106
    Plugin Contributions
    11

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    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?

  10. #10
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Default Re: Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

    Quote Originally Posted by dbltoe View Post
    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?

    Thanks,

    Anne

 

 
Page 1 of 6 123 ... LastLast

Similar Threads

  1. Stock by Attributes 5.0 Beta (for v1.5.0)
    By creinold in forum All Other Contributions/Addons
    Replies: 364
    Last Post: 15 Mar 2017, 11:13 PM
  2. v154 ZCA Responsive CSS Template Framework (BETA)
    By rbarbour in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 29 Mar 2016, 08:49 PM
  3. v155 [Closed] FEEDBACK ON BETA of v1.5.5
    By DrByte in forum Bug Reports
    Replies: 460
    Last Post: 17 Mar 2016, 08:49 PM
  4. Community feedback invited for v155-beta [now closed]
    By DrByte in forum Zen Cart Release Announcements
    Replies: 1
    Last Post: 11 Feb 2016, 01:38 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR