Responsive Sheffield Blue v2.0

Clicking a product image on the product info page shows a very small image in a popup, rather than a larger one.

swguy:

Clicking a product image on the product info page shows a very small image in a popup, rather than a larger one.

I am not seeing this in the demo. Are you on a desktop?

http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=product_info&cPath=1_5&products_id=27
Thanks,

Anne

swguy:

The tagline css class in stylesheet.css is broken; it causes the HEADER_SALES_TEXT not to be visible. (Not sure what the issue is but removing this class fixes the problem.)

Can you be more specific, please so that I can fix the problem? What is broken? The tagline shows on the demo with no problem. This is the line in the stylesheet:

#tagline {margin:0;color:#444;font-size:150%;text-align:left;text-transform:lowercase;clear:both;margin-left:30px;margin-top:15px;}

Thanks,

Anne

swguy:

includes/templates/responsive_sheffield_blue/templates/tpl_modules_mobile_categories_tabs.php line 208 should check

if (DEFINE_CONTACT_US_STATUS <= 1)

before putting up the menu item.

Thank you for the suggestion ;) I will be sure to put this on the list for a future package update.

Thanks,

Anne

picaflor-azul:

I am not seeing this (tiny image issue) in the demo. Are you on a desktop?

http://zenlyzen.com/mobile-friendly-zen-cart/index.php?main_page=product_info&cPath=1_5&products_id=27
Thanks,

Anne

Yes, Desktop running Chrome. Yours does work well. Mine does not - see here:

http://www.thatsoftwareguy2.com/thatsoft_demo_1/index.php?main_page=product_info&cPath=2_18&products_id=21

picaflor-azul:

Can you be more specific, please so that I can fix the problem? What is broken? The tagline shows on the demo with no problem. This is the line in the stylesheet:

#tagline {margin:0;color:#444;font-size:150%;text-align:left;text-transform:lowercase;clear:both;margin-left:30px;margin-top:15px;}

> 
> Thanks,
> 
> Anne

On mine, I had to remove that line to make it work.  You can see in the link I posted in my last response.

swguy:

Yes, Desktop running Chrome. Yours does work well. Mine does not - see here:

http://www.thatsoftwareguy2.com/thatsoft_demo_1/index.php?main_page=product_info&cPath=2_18&products_id=21

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

picaflor-azul:

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?

The issue may just be that my large images are not terribly large (this is just the test dataset).

picaflor-azul:

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 just installed this on the classic template and there is no problem, so the conflict is in the template somewhere. I'll let you know what I figure out.

Thanks,

Anne

Anne, I apologize for the possible confusion - I was using version 2.0 of the template from the downloads. (I see things there before they are approved, obviously.)

So my comments are all wrt version 2.0.

Whitebear:

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?

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.

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>

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>

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.

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

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

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

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

Thanks,

Anne

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>

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

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.php?210062-Responsive-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-zen-cart/index.php?main_page=index&template_switch_id=responsive_sheffield_blue

Attachment #15286

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.

picaflor-azul:

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.

davewest:

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