Responsive Sheffield Blue v2.0

[mydanilo]

check the new footer menu in admin under tools

There is no such menu in V1.1. I know now it get's confusing with the two versions of this template. We should have separate threads maybe?

[swguy]

BTW Anne, the 2.0 Template is fantastic; thanks so much for your hard work.

LMK if you do create a separate support thread and I will update the contrib page.

[swguy]

Possibly useful: to get a home icon on the footer, I added this to the flexible footer define for the sharing items:

<a href="https://www.thatsoftwareguy.com" target="_blank"><i class="fa fa-home"></i></a>

[swguy]

BTW, flexible footer shows a missing image icon when the image isn't specified. See image below.

Fix: Change admin/flexible_footer_menu.php line 294
from

<td class="dataTableContent"><?php echo $flexfooter->fields['page_title'] . $flexfooter->fields['col_header'] . zen_image(DIR_WS_CATALOG_IMAGES . $flexfooter->fields['col_image']); ?></td>

to

<td class="dataTableContent"><?php echo $flexfooter->fields['page_title'] . $flexfooter->fields['col_header'];
if (!empty($flexfooter->fields['col_image']))  {
  echo  zen_image(DIR_WS_CATALOG_IMAGES . $flexfooter->fields['col_image']);
}
?></td>

[picaflor-azul]

BTW Anne, the 2.0 Template is fantastic; thanks so much for your hard work.

LMK if you do create a separate support thread and I will update the contrib page.

Thank you so much for the compliment, it means a lot to me

I will pm you about the separate support thread. Now that I think about it more I think that it is a good idea.

Thanks,

Anne

[picaflor-azul]

BTW, flexible footer shows a missing image icon when the image isn't specified. See image below.

Fix: Change admin/flexible_footer_menu.php line 294
from

<td class="dataTableContent"><?php echo $flexfooter->fields['page_title'] . $flexfooter->fields['col_header'] . zen_image(DIR_WS_CATALOG_IMAGES . $flexfooter->fields['col_image']); ?></td>

to

<td class="dataTableContent"><?php echo $flexfooter->fields['page_title'] . $flexfooter->fields['col_header'];
if (!empty($flexfooter->fields['col_image']))  {
  echo  zen_image(DIR_WS_CATALOG_IMAGES . $flexfooter->fields['col_image']);
}
?></td>

Thank you for this! I will definitely add this fix to the next update.

Thanks,

Anne

[picaflor-azul]

Possibly useful: to get a home icon on the footer, I added this to the flexible footer define for the sharing items:

<a href="https://www.thatsoftwareguy.com" target="_blank"><i class="fa fa-home"></i></a>

Thank you for sharing ;) The template comes with font awesome added so you can add links to any social media, etc. following this same pattern using the admin--tools--flexible footer menu.



Thanks,

Anne

[picaflor-azul]

NB: This is the thread for version 2.0 and higher. If you need support for 1.x, please go here:

http://www.zen-cart.com/showthread.p...Sheffield-Blue
------------------------------


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

responsive-sheffield-blue-demo-sm.png

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.

[davewest]

This must be a bug in the colorbox plugin. I'll take a look and see if I can figure out what is happening. Is your large image size for this product 100 x 80?

Thanks,

Anne

I've been looking at this issue due to another post that got me thinking... Colorbox script is not very good at sizing an image up to match the box, so setting scalePhotos:true, then setting innerHeight innerWidth or height width only affects the box the image is in. If the image is larger then the box, scalePhotos:true rescales the image down, but not smartly, no scaling up at all, the code is not there to perform that task. Same as passing LARGE_IMAGE_HEIGHT/LARGE_IMAGE_WIDTH does nothing at all in colorbox. There is no external way to pass photo size to colorbox without rewriting colorbox script itself.

Hope that helps save you some time looking... checkout photo.height and photo.width that's the location to create some new code in colorbox script.

[picaflor-azul]

I've been looking at this issue due to another post that got me thinking... Colorbox script is not very good at sizing an image up to match the box, so setting scalePhotos:true, then setting innerHeight innerWidth or height width only affects the box the image is in. If the image is larger then the box, scalePhotos:true rescales the image down, but not smartly, no scaling up at all, the code is not there to perform that task. Same as passing LARGE_IMAGE_HEIGHT/LARGE_IMAGE_WIDTH does nothing at all in colorbox. There is no external way to pass photo size to colorbox without rewriting colorbox script itself.

Hope that helps save you some time looking... checkout photo.height and photo.width that's the location to create some new code in colorbox script.

Thank you so much for posting ;) The problem does seem to happen only with really small product info images like 100 or 150 pixels wide. I can take a look at the javascript but do not consider myself a js programmer ;)

Thanks,

Anne