Responsive Sheffield Blue v2.0

[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.

[picaflor-azul]

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-..._mode=isMobile

http://zenlyzen.com/mobile-friendly-..._mode=isTablet

http://zenlyzen.com/mobile-friendly-...mode=isDesktop



Thanks,

Anne

[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?

[picaflor-azul]

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

[DarkAngel]

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-...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:

Zen Cart® Versions	v1.3.8, v1.3.9, v1.5.0, v1.5.1
Original Author	picaflor-azul
Last Updated by	picaflor-azul - 6 Sep 2013
Downloads	916

[picaflor-azul]

so where is it uploaded, here or your site?

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

Zen Cart® Versions	v1.3.8, v1.3.9, v1.5.0, v1.5.1
Original Author	picaflor-azul
Last Updated by	picaflor-azul - 6 Sep 2013
Downloads	916

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

Thanks,

Anne

[DarkAngel]

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

[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.

[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;}

[picaflor-azul]

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