Responsive Sheffield Blue v2.0

I just submitted a completely new, updated version of the template package. The template has been updated to use the latest version of the DIY Template Default by rbarbour. Special thanks to him for putting together the framework for this responsive package. This latest version uses the advanced PHP Mobile Detect Script to serve up the optimized layout based on device. Also, thanks to DivaVocals for the AddtoAny zen cart plugin. Please see the readme.html file for a full list of credits for the package.

See the new live demo here:

http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=index&template_switch_id=responsive_sheffield_blue

Attachment #15266

Features:

* Flexible design perfect for any type of ecommerce store

* Fully compliant with Google's Mobile Friendly rules

* Super easy 3 step install!

* Responsive 2 or 3 column display--single column home page layout

* Optimized Drop Down Navigation for hand held devices

* Font Awesome CSS icons

* CSS Buttons

* Responsive Home Page slideshow

* Responsive Mega Menu

* Add your slide show images and home page banners, set their links, enable/disable images/links, and set open in new window easily, and add captions using the admin banner manager.

* Home page Responsive Full Width Tabs for New, Featured, and Specials

* AddtoAny social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest Pin it button, and 300+ Sharing Services)

* Custom footer featuring a footer menu with customer service, and useful links (ez pages), integrated, and links to your Facebook, Twitter, Youtube, Pinterest, and Instagram.

* Customized product info page layout

* Responsive lightbox for product images, and lightbox gallery for additional product images

* Responsive Full Width Tabs for product description, details, and reviews

* Product reviews show on the product info page

* "View All" option on the product listing pages

* Easily modify the footer using the zen cart admin

* Mobile friendly quantity changer on the product info pages

* Cross Browser tested in Firefox, IE11, IE10, IE9, IE8, Google Chrome, Opera, and Safari.

* Tested using emulators for: iPhone6, iPhone6 Plus, iPhone 5, iPhone 4, iPhone 3GS, iPad Retina, Nexus 4, Nexus 5, Galaxy Nexus, Nexus S, Nexus 10, Nexus 7, Vega No. 6, Vega R3, HTC One, HTC One Mini, HTC Evo, Xperia Z, Xiaomi Mi3, Xiaomi Mi 2, Ascend Mate2, Ascend G6, Lenovo K900, Lenovo A390, ZTE Grand S, ZTE Grand X, Galaxy Note4, Galaxy S5 - Note3, Galaxy S3 - Note2, Galaxy Note1, Galaxy S2 - S1, Galaxy Tab S, G3, G2, Optimus G Pro, Optimus G, Optimus View, G Pad 8.3
W3C Valid XHTML and CSS

* Comes with the following modules installed: Column Layout Grid, About Us Page, Back to Top, Responsive Flexslider, Bestsellers Thumbnails, Flexible Footer Menu, Responsive Full Width Tabs, DG Reveiws on Product Info Page, Contact Us Add Subject, Zen Colorbox, Mobile Friendly Quantity Changer, Slimmenu Responsive Mega Menu
Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

* Fully compatible with versions 1.5x.

Please post any bugs or questions to this thread.

Thanks,

Anne

I'm now running my store in 1.5 I'm still having the problem of my subcategory listing where the item image, product name, and price/add to cart are being smashed together. They are in 3 columns but it's like the items are all too large for the columns. Any ideas? this is my only problem with it now and I really like the template!

Here's a screenshot from my Iphone 5sAttachment #15267

Wow, great new look for the Sheffield Blue. Bummed that I just finished modifying the old one. Thank you Ann for another good looking one.

stedman:

Here's a screenshot from my Iphone 5sAttachment #15267

The template is not designed to be used with the rows view, only columns. If you want to use rows you will have to do some customization.

Thanks,

Anne

mydanilo:

Wow, great new look for the Sheffield Blue. Bummed that I just finished modifying the old one. Thank you Ann for another good looking one.

Yes, this new version really is a lot more advanced than the old version. I would recommend cloning your cart, uploading the new version, and then merging in your changes.

Thanks,

Anne

Wow that's the look I like. Thanks I'm still getting a strange layout on my phone. The "buy now" is in a strange placement and the price is gone. Any suggestions? I really like this template.

stedman:

Wow that's the look I like. Thanks I'm still getting a strange layout on my phone. The "buy now" is in a strange placement and the price is gone. Any suggestions? I really like this template.

I would strongly recommend upgrading to the newly updated package. It will fix any layout problems you are having.

Thanks,

Anne

