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

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.

DrByte:

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

rbarbour:

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.

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:

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 344 php #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
#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 144```php
#cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
#pinfo-right{float:left;width:49%;}
```get change to```php
#cart-box{width:49%;float:right;margin-bottom:2em;}
#pinfo-right{float:right;width:49%;}
```Lines 371 and 372```php
#cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
#pinfo-right{width:100%;}
```get changed to```php
#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
#cart-box{width:51.5%;}
```becomes```php
/*#cart-box{width:51.5%;}*/
```commenting out the un-required call.
Lines230-235 ```php
#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
#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!

dbltoe:

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 344 php #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
#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 144```php
#cart-box{width:50%;float:right;padding:15px 0;margin-bottom:2em;}
#pinfo-right{float:left;width:49%;}
```get change to```php
#cart-box{width:49%;float:right;margin-bottom:2em;}
#pinfo-right{float:right;width:49%;}
```Lines 371 and 372```php
#cart-box{width:100%;padding:15px 0;margin-bottom:2em;}
#pinfo-right{width:100%;}
```get changed to```php
#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
#cart-box{width:51.5%;}
```becomes```php
/*#cart-box{width:51.5%;}*/
```commenting out the un-required call.
> Lines230-235 ```php
#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
#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

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?

dbltoe:

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

Sorry that I haven't had time to investigate this myself.
I was basically wondering if anyone out there has tested the effect of using any solution from the CSS_read_me.txt in a responsive setup. And, if so, what measures needed to be taken (if any) to maintain responsiveness. Does the responsive.css eliminate the need to add any responsive calls to a p_??.css driven page? Do we need a p_??mobile.css and p??_tablet.css with the responsive_classic template?
We don't have a test site or customer using any of these and we start our round of rodeos next week through mid- to late-April.
Even if nothing is needed, wouldn't it be beneficial to have the file there? With or without responsive-driven additions, knowledge is power.

This is the easiest answer I got!

All the responsive CSS files:

responsive.css
responsive_default.css
responsive_mobile.css
responsive_tablet.css

are loaded via the html_header so they get loaded on every page with the exception for the popup_image and popup_image_additional pages.

On Desktops the popup_image and popup_image_additional window will resize to the images full width, for tablet and mobile devices the page simply open in a new window.

The above responsive CSS files are loaded via the html_header so that they are loaded last and can override any and all rules within the normal stock CSS structure, so no, you do not need separate p_??.css, p_??mobile.css and p??_tablet.css files. Simply adding your css to manipulate elements on specific devices should be put in the responsive_default.css file and device specific responsive_mobile.css or responsive_tablet.css file.

I do agree, better documentation is needed.

dbltoe:

Sorry that I haven't had time to investigate this myself.
I was basically wondering if anyone out there has tested the effect of using any solution from the CSS_read_me.txt in a responsive setup. And, if so, what measures needed to be taken (if any) to maintain responsiveness. Does the responsive.css eliminate the need to add any responsive calls to a p_??.css driven page? Do we need a p_??mobile.css and p??_tablet.css with the responsive_classic template?
We don't have a test site or customer using any of these and we start our round of rodeos next week through mid- to late-April.
Even if nothing is needed, wouldn't it be beneficial to have the file there? With or without responsive-driven additions, knowledge is power.

rbarbour:

This is the easiest answer I got!

All the responsive CSS files:

responsive.css
responsive_default.css
responsive_mobile.css
responsive_tablet.css

are loaded via the html_header so they get loaded on every page with the exception for the popup_image and popup_image_additional pages.

On Desktops the popup_image and popup_image_additional window will resize to the images full width, for tablet and mobile devices the page simply open in a new window.

The above responsive CSS files are loaded via the html_header so that they are loaded last and can override any and all rules within the normal stock CSS structure, so no, you do not need separate p_??.css, p_??mobile.css and p??_tablet.css files. Simply adding your css to manipulate elements on specific devices should be put in the responsive_default.css file and device specific responsive_mobile.css or responsive_tablet.css file.

I do agree, better documentation is needed.

Yes, what he said :hug:

There is a great readme with some helpful hints included that was included with the new version of the DIY template default. Maybe Raymond can post this or it can be included in the package?

Thanks,

Anne

Anne,

The newest version of the DIY template default hasn't been submitted yet, The dev team is still making changes in git so I was going to wait so I could change the readme if needed.

I guess I could submit a 1.5.4readme version and add 1.5.5 later.

picaflor-azul:

Yes, what he said :hug:

There is a great readme with some helpful hints included that was included with the new version of the DIY template default. Maybe Raymond can post this or it can be included in the package?

Thanks,

Anne

In the stylesheet_colors.css I'm finding what appears to be duplicated elements. e.g.```
/bof background colors/
#mainWrapper, #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, [B]#mainWrapper,[/B] #popupAdditionalImage, [B]#contentMainWrapper,[/B] [B]#headerWrapper[/B], .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {background:#fff;}
input:focus, select:focus, textarea:focus, [B]#mainWrapper,[/B] .specialsListBoxContents:hover, .centerBoxContentsSpecials:hover, .centerBoxContentsAlsoPurch:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsNew:hover, .categoryListBoxContents:hover, .sideBoxContentItem:hover, .productListing-odd, #pinfo-right, #sendSpendWrapper {background:#f4f4f4;}

In the second instance #mainWrapper is now styled background:#f4f4f4

This can't be right, right?

lucidlee:

In the stylesheet_colors.css I'm finding what appears to be duplicated elements. e.g.```
/bof background colors/
#mainWrapper, #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, [B]#mainWrapper,[/B] #popupAdditionalImage, [B]#contentMainWrapper,[/B] [B]#headerWrapper[/B], .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {background:#fff;}
input:focus, select:focus, textarea:focus, [B]#mainWrapper,[/B] .specialsListBoxContents:hover, .centerBoxContentsSpecials:hover, .centerBoxContentsAlsoPurch:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsNew:hover, .categoryListBoxContents:hover, .sideBoxContentItem:hover, .productListing-odd, #pinfo-right, #sendSpendWrapper {background:#f4f4f4;}

> In the second instance #mainWrapper is now styled background:#f4f4f4
> 
> This can't be right, right?

Thank you for the catch.  I'll get an update submitted.

Thanks,

Anne

rbarbour:

The newest version of the DIY template default hasn't been submitted yet, The dev team is still making changes in git so I was going to wait so I could change the readme if needed.

I guess I could submit a 1.5.4readme version and add 1.5.5 later.
I think the core components that affect the templates in v155 are pretty much completed in git ... unless you've got further suggestions we should incorporate. At this point we have no scheduled plans to make further changes in that area.

Ah while in OCD mode here's a few more```
/bof background colors/#popupAdditionalImage {background:#f1f1e0;}
#popupAdditionalImage {background:none;}

/bof font colors/
.productListing-rowheading a {color: #ffffff;}
.productListing-rowheading a {color: #ffffff;}

.productPriceDiscount {color:#333;}
.productPriceDiscount {color:#ff0000;}

#navCatTabs li a:hover {color: #ffffff;}
#navCatTabs li:hover {color: #ffffff;}
.categoryListBoxContents a:hover {color:#05a5bc;}
.categoryListBoxContents:hover a {color:#05a5bc;}

Ran into a problem with additional images being larger than the productMainImage when viewed on an iPhone6 in portrait. I noticed that the portrait portion of the responsive_mobile.css has```php
.additionalImages img{width:90%;margin:0 auto;}
.additionalImages{float:left !important;}

Commenting out those two lines fixed the problem.
It would be nice to have them side by side but, that's a horse of a different waterhole.:P

Thanks for the update!

I do have further suggestions but not specific to this template nor even the template system or this particular version of zen cart. More to do with future extensions to the core to better handle 3rd party frameworks and mobile only features. I will fork 1.5.5 and submit the pull requests for those as time permits but I will fork and submit the pull request for the readme later today.

DrByte:

I think the core components that affect the templates in v155 are pretty much completed in git ... unless you've got further suggestions we should incorporate. At this point we have no scheduled plans to make further changes in that area.