Hi Anne,
I figured it all out. The template is awesome! Just what I was looking for.
Thanks

stedman:

Hi Anne,
I figured it all out. The template is awesome! Just what I was looking for.
Thanks

I am happy that you figured it out ;)

Thanks,

Anne

Looking a bit at the differences from 1.1 to 2.0. There are some issues with going from full screen to reduced width. Just before it jumps to the full fluid width, it screws up the menu item Contact us over the search box. Also it is kind of odd that when you make the window more narrow, that it jumps to a wider width. Layout jumping around. Could this be adjusted that when the switch happens it switches up/down to the same width?

Another difference where I can't find my way around is at full width display where you see the background with the menu and side box heading decorations, where is the overlap set in the CSS? Used to be .leftBoxHeading margin. How is it done now? I think I would like to remove the decorations and overhang in the menu and sideboxes. Kind of strip it down a bit.

mydanilo:

Looking a bit at the differences from 1.1 to 2.0. There are some issues with going from full screen to reduced width. Just before it jumps to the full fluid width, it screws up the menu item Contact us over the search box. Also it is kind of odd that when you make the window more narrow, that it jumps to a wider width. Layout jumping around. Could this be adjusted that when the switch happens it switches up/down to the same width?

Another difference where I can't find my way around is at full width display where you see the background with the menu and side box heading decorations, where is the overlap set in the CSS? Used to be .leftBoxHeading margin. How is it done now? I think I would like to remove the decorations and overhang in the menu and sideboxes. Kind of strip it down a bit.

This is not an issue. The new version uses php mobile detect to serve up the correct layout. You will not see it by making your browser window smaller. You can view on your actual devices or use these urls with an online emulator like http://troy.labs.daum.net/



http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=index&template_switch_id=responsive_sheffield_blue&display_mode=isMobile

http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=index&template_switch_id=responsive_sheffield_blue&display_mode=isTablet

http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=index&template_switch_id=responsive_sheffield_blue&display_mode=isDesktop



Thanks,

Anne

Yes, I see what you are saying. The issue as I described only happens if one resizes the browser window to something smaller or bigger. But still, could this be adjusted so it does not jump bigger suddenly when it switches?

How about the other thing? Where is the overlap set in the CSS? Used to be .leftBoxHeading margin. How is it done now?

mydanilo:

Yes, I see what you are saying. The issue as I described only happens if one resizes the browser window to something smaller or bigger. But still, could this be adjusted so it does not jump bigger suddenly when it switches?

How about the other thing? Where is the overlap set in the CSS? Used to be .leftBoxHeading margin. How is it done now?

I think that I set the width to 1600pixels wide for it to move to full screen. You can change this to your liking in the responsive_default.css

All of the background images for the ribbons have been removed in favor of pure css. You can use your chrome and the web developer tools to take a closer look at the code that makes the ribbons.

Thanks,

Anne

picaflor-azul:

I just submitted a completely new, updated version of the template package. The template has been updated to use the latest version of the DIY Template Default by rbarbour. Special thanks to him for putting together the framework for this responsive package. This latest version uses the advanced PHP Mobile Detect Script to serve up the optimized layout based on device. Also, thanks to DivaVocals for the AddtoAny zen cart plugin. Please see the readme.html file for a full list of credits for the package.

See the new live demo here:

http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=index&template_switch_id=responsive_sheffield_blue

Attachment #15266

Features:

* Flexible design perfect for any type of ecommerce store

* Fully compliant with Google's Mobile Friendly rules

* Super easy 3 step install!

* Responsive 2 or 3 column display--single column home page layout

* Optimized Drop Down Navigation for hand held devices

* Font Awesome CSS icons

* CSS Buttons

* Responsive Home Page slideshow

* Responsive Mega Menu

* Add your slide show images and home page banners, set their links, enable/disable images/links, and set open in new window easily, and add captions using the admin banner manager.

* Home page Responsive Full Width Tabs for New, Featured, and Specials

* AddtoAny social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest Pin it button, and 300+ Sharing Services)

* Custom footer featuring a footer menu with customer service, and useful links (ez pages), integrated, and links to your Facebook, Twitter, Youtube, Pinterest, and Instagram.

* Customized product info page layout

* Responsive lightbox for product images, and lightbox gallery for additional product images

* Responsive Full Width Tabs for product description, details, and reviews

* Product reviews show on the product info page

* "View All" option on the product listing pages

* Easily modify the footer using the zen cart admin

* Mobile friendly quantity changer on the product info pages

* Cross Browser tested in Firefox, IE11, IE10, IE9, IE8, Google Chrome, Opera, and Safari.

* Tested using emulators for: iPhone6, iPhone6 Plus, iPhone 5, iPhone 4, iPhone 3GS, iPad Retina, Nexus 4, Nexus 5, Galaxy Nexus, Nexus S, Nexus 10, Nexus 7, Vega No. 6, Vega R3, HTC One, HTC One Mini, HTC Evo, Xperia Z, Xiaomi Mi3, Xiaomi Mi 2, Ascend Mate2, Ascend G6, Lenovo K900, Lenovo A390, ZTE Grand S, ZTE Grand X, Galaxy Note4, Galaxy S5 - Note3, Galaxy S3 - Note2, Galaxy Note1, Galaxy S2 - S1, Galaxy Tab S, G3, G2, Optimus G Pro, Optimus G, Optimus View, G Pad 8.3
W3C Valid XHTML and CSS

* Comes with the following modules installed: Column Layout Grid, About Us Page, Back to Top, Responsive Flexslider, Bestsellers Thumbnails, Flexible Footer Menu, Responsive Full Width Tabs, DG Reveiws on Product Info Page, Contact Us Add Subject, Zen Colorbox, Mobile Friendly Quantity Changer, Slimmenu Responsive Mega Menu
Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

* Fully compatible with versions 1.5x.

Please post any bugs or questions to this thread.

Thanks,

Anne

so where is it uploaded, here or your site?

I checked plugins here and it does not show as the latest download:

[TABLE="class: dl2stats, width: 80%"]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/zc.png Zen Cart® Versions[/TD]
[TD] v1.3.8, v1.3.9, v1.5.0, v1.5.1 [/TD]
[/TR]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/users_online.png Original Author[/TD]
[TD]picaflor-azul[/TD]
[/TR]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/users_online.png Last Updated by[/TD]
[TD] picaflor-azul - 6 Sep 2013 [/TD]
[/TR]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/forum_stats.png Downloads[/TD]
[TD]916[/TD]
[/TR]
[/TABLE]

DarkAngel:

so where is it uploaded, here or your site?

I checked plugins here and it does not show as the latest download:

[TABLE="class: dl2stats, width: 80%"]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/zc.png Zen Cart® Versions[/TD]
[TD] v1.3.8, v1.3.9, v1.5.0, v1.5.1 [/TD]
[/TR]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/users_online.png Original Author[/TD]
[TD]picaflor-azul[/TD]
[/TR]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/users_online.png Last Updated by[/TD]
[TD] picaflor-azul - 6 Sep 2013 [/TD]
[/TR]
[TR]
[TD="class: dl2name"]https://www.zen-cart.com/images/styles/zencart/misc/forum_stats.png Downloads[/TD]
[TD]916[/TD]
[/TR]
[/TABLE]

The moderators approve the updates as soon as they can. I am sure that it will show in the plugins section soon ;)

Thanks,

Anne

Thanks, then i will quit working on the version we have in test store until I can grab this one.

Testing out the new design v.2 and was curious as how to remove/hide the different header menu drop downs (i.e. about us, brands, service). In the previous release you were able to use .aboutus-li{display:none;} in the stylesheet. I'm unable to hide them in the newer version.

Whitebear:

Testing out the new design v.2 and was curious as how to remove/hide the different header menu drop downs (i.e. about us, brands, service). In the previous release you were able to use .aboutus-li{display:none;} in the stylesheet. I'm unable to hide them in the newer version.

Aaah! I got it... for anyone else in the stylesheet.css you need to have it as:

.slimmenu li.aboutus-li{display:none;}
.slimmenu li.customer-service-li{display:none;}
.slimmenu li.brands-li{display:none;}


and for the mobile side also add this to the stylesheet.css

.slimmenu.collapsed li.aboutus-li{display:none;}
.slimmenu.collapsed li.customer-service-li{display:none;}
.slimmenu.collapsed li.brands-li{display:none;}

Whitebear:

Aaah! I got it... for anyone else in the stylesheet.css you need to have it as:

.slimmenu li.aboutus-li{display:none;}
.slimmenu li.customer-service-li{display:none;}
.slimmenu li.brands-li{display:none;}


and for the mobile side also add this to the stylesheet.css

.slimmenu.collapsed li.aboutus-li{display:none;}
.slimmenu.collapsed li.customer-service-li{display:none;}
.slimmenu.collapsed li.brands-li{display:none;}

I am happy that you figured it out ;)

Thanks,

Anne