Stirling Grand Responsive Template

Hello :-) This is a brand new responsive template package released free to the zen cart community. I have built this using the Responsive DIY Template Default for v1.5.x by rbarbour. I cannot thank you enough for putting together the Responsive DIY Template Default package :smile: This template ha a very minimal design with a clean layout. The main page is a single column layout with 2 columns for the inner pages.

Attachment 13142

See the live demo here:

Stirling Grand Free Responsive Zen Cart Template Demo

Template Features:

• Super flexible design perfect for all types of ecommerce stores--the possibilites are endless!

• Responsive 2 column display--single column home page layout

• Optimized Drop Navigation for hand held devices

• Matching icons included

• CSS Buttons for easier multi language implementation

• Responsive Home Page slideshow included

• Add your slide show images, set their links, enable/disable images/links, and set open in new window easily using the admin banner manager.

• Home page carousel for Featured Products

• Add This 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, Google Plus, and blog.

• Customized product info page layout with expandable content areas for handheld devices

• Cross Browser tested using Firefox, IE10, IE9, IE8, Google Chrome, Opera, and Safari.

• Tested on the iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9

• W3C Valid XHTML and CSS

• Custom header including shopping cart totals (item count and dollar amount), checkout link, search, and welcome message

• Comes with the following modules installed: Column Layout Grid, About Us Page, Back to Top, Responsive Slides JS, Carousel Featured Products

• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

• Fully compatible with versions 1.3.8x, 1.3.9s, 1.5x. Would probably work with lower versions although it has not been tested.

Please post feedback here and if you find any bugs!

Be sure to read the readme.html file before installation because it is different than the non responsive templates.

Oh Anne how am I ever going to decide which of your awesome templates to settle for? :hug:

Quote:

---

Originally Posted by picandnix

Oh Anne how am I ever going to decide which of your awesome templates to settle for? :hug:

---

I am happy that you have a choice ;) Let me know if you find any bugs!

Thanks,

Anne

Quote:

---

Originally Posted by picandnix

Oh Anne how am I ever going to decide which of your awesome templates to settle for? :hug:

---

Yes, you are becoming like me!

Quote:

---

Originally Posted by SPH

Yes, you are becoming like me!

---

Lol, I almost cited you but didn't want you to feel bullied :wink:

Quote:

---

Originally Posted by picaflor-azul

I am happy that you have a choice ;) Let me know if you find any bugs!

Thanks,

Anne

---

Hi Anne
it's trivial but I thought you'd wanna know anyway... slight overlap in shopping cart when viewed on phone
Attachment 13159

Quote:

---

Originally Posted by picandnix

Hi Anne
it's trivial but I thought you'd wanna know anyway... slight overlap in shopping cart when viewed on phone
Attachment 13159

---

Thanks for posting ;) Which phone are you using?

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Thanks for posting ;) Which phone are you using?

Thanks,

Anne

---

Samsung Galaxy S4

Can I throw in an 'observation' please... it applies to Carlisle Fresh too. The magnifying glass/search icon isn't 'clickable' unlike on your other templates.
Petty I know but you can bet your bottom dollar it'll make some customers scratch their head right? :wink:

Quote:

---

Originally Posted by picandnix

Can I throw in an 'observation' please... it applies to Carlisle Fresh too. The magnifying glass/search icon isn't 'clickable' unlike on your other templates.
Petty I know but you can bet your bottom dollar it'll make some customers scratch their head right? :wink:

---

No, I appreciate any input :) The look is much cleaner without the button and I am assuming that most users will not be confused by just hitting enter after they type their search terms, but I do see your point. If you want the button back, you can add it to the includes/templates/stirling_grand/sideboxes/tpl_search_header.php file. Just grab the code from the template_default file ;)

Thanks,

Anne

I know you have worked hard to put these responsive template together and it is difficult to anticipate every possible scenereo. Nice look Anne from desktop computers. I finally got tired of futzing around with Resp Shefield Blue and Resp AB and thought to try this one, which seemed fitting since most of our sales are Sterling.

Stirling installed without a hitch, I have yet to obtain a good functional install of the other 2.

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

For anyone interested, I have a live install of Stirling Grand at www. tkdrevision .com
I too installed several of Anne's awesome responsive templates, I think I've settled for this one though...

Rixstix I don't have any of the hardware examples you are using to test out so I'd be interested to know how my site measures up for you please.

Quote:

---

Originally Posted by RixStix

I know you have worked hard to put these responsive template together and it is difficult to anticipate every possible scenereo. Nice look Anne from desktop computers. I finally got tired of futzing around with Resp Shefield Blue and Resp AB and thought to try this one, which seemed fitting since most of our sales are Sterling.

Stirling installed without a hitch, I have yet to obtain a good functional install of the other 2.

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

---

What screen resolution is your windows tablet? If it is greater than 1024 pixels wide then you will see the full size version which uses the css mega menu. The css mega menu is not touch friendly. You would have to either change the menu or convert the mega menu to be touch friendly.

I have tested on the following: iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9. If you are viewing on a different device then it has not been tested. This is a free template and while I will do my best to always improve it, I would be surprised if it were perfect on every mobile device ever created ;)


Thanks,

Anne

Please, don't get me wrong, I love your templates and know that you spend a lot of time working through them. I know that it is impossible to test every possible combination of hardware/software. It is even more difficult when users start futzing around on their own and then asking how to fix their mistakes.

I'm sorry that I was confused because I was thinking the responsive templates were mobile device friendly/touch device friendly and didn't know that the menu bar was not intended to be touch friendly.

Both Windows 8 Pro tablet and Windows RT tablets are 1368 x 768 or 768 x 1368 resolution.
RazR-M resolution is 540 x 960

picandnix
Your site is setup a bit differently since it has sidebars on each side of the homepage. Screenprints of Windows 8 Pro tablet attached of HomePage both portrait and landscape. Login page portrait. I forgot to powerdown the RT and it's dead this morning.

Your install has a button to get back to the homepage where the demo does not.

Attachment 13171Attachment 13172Attachment 13173

picandnix...

because you asked, below is a picture of your homepage on a Win 8 pro tablet(HP) and a SurfaceRT tablet (MSFT).
Screen resolution is the same on both.

Top Menu buttons seem to be functional on the PRO tablet using FF24
Top Menu buttons NOT functional on the PRO tablet using IE10
Top Menu buttons NOT functional on RT tablet using IE10

Attachment 13174
Windows 8 RT (MSFT Surface)
IE 10
768 x 1366 px
No Sideboxes HomePage

Attachment 13175
Windows 8 Pro (HP-EnvyX2)
FF 24
768 x 1366 px
Left/Right Sideboxes on HomePage

Quote:

---

Originally Posted by RixStix

picandnix...

because you asked, below is a picture of your homepage on a Win 8 pro tablet(HP) and a SurfaceRT tablet (MSFT).
Screen resolution is the same on both.

Top Menu buttons seem to be functional on the PRO tablet using FF24
Top Menu buttons NOT functional on the PRO tablet using IE10
Top Menu buttons NOT functional on RT tablet using IE10

Attachment 13174
Windows 8 RT (MSFT Surface)
IE 10
768 x 1366 px
No Sideboxes HomePage

Attachment 13175
Windows 8 Pro (HP-EnvyX2)
FF 24
768 x 1366 px
Left/Right Sideboxes on HomePage

---

Very much appreciated. It'll possibly support any future developments for Picaflor templates.

Quote:

---

Originally Posted by RixStix

picandnix...

because you asked, below is a picture of your homepage on a Win 8 pro tablet(HP) and a SurfaceRT tablet (MSFT).
Screen resolution is the same on both.

Top Menu buttons seem to be functional on the PRO tablet using FF24
Top Menu buttons NOT functional on the PRO tablet using IE10
Top Menu buttons NOT functional on RT tablet using IE10

Attachment 13174
Windows 8 RT (MSFT Surface)
IE 10
768 x 1366 px
No Sideboxes HomePage

Attachment 13175
Windows 8 Pro (HP-EnvyX2)
FF 24
768 x 1366 px
Left/Right Sideboxes on HomePage

---

That is really strange! It is showing the full size layout with the mobile menu. This should not be happening. The menu has jquery that switches it over from the drop down menu to the mobile menu at certain screen resolutions.

Thanks,

Anne

Quote:

---

Originally Posted by RixStix

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

---

I have the same issue with the mega menu on my phones and tablets. The biggest issue is that there is no such thing as an "onhover" or "onmouseover" event for touchscreen devices.. To remedy this, when I use this template (hoping to do so soon), I'm thinking that I'm gonna swap the included mega menu out with a responsive megamenu which supports "onclick". This will work well for both desktops and larger touchscreen devices..

Quote:

---

Originally Posted by DivaVocals

I have the same issue with the mega menu on my phones and tablets. The biggest issue is that there is no such thing as an "onhover" or "onmouseover" event for touchscreen devices.. To remedy this, when I use this template (hoping to do so soon), I'm thinking that I'm gonna swap the included mega menu out with a responsive megamenu which supports "onclick". This will work well for both desktops and larger touchscreen devices..

---

Which responsive mega menu will you be using?

There is already a responsive drop down menu included in the template package. You could just remove the call for the css mega menu in tpl_header.php and then remove the display:none; for the mobile menu in the stylesheet.css file. You may have to do some styling at the larger screen size.

Thanks,

Anne

Boy this whole responsive thing is a LOT of work.. :laugh: Lots of stuff to take into consideration.. I'm having to re-examine ALL the appearance mods I normally use.. Especially all the mods which have actions (like on hover) which are not supported by mobile devices..

Quote:

---

Originally Posted by picaflor-azul

Which responsive mega menu will you be using?

---

I'm still researching and narrowing down the menu I will use.. I will totally share with you when I find something suitable..:smile:

Quote:

---

Originally Posted by picaflor-azul

There is already a responsive drop down menu included in the template package. You could just remove the call for the css mega menu in tpl_header.php and then remove the display:none; for the mobile menu in the stylesheet.css file. You may have to do some styling at the larger screen size.

---

The issue with that Anne is the larger touchscreen devices which may have the SAME screen resolution as a desktop computer (like my Netbook or Surface device, and even my Android tablet).. I don't necessarily want to replace the mega menu with the responsive drop menu for all devices.. I rather like the mega menu.:smile: I think the solution for me will be a mega menu presented on larger mobile/touchscreen devices which supports onClick versus onHover actions.

Basically I'm looking for a responsive mega menu similar to the one you are currently using, but I need one that does more than simply use media queries to detect screen resolution.. I would prefer that the menu also detect whether or not the viewing device is a mobile/touchcreen device and present an alternate version of the mega menu which supports onClick actions. That kind of functionality requires some javascript or jQuery magic to make it work.

Ideally this would mean that if the device detected is a mobile/touchscreen device, and IF this device is one of the larger mobile/touchscreen devices (meaning that it will not hit one of the media queries which presents the responsive drop menu), THEN present a mega menu which the action for the menu will be an onClick action versus onHover.

Quote:

---

Originally Posted by DivaVocals

Boy this whole responsive thing is a LOT of work.. :laugh: Lots of stuff to take into consideration.. I'm having to re-examine ALL the appearance mods I normally use.. Especially all the mods which have actions (like on hover) which are not supported by mobile devices..


I'm still researching and narrowing down the menu I will use.. I will totally share with you when I find something suitable..:smile:

The issue with that Anne is the larger touchscreen devices which may have the SAME screen resolution as a desktop computer (like my Netbook or Surface device, and even my Android tablet).. I don't necessarily want to replace the mega menu with the responsive drop menu for all devices.. I rather like the mega menu.:smile: I think the solution for me will be a mega menu presented on larger mobile/touchscreen devices which supports onClick versus onHover actions.

Basically I'm looking for a responsive mega menu similar to the one you are currently using, but I need one that does more than simply use media queries to detect screen resolution.. I would prefer that the menu also detect whether or not the viewing device is a mobile/touchcreen device and present an alternate version of the mega menu which supports onClick actions. That kind of functionality requires some javascript or jQuery magic to make it work.

Ideally this would mean that if the device detected is a mobile/touchscreen device, and IF this device is one of the larger mobile/touchscreen devices (meaning that it will not hit one of the media queries which presents the responsive drop menu), THEN present a mega menu which the action for the menu will be an onClick action versus onHover.

---

Yes, but for a free template package, I think that dropping back to a simple drop down menu that works on all touch screen or full screen devices is an acceptable solution ;) For those who want a more custom solution, they can always hire a programmer/designer to provide one.

Let me know if you find a good mega menu sub that can possibly be incorporated into the free template packages ;)

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Yes, but for a free template package, I think that dropping back to a simple drop down menu that works on all touch screen or full screen devices is an acceptable solution ;) For those who want a more custom solution, they can always hire a programmer/designer to provide one.

---

You get no disagreement from me on this point..:smile: and for RixStix, this might be a viable solution for him as well.. I'm not so sure that this is what my client will want which is why I am seeking an alternate..

I am going to put some effort into seeing if I can avoid having to hire someone and see if I can find an existing solution which meets my needs.. (as you know the web is FULL of free solutions if one is willing to do some digging.. :laugh:) BUT if I am unable to find something suitable, I have no issue paying a developer to come up with a solution that matches my spec/needs

Quote:

---

Originally Posted by picaflor-azul

Let me know if you find a good mega menu sub that can possibly be incorporated into the free template packages ;)

---

If I do I will for sure let you know!! :smile:


Anyway I don't want to hijack your support thread anymore on this topic.. If I find something that is helpful/on topic, I will share with the class..:smile:

Think of tablets and phones like wendy's and taco bell. Simple, easy and fast.

While the on hover mega menus are a great functions for the desktop. The on click function will be needed for tablets and an even simpler toggle menu for phones.

Here are some pretty to implement responsive navigation examples: http://responsivenavigation.net/

Quote:

---

Originally Posted by rbarbour

Think of tablets and phones like wendy's and taco bell. Simple, easy and fast.

While the on hover mega menus are a great functions for the desktop. The on click function will be needed for tablets and an even simpler toggle menu for phones.

Here are some pretty to implement responsive navigation examples: http://responsivenavigation.net/

---

Boom!! that's it.. hence what I am after.. the best of ALL worlds.. :smile:

So I may have stumbled upon a solution accidentally.. (okay okay.. so I needed another set of eyes to help me with this "revelation":laugh:) HA!.. So simple I can’t BELIEVE I MISSED IT!!! On my test site: http://zentestcart.overthehillweb.com/, I replaced the top level link where there were items "under" the top link with a "#", and “Bob’s yer uncle” the daggone mega menu now works on both touchsceen devices and desktop devices WITHOUT javascript.. On touchscreen devices (Android tablet and smartphone), the menu requires an onClick action and there is no weird half hover thing happening.. and on desktop devices onHover still works.. I can’t test this on an iPad or an iPhone (don’t own one).. I assume (hope) it will work the same..

Your mileage may vary, and I'm still trying to figure out if there is a downside to this (not seeing one yet).. Opinions???

TNX for all the comments from everyone. Spending money is always a reasonable option when a person comes to the end of their technical abilities. To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor. I've been (and will be) tied up with production work for a few days to come, so working through options are a week or so away for me.

Quote:

---

Originally Posted by DivaVocals

Your mileage may vary, and I'm still trying to figure out if there is a downside to this (not seeing one yet).. Opinions???

---

Not that it would be much of an issue, the mouse scroll button seems to be disabled on your test site.... but then, touch devices don't have a mouse, do they? I'm curious to see the effect tomorrow when I get back to the Windows tablets, both Pro and RT

Quote:

---

Originally Posted by RixStix

TNX for all the comments from everyone. Spending money is always a reasonable option when a person comes to the end of their technical abilities. To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor. I've been (and will be) tied up with production work for a few days to come, so working through options are a week or so away for me.

---

**nods in agreement**:yes:

Quote:

---

Originally Posted by RixStix

Not that it would be much of an issue, the mouse scroll button seems to be disabled on your test site.

---

Well the disabled scroll seems to be a function of the template I'm using on the test site.. (same behavior is evident on the demo site for that template) The disabled scroll aside, I was only testing the mega menu.. I've NEVER tried to sort out the scroll button issue since it's a TEST site.. So I didn't much care why this particular issue was happening:laugh:, and besides tomorrow I could blow away the whole thing and start over.. **shrug**

Quote:

---

Originally Posted by RixStix

TNX for all the comments from everyone. Spending money is always a reasonable option when a person comes to the end of their technical abilities. To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor. I've been (and will be) tied up with production work for a few days to come, so working through options are a week or so away for me.



Not that it would be much of an issue, the mouse scroll button seems to be disabled on your test site.... but then, touch devices don't have a mouse, do they? I'm curious to see the effect tomorrow when I get back to the Windows tablets, both Pro and RT

---

Well found the chink in the armour.. Had to change all the <a href="#" class="drop"> to <span class="drop"> otherwise you are redirected back to the home page every time you click the menu.. But even with this change, this is not the fully the right solution.. If you click on a product category with sub categories, you will be directed to the parent category before you can click on any of the subcategories..

The right solution is going to need javascript or jQuery to detect mobile/touchscreen devices and apply the correct behavior to the mega menu based on device.. It's clear to me that CSS only solutions are not going to provide this kind of functionality..

Creating different menus for different devices is very easy.

Anne, I apologize for the hijack of your support thread. Last post regarding this.

Take a look at the responsive classic to see how swapping the category tabs for a select is done.

Take a look at the responsive cold steel to see how the product listing header is swapped for the SNAF filter.

Simply using the minWidthHide and minWidthShow CSS classes at the appropriate CSS media query handles swapping with ease.

Keep the current mega menu for desktop.

Using minWidthHide and minWidthShow CSS classes to hide (ids and classes for the on hover CSS) and adding new (ids and classes for the on click CSS)

Example of new on click link

<a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.

I have several new responsive plugins, just trying to find the time to get them packaged up.

Quote:

---

Originally Posted by RixStix

To me, it seems to be a problem if a responsive template only has full functionality when viewed on a desktop monitor.

---

I just wanted to note that I can not test all touch screen devices in existence. On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.


Thanks,

Anne

Quote:

---

Originally Posted by rbarbour

Example of new on click link

<a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.
.

---

Does this mean that I just need to make this change to the mega menu links to make them touch friendly? If so, that would be really great!

Thanks,

Anne

Quote:

---

Originally Posted by rbarbour

Creating different menus for different devices is very easy.

Anne, I apologize for the hijack of your support thread. Last post regarding this.

Take a look at the responsive classic to see how swapping the category tabs for a select is done.

Take a look at the responsive cold steel to see how the product listing header is swapped for the SNAF filter.

Simply using the minWidthHide and minWidthShow CSS classes at the appropriate CSS media query handles swapping with ease.

Keep the current mega menu for desktop.

Using minWidthHide and minWidthShow CSS classes to hide (ids and classes for the on hover CSS) and adding new (ids and classes for the on click CSS)

Example of new on click link

<a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.

I have several new responsive plugins, just trying to find the time to get them packaged up.

---

Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??

Quote:

---

Originally Posted by picaflor-azul

I just wanted to note that I can not test all touch screen devices in existence. On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.


Thanks,

Anne

---

I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

Then there's a whole slew of site's with webbased responsive testing tools popping up:
http://beta.screenqueri.es/
Brief Description: Pixel Perfect Media Query Debugging Tool* Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
if the resolution of the device you are testing isn't included.
This one rivals the functionality of the FireFox Responsive Design Mode tool.

http://mattkersley.com/responsive/
Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


http://www.studiopress.com/responsive/
Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.

Quote:

---

Originally Posted by picaflor-azul

On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.

---

I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)

Quote:

---

Originally Posted by DivaVocals

Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??



I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

Then there's a whole slew of site's with webbased responsive testing tools popping up:
http://beta.screenqueri.es/
Brief Description: Pixel Perfect Media Query Debugging Tool* Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
if the resolution of the device you are testing isn't included.
This one rivals the functionality of the FireFox Responsive Design Mode tool.

http://mattkersley.com/responsive/
Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


http://www.studiopress.com/responsive/
Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)

---

Since I too do not own many of these devices, I am left to rely on testing on various development sites, some of which you have mentioned above.

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Since I too do not own many of these devices, I am left to rely on testing on various development sites, some of which you have mentioned above.

Thanks,

Anne

---

Do you have others you could share????:cool:

At this point may I suggest we move this discussion to a new thread.. I think it's an interesting enough discussion to open up to the community, and we are CLEARLY (yes myself included) hijacking this support thread..

I will start it off and post the link..

New thread to continue the discussion:
Responsive Design: How to address differences between touchscreen and desktop devices

Quote:

---

Originally Posted by DivaVocals

New thread to continue the discussion:
Responsive Design: How to address differences between touchscreen and desktop devices

---

Thanks for posting the new thread. I'll see you there ;)

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Thanks for posting the new thread. I'll see you there ;)

Thanks,

Anne

---

You're welcome.. Apologies for the temporary hijack..:smile:

Quote:

---

Originally Posted by picaflor-azul

Does this mean that I just need to make this change to the mega menu links to make them touch friendly? If so, that would be really great!

Thanks,

Anne

---

It will not make them touch friendly but will include a onClick event handler so if one is using a touch screen the mega menu can be clicked.

Here is an Example using this template:

Notice, your mega menu CSS file goes untouched, the onHover CSS still applies only after the onClick event and continues to use the onClick event handlers as fall back on any device.

Quote:

---

Originally Posted by rbarbour

It will not make them touch friendly but will include a onClick event handler so if one is using a touch screen the mega menu can be clicked.

Here is an Example using this template:

Notice, your mega menu CSS file goes untouched, the onHover CSS still applies only after the onClick event and continues to use the onClick event handlers as fall back on any device.

---

After further playing with:

I was able to keep the current onHover intact without the use of first using onClick. Therefore onHover will be default and if one is using a touch device the onClick will be the fall back.

Quote:

---

Originally Posted by rbarbour

After further playing with:

I was able to keep the current onHover intact without the use of first using onClick. Therefore onHover will be default and if one is using a touch device the onClick will be the fall back.

---

It looks great ;) Thank you for posting, it seems like an ideal solution!

Thanks,

Anne

Quote:

---

Originally Posted by rbarbour

After further playing with:

I was able to keep the current onHover intact without the use of first using onClick. Therefore onHover will be default and if one is using a touch device the onClick will be the fall back.

---

I'm on a mobile phone can't look at it right now, but can this code also be applied to the categories generator class that is used by the mega menu?

Quote:

---

Originally Posted by rbarbour

After further playing with:

I was able to keep the current onHover intact without the use of first using onClick. Therefore onHover will be default and if one is using a touch device the onClick will be the fall back.

---

Is touch device functionality related to internet connection speed? If so, that could affect what I am seeing. Rural area with a 1Mb connection on a good day.

MegaMenu checks

• Windows 8 pro, HP Envy-X2 tablet, FireFox: much better for touch screen use
• Windows 8 pro, HP Envy-X2 tablet, IE10 desktop: no touchscreen functionality
• Windows 8 pro, HP Envy-X2 tablet, IE10 app: not tested
• Windows 8 RT, MSFT SurfaceRT, IE10 desktop: no touchscreen functionality
• Windows 8 RT, MSFT SurfaceRT, IE10 app: no touchscreen functionality

It will be a while before having Windows 8.1 since the 3.63GB download will take almost 7 hours if there is no hiccup in the connection.

Quote:

---

Originally Posted by RixStix

Is touch device functionality related to internet connection speed? If so, that could affect what I am seeing. Rural area with a 1Mb connection on a good day.

MegaMenu checks

• Windows 8 pro, HP Envy-X2 tablet, FireFox: much better for touch screen use
• Windows 8 pro, HP Envy-X2 tablet, IE10 desktop: no touchscreen functionality
• Windows 8 pro, HP Envy-X2 tablet, IE10 app: not tested
• Windows 8 RT, MSFT SurfaceRT, IE10 desktop: no touchscreen functionality
• Windows 8 RT, MSFT SurfaceRT, IE10 app: no touchscreen functionality

It will be a while before having Windows 8.1 since the 3.63GB download will take almost 7 hours if there is no hiccup in the connection.

---

Your test cases don't appear valid.. what is IE10 desktop vs IE10 app? Also your testing is putting weight on connection speed when the only differences in your testcase scenarios is the device and the browser..

Quote:

---

Originally Posted by DivaVocals

Your test cases don't appear valid.. what is IE10 desktop vs IE10 app? Also your testing is putting weight on connection speed when the only differences in your testcase scenarios is the device and the browser..

---

Don't know what you mean about validity. I saw what I saw. I have seen differences with screen presentations when IE10 is launched as an APP from a Tile on the Start screen vs IE10 launched as from the Desktop Taskbar.

Connection speed was just a statement of present conditions just in case it had an effect on functionality. Not everyone has blindingly fast connections.

Quote:

---

Originally Posted by RixStix

Don't know what you mean about validity. I saw what I saw. I have seen differences with screen presentations when IE10 is launched as an APP from a Tile on the Start screen vs IE10 launched as from the Desktop Taskbar.Connection speed was just a statement of present conditions just in case it had an effect on functionality. Not everyone has blindingly fast connections.

---

How an application is launched should not affect behavior unless the app icon/tile launches a completely different browser program, OR possibly launches the browser program with different startup settings. Either way sounds more like a function of the browser issue/difference than the device.. connection speed also rarely affects functionality.. connection speed will affect performance. which is to say that the results you got would likely repeat for someone testing the same testcases on the same devices.. just faster..

Quote:

---

Originally Posted by DivaVocals

How an application is launched should not affect behavior unless the app icon/tile launches a completely different browser program,

---

Sorry but MSFT packages two different "experiences" of IE within Windows 8

"For better or worse, IE10 is one of those Windows 8 apps with a split personality--part Metro and part desktop. Microsoft dubs it a "Metro style enabled desktop browser," which means that technically it's a single app that offers two different "experiences." CNET article

Ditto for IE11.

I should have said IE11 desktop and IE11 Metro instead of IE10 desktop and IE10APP. Regardless of my technically incorrect terminology, the experience is different.

Understood so it is exactly what I stated.. basically two different experience is based on how you launch it.. This still means that the behavior you find is more of a function of the browser app and not the device

Quote:

---

Originally Posted by RixStix

Sorry but MSFT packages two different "experiences" of IE within Windows 8

"For better or worse, IE10 is one of those Windows 8 apps with a split personality--part Metro and part desktop. Microsoft dubs it a "Metro style enabled desktop browser," which means that technically it's a single app that offers two different "experiences." CNET article

Ditto for IE11.

I should have said IE11 desktop and IE11 Metro instead of IE10 desktop and IE10APP. Regardless of my technically incorrect terminology, the experience is different.

---

Quote:

---

Originally Posted by RixStix

Is touch device functionality related to internet connection speed? If so, that could affect what I am seeing. Rural area with a 1Mb connection on a good day.

MegaMenu checks

• Windows 8 pro, HP Envy-X2 tablet, FireFox: much better for touch screen use
• Windows 8 pro, HP Envy-X2 tablet, IE10 desktop: no touchscreen functionality
• Windows 8 pro, HP Envy-X2 tablet, IE10 app: not tested
• Windows 8 RT, MSFT SurfaceRT, IE10 desktop: no touchscreen functionality
• Windows 8 RT, MSFT SurfaceRT, IE10 app: no touchscreen functionality

It will be a while before having Windows 8.1 since the 3.63GB download will take almost 7 hours if there is no hiccup in the connection.

---

A. A touch screens functionality has nothing to do with internet speed connection.

B. This is a template support thread, not a support thread for DEVICES or BROWSERS.

C. Any IE will require additional coding of some sort cause IE sucks for phones, tablets and desktops.

Quote:

---

Originally Posted by DivaVocals

I'm on a mobile phone can't look at it right now, but can this code also be applied to the categories generator class that is used by the mega menu?

---

Just updated the the example and YES it will work with the categories_ul_generator file. I will forward those changes to Anne as well.

Quote:

---

Originally Posted by rbarbour

Just updated the the example and YES it will work with the categories_ul_generator file. I will forward those changes to Anne as well.

---

Thank you so much for your work, Raymond :hug: I will be updating the responsive packages and the mega menu package to include the touch screen on click fall back code.


Thanks.

Anne

Quote:

---

Originally Posted by rbarbour

B. This is a template support thread, not a support thread for DEVICES or BROWSERS.

---

True. I had problems with the template and thus my first post. I NEVER EVER intended for Anne's support thread to be hijacked like we have done. You posted that you had made a change that allowed touch functionality with this template. I posted that I couldn't see the difference in the template functionality for the particular touch devices that I have in my possession. I was trying to be helpful when I made those observations.

Quote:

---

Originally Posted by rbarbour

C. Any IE will require additional coding of some sort cause IE sucks for phones, tablets and desktops.

---

True. Template specs state it is IE10 functional. I missed IE11 not being in the list. Maybe there needs to be a differentiation that applies to tested functionality with mouse and/or touch device. Again, trying to be helpful; not critical.

Regardless of how words are interpretted, I really do appreciate all that Raymond and Anne have done in expanding the available options.

Love the template. I think this is what I need. One question! I have been searching till I'm blue in the face how to add links to te site. Did I miss something and it's not showing because there are no links there.

Thanks for any help advice!

Quote:

---

Originally Posted by Barf

Love the template. I think this is what I need. One question! I have been searching till I'm blue in the face how to add links to te site. Did I miss something and it's not showing because there are no links there.

Thanks for any help advice!

---

Not quite sure what you mean, do you mean external links to other sites from yours? Can you give a link to the comparison on your current site so we can be sure we understand please.

Quote:

---

Originally Posted by Barf

Love the template. I think this is what I need. One question! I have been searching till I'm blue in the face how to add links to te site. Did I miss something and it's not showing because there are no links there.

Thanks for any help advice!

---

Where do you want to add links?

Thanks,

Anne

First off, thank you Anne for the template. For some reason or another, my template install failed to include the carousal functionality for the featured items. Will I need to reinstall the complete template?

I found my mistake. In hast I installed all the patches... not seeing that the last one was to uninstall the carousel. As soon as I reinstalled the carousel patch it is back in my admin. :blush:

Quote:

---

Originally Posted by merchantdroid

I found my mistake. In hast I installed all the patches... not seeing that the last one was to uninstall the carousel. As soon as I reinstalled the carousel patch it is back in my admin. :blush:

---

I am happy that you figured it out ;)

Thanks,

Anne

Can you tell me how to add another menu item to the header of this template? I want to add "Services" between "Shop" and "Brand" and have it link to ez pages if possible. I've been going through the code for a couple of hours now and am only breaking stuff :) I know where it needs to go just unsure of the correct code.

Thanks
Athena

Quote:

---

Originally Posted by Lurkzilla

Can you tell me how to add another menu item to the header of this template? I want to add "Services" between "Shop" and "Brand" and have it link to ez pages if possible. I've been going through the code for a couple of hours now and am only breaking stuff :) I know where it needs to go just unsure of the correct code.

Thanks
Athena

---

You will edit the includes/templates/stirling_grand/common/tpl_mega_menu.php file. All you need to do is to find the place in the file where you want to add the link and add a new list item:

Code:

---

<li><a href="your url here">your link name here</li>

---

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

You will edit the includes/templates/stirling_grand/common/tpl_mega_menu.php file. All you need to do is to find the place in the file where you want to add the link and add a new list item:

Code:

---

<li><a href="your url here">your link name here</li>

---

Thanks,

Anne

---

OK that was too easy. It's been 2yrs since I've messed with code so I'm a little rusty:blush:

Thanks for your help.

Athena

Quote:

---

Originally Posted by Lurkzilla

OK that was too easy. It's been 2yrs since I've messed with code so I'm a little rusty:blush:

Thanks for your help.

Athena

---

No problem ;)

Thanks,

Anne

I thought I'd try this as someone suggested that a number of my visitors may be mobile users and a responsive template would be better.

When I installed it there were 2 issues.

ISSUE 1:
The first issue I managed to resolve but thought I would mention it as it appears to have been created by a possible error in the .sql file.
The issue was a database error found after running the 'about_us.sql' files in the Admin/Tools/Install sql patches.
The error was that the About Us page links did not appear in the Admin panel (Define Page Status/Pages Editor) .
This was caused by corrupt content of the sql file after running the script - notice the differences in colour of the text in the script
Attachment 13298

and the resultant content of the database
Attachment 13299

I manually altered the database and then the About us showed up in the Admin panel as it should.

I am not sure why no one else has had this problem, as the sql patch I used was the one extracted from the download and I had not tried to amend the files in any way.

ISSUE 2:
This is probably because I've missed something in the installation instructions - but I'm not sure what.

When I view the template this is what appears:
Attachment 13300

For some reason the header menu bar is overlapped by the logo background, and the word Excercise (the first category) appears above it.

Before I re-try and install it again, can anyone give any clues as to what I may have missed to create this problem.

PS I have already removed the social icons but also want to remove the 'Follow Us' link, but I'll address that later.

Thanks for any input offered.

Quote:

---

Originally Posted by pewe

ISSUE 2:
This is probably because I've missed something in the installation instructions - but I'm not sure what.

When I view the template this is what appears:
Attachment 13300

For some reason the header menu bar is overlapped by the logo background, and the word Excercise (the first category) appears above it.

Before I re-try and install it again, can anyone give any clues as to what I may have missed to create this problem.

PS I have already removed the social icons but also want to remove the 'Follow Us' link, but I'll address that later.

Thanks for any input offered.

---

Turn off the category tabs menu and this goes away..

Quote:

---

Originally Posted by pewe

I thought I'd try this as someone suggested that a number of my visitors may be mobile users and a responsive template would be better.

When I installed it there were 2 issues.

ISSUE 1:
The first issue I managed to resolve but thought I would mention it as it appears to have been created by a possible error in the .sql file.
The issue was a database error found after running the 'about_us.sql' files in the Admin/Tools/Install sql patches.
The error was that the About Us page links did not appear in the Admin panel (Define Page Status/Pages Editor) .
This was caused by corrupt content of the sql file after running the script - notice the differences in colour of the text in the script
Attachment 13298

and the resultant content of the database
Attachment 13299

I manually altered the database and then the About us showed up in the Admin panel as it should.

I am not sure why no one else has had this problem, as the sql patch I used was the one extracted from the download and I had not tried to amend the files in any way.

ISSUE 2:
This is probably because I've missed something in the installation instructions - but I'm not sure what.

When I view the template this is what appears:
Attachment 13300

For some reason the header menu bar is overlapped by the logo background, and the word Excercise (the first category) appears above it.

Before I re-try and install it again, can anyone give any clues as to what I may have missed to create this problem.

PS I have already removed the social icons but also want to remove the 'Follow Us' link, but I'll address that later.

Thanks for any input offered.

---

If you follow the recommended admin settings in the readme.html file the problem will be solved.

You can edit the includes/templates/stirling_grand/common/tpl_footer_menu.php file to remove the follow us.

Thanks,

Anne

Thanks you both for the responses.
Not sure how I missed the Category Tabs Menu :blush:

All sorted and working on my test site - now to install on the working site.

Thanks again.

PS. any suggestions on correcting the about_us.sql file to save me having to manually fix the database when I install on working site??

Quote:

---

Originally Posted by pewe

Thanks you both for the responses.
Not sure how I missed the Category Tabs Menu :blush:

All sorted and working on my test site - now to install on the working site.

Thanks again.

PS. any suggestions on correcting the about_us.sql file to save me having to manually fix the database when I install on working site??

---

Try this:

Code:

---

INSERT INTO `configuration` VALUES ('', 'Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?0= Link ON, Define Text OFF1= Link ON, Define Text ON2= Link OFF, Define Text ON3= Link OFF, Define Text OFF', 25, 90, '', '', NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');

---

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Try this:

Code:

---

INSERT INTO `configuration` VALUES ('', 'Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?0= Link ON, Define Text OFF1= Link ON, Define Text ON2= Link OFF, Define Text ON3= Link OFF, Define Text OFF', 25, 90, '', '', NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');

---

Thanks,

Anne

---

Thanks Anne,
Simply adding the missing '' at the beginning of the values in the included 'about_us.sql' file sorted the problem.
eg

Code:

---

VALUES
('', 'Define About Us Status',

---

Quote:

---

Originally Posted by pewe

Thanks Anne,
Simply adding the missing '' at the beginning of the values in the included 'about_us.sql' file sorted the problem.
eg

Code:

---

VALUES
('', 'Define About Us Status',

---

---

Thanks for posting the fix. I will be sure to include this in future updates ;)

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Thanks for posting the fix. I will be sure to include this in future updates ;)

Thanks,

Anne

---

Not a problem.
Thank you for your superb template work :cool:

Hi again.

I have been working on my site format using this template and have got most things now working as I would like.

I say 'most things' as I have a query regarding the use of the 'zen lightbox' and how it displays on a smartphone - although I don't have a smartphone to test it directly so I use mobiletest.me - as suggested by a helpful forum user.

The issue I have is that when I select 'larger image' on a product page, the lightbox opens with the image larger than the mobile screen - BUT, the scroll bar to scroll left/right does not appear to work (although the vertical scroll works properly).

So -
Is the non functioning lightbox horizontal scrollbar a quirk of 'mobiletest.me' or, as has been suggested elsewhere, will it require a complete rework of Zen Lightbox to work with any template when viewed on a smartphone.

(NOTE FOR REFERENCE: There is another responsive template which uses a similar feature they call 'shadowbox' (or fancybox) which opens the product image in a 'box' for which both the box and the contained image are resized based on the screen resolution of the host browser.
NOTE: as well as not being as attractive as Stirling, the 'shadowbox' does not work with additional images which continue to open in a popup window on both pc and smartphone.)

It may be that this issue is related to my lack of understanding of the way Stirling works with Zen Lightbox, but either way I would appreciate any feedback.

Thanks.

Quote:

---

Originally Posted by pewe

Hi again.

I have been working on my site format using this template and have got most things now working as I would like.

I say 'most things' as I have a query regarding the use of the 'zen lightbox' and how it displays on a smartphone - although I don't have a smartphone to test it directly so I use mobiletest.me - as suggested by a helpful forum user.

The issue I have is that when I select 'larger image' on a product page, the lightbox opens with the image larger than the mobile screen - BUT, the scroll bar to scroll left/right does not appear to work (although the vertical scroll works properly).

So -
Is the non functioning lightbox horizontal scrollbar a quirk of 'mobiletest.me' or, as has been suggested elsewhere, will it require a complete rework of Zen Lightbox to work with any template when viewed on a smartphone.

(NOTE FOR REFERENCE: There is another responsive template which uses a similar feature they call 'shadowbox' (or fancybox) which opens the product image in a 'box' for which both the box and the contained image are resized based on the screen resolution of the host browser.
NOTE: as well as not being as attractive as Stirling, the 'shadowbox' does not work with additional images which continue to open in a popup window on both pc and smartphone.)

It may be that this issue is related to my lack of understanding of the way Stirling works with Zen Lightbox, but either way I would appreciate any feedback.

Thanks.

---

The problem is not with the template. The problem is that the zen lightbox module is not respnosive. Whatever modules/plugins you add to the template need to also be made responsive if you want them to work in a responsive way on mobile devices.


Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

The problem is not with the template. The problem is that the zen lightbox module is not respnosive. Whatever modules/plugins you add to the template need to also be made responsive if you want them to work in a responsive way on mobile devices.


Thanks,

Anne

---

Thanks Anne.
That's what was suggested by another forum member - DivaVocals - but not being a coder when I saw your included file for additional images contained some code for zen lightbox I was hoping perhaps you had done some mods to make it responsive.

So I guess that the other template included its own 'fancybox' plugin which they had done to be responsive (I didn't install fancybox seperately). Just a shame they didn't make it work with additional images then I might have been able to get someone to make it work with Stirling.
Unfortunately the template developer says he offers no support at all.

I'll have to just put a message on the site to warn smartphone users that the images won't work properly and offer them a different way of viewing them.

Thanks again for the response.

Quote:

---

Originally Posted by picaflor-azul

The problem is not with the template. The problem is that the zen lightbox module is not respnosive. Whatever modules/plugins you add to the template need to also be made responsive if you want them to work in a responsive way on mobile devices.


Thanks,

Anne

---

Quote:

---

Originally Posted by pewe

Thanks Anne.
That's what was suggested by another forum member - DivaVocals - but not being a coder when I saw your included file for additional images contained some code for zen lightbox I was hoping perhaps you had done some mods to make it responsive.

So I guess that the other template included its own 'fancybox' plugin which they had done to be responsive (I didn't install fancybox seperately). Just a shame they didn't make it work with additional images then I might have been able to get someone to make it work with Stirling.
Unfortunately the template developer says he offers no support at all.

I'll have to just put a message on the site to warn smartphone users that the images won't work properly and offer them a different way of viewing them.

Thanks again for the response.

---

Quote:

---

Originally Posted by rbarbour

I finally have a "responsive" version of this plugin complete.

It is not responsive as to where it shrinks and expands with your browser window but instead fits to the window it's being opened in.

check it out, tell me what you think.
www[.]zcadditions[.]com/222/index.php?main_page=product_music_info&products_id=166

---

I will be packaging and uploading before the weekend ends :smile:

Quote:

---

Originally Posted by rbarbour

I will be packaging and uploading before the weekend ends :smile:

---

That's great.

I haven't got a smartphone to test with but tried it on mobiletest.me
I noticed even on the Galaxy Y with the lowest resolution at 240x320 although the box border is off screen at the sides it still shows the complete image and the description and Close button.

Well done.
I look forward to getting it installed.
:cheers:

Although I'm no coder, I had been trying to find a solution to this problem.
At the same time as I read the post from 'rbarbour' I had just finished modifying slimbox.php which I have now uploaded and tried - and it seems to work.
It is attached for anyone who wants to try it.

I found the solution on a google group. It was a js file which I copied to replace the code in the original slimbox.php in the zen lightbox classes directory.

It seems to work on mobiletest.me and www.infobyip.com/testwebsiteresolution.php.

ANNE - maybe you could include a modified version of slimbox.php with your responsive templates for those users that use lightbox.
Attachment 13330

Quote:

---

Originally Posted by pewe

Although I'm no coder, I had been trying to find a solution to this problem.
At the same time as I read the post from 'rbarbour' I had just finished modifying slimbox.php which I have now uploaded and tried - and it seems to work.
It is attached for anyone who wants to try it.

I found the solution on a google group. It was a js file which I copied to replace the code in the original slimbox.php in the zen lightbox classes directory.

It seems to work on mobiletest.me and www.infobyip.com/testwebsiteresolution.php.

ANNE - maybe you could include a modified version of slimbox.php with your responsive templates for those users that use lightbox.
Attachment 13330

---

That's great, seems to work. One less plugin I have to upload and maintain. :smile:

Quote:

---

Originally Posted by pewe

Although I'm no coder, I had been trying to find a solution to this problem.
At the same time as I read the post from 'rbarbour' I had just finished modifying slimbox.php which I have now uploaded and tried - and it seems to work.
It is attached for anyone who wants to try it.

I found the solution on a google group. It was a js file which I copied to replace the code in the original slimbox.php in the zen lightbox classes directory.

It seems to work on mobiletest.me and www.infobyip.com/testwebsiteresolution.php.

ANNE - maybe you could include a modified version of slimbox.php with your responsive templates for those users that use lightbox.
Attachment 13330

---

I am happy that you figured out a solution and posted it.

I will not be including this file in the template package, since it really should be packaged up with the add on and not the template. Not all template users will install the lightbox module.

Thanks,

Anne

Quote:

---

Originally Posted by pewe

Thanks Anne.
That's what was suggested by another forum member - DivaVocals - but not being a coder when I saw your included file for additional images contained some code for zen lightbox I was hoping perhaps you had done some mods to make it responsive.

So I guess that the other template included its own 'fancybox' plugin which they had done to be responsive (I didn't install fancybox seperately). Just a shame they didn't make it work with additional images then I might have been able to get someone to make it work with Stirling.
Unfortunately the template developer says he offers no support at all.

I'll have to just put a message on the site to warn smartphone users that the images won't work properly and offer them a different way of viewing them.

Thanks again for the response.

---

Which template file includes code for zen lightbox?

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

Which template file includes code for zen lightbox?

Thanks,

Anne

---

NONE.. I just checked the template package file myself.. As I told pewe in the lightbox support thread NONE of the responsive lightbox stuff he is working through has ANYTHING to do with this template or any other responsive template you offer..

Bottomline is the Zen Lightbox module CURRENTLY available in the downloads (v1.6.5 or something) is NOT responsive, mobile ready or any other term which shall be construed to mean that the images re-size in smaller devices (like smartphones) without a modification to the lightbox code.. Apparently a solution has been found to make the Zen Lightbox add-on responsive and any remaining discussion about responsive lightbox should be MOVED back to the lightbox support thread..

Quote:

---

Originally Posted by picaflor-azul

Which template file includes code for zen lightbox?

Thanks,

Anne

---

My apologies Anne.
On the server I have 2 installations (one test and one to go live).
In both I have a file 'additional_images.php' in 'includes/modules/stirling_grand' which contains references to zen_lightbox.

The file is not in the stirling package on my pc, so I'm not sure why they appear on the server - I must have copied them to that location in error somehow.:blush:

Quote:

---

Originally Posted by pewe

My apologies Anne.
On the server I have 2 installations (one test and one to go live).
In both I have a file 'additional_images.php' in 'includes/modules/stirling_grand' which contains references to zen_lightbox.

The file is not in the stirling package on my pc, so I'm not sure why they appear on the server - I must have copied them to that location in error somehow.:blush:

---

It is a zen lightbox file so that is why it is on your server and not in the template package ;0

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

It is a zen lightbox file so that is why it is on your server and not in the template package ;0

Thanks,

Anne

---

That explains it. :blush:

Been trying so many things to find a solution things have become a little confused.

Now with your stirling template and a responsive lightbox I have everything set up the way I want it (looking good) it is time for a tidy up.

Thanks again.

Hello


I am trying to add links to

Header menu
Info>useful links

Not having much success editing tpl_mega_menu.php

Can you kick an old guy in the right direction

Thanks in advance :)

My Apologies I missed

check to see that your EZ Pages sidebox is turned on in Admin/Configuration/EZ-Pages Settings

Quote:

---

Originally Posted by Uncle_Unix

Hello


I am trying to add links to

Header menu
Info>useful links

Not having much success editing tpl_mega_menu.php

Can you kick an old guy in the right direction

Thanks in advance :)

---

Quote:

---

Originally Posted by pewe

That explains it. :blush:

Been trying so many things to find a solution things have become a little confused.

Now with your stirling template and a responsive lightbox I have everything set up the way I want it (looking good) it is time for a tidy up.

Thanks again.

---

I am happy to hear that ;)

Thanks,

Anne

Quote:

---

Originally Posted by Uncle_Unix

My Apologies I missed

check to see that your EZ Pages sidebox is turned on in Admin/Configuration/EZ-Pages Settings

---

I am happy that you figured it out :)

Thanks,

Anne

Anne:

The items I have to put in my store fall into 2 catagories.

1. Items with a delivery cost specific to the item
2. Items which are for 'Collection Only'

I read with interest your article 'Set Up Per Item Shipping Rates' which - from my tests so far - appears to work as needed for the individual product delivery cost items
EXCEPT - when I view my cart it still shows the total weight where the cart tpl calls

Code:

---

<div class="cartTotalsDisplay important"><?php echo $totalsDisplay; ?></div>

---

I followed the instructions on your excellent blog page so I don't think I missed anything.

Have you any suggestions.

Thanks

Pewe

It's OK - ignore previous post ref weight. I have overcome that issue. :cool:

Quote:

---

Originally Posted by pewe

It's OK - ignore previous post ref weight. I have overcome that issue. :cool:

---

I am happy that you figured it out ;)

Thanks,

Anne

BS"D - I really like this Sterling-Grand Template... it's so clean and simple.
I am starting a fresh Website and it's going pretty well, but I have run into one snag...

In the Attributes Controller, when I choose a file to add an image to an attribute, it shows the name of the image file until I click "insert"... but the image file is not connected to the attribute. (The Yellow Dot that shows an image is attached is not there.) When I click Edit to try to add the image again it says "No File Chosen".
How can I get this to work properly? :-( Help!

Quote:

---

Originally Posted by mordechai

BS"D - I really like this Sterling-Grand Template... it's so clean and simple.
I am starting a fresh Website and it's going pretty well, but I have run into one snag...

In the Attributes Controller, when I choose a file to add an image to an attribute, it shows the name of the image file until I click "insert"... but the image file is not connected to the attribute. (The Yellow Dot that shows an image is attached is not there.) When I click Edit to try to add the image again it says "No File Chosen".
How can I get this to work properly? :-( Help!

---

I doubt this has anything to do with this template for it's files do not alter anything in the admin > attributes arena.

You can take a look at this post:
http://www.zen-cart.com/showthread.p...73#post1198673

BS"D

My hosting support solved the issue:

The cause of the issue was a permissions setting on a directory that the images were being saved to.

Thanks!

Quote:

---

Originally Posted by mordechai

BS"D

My hosting support solved the issue:

The cause of the issue was a permissions setting on a directory that the images were being saved to.

Thanks!

---

Glad you got it figured out!

Quote:

---

Originally Posted by rbarbour

Glad you got it figured out!

---

Ditto :)

Thanks,

Anne

I just downloaded this template and found some short-open tags in the file /includes/templates/stirling_grand/templates/tpl_modules_mobile_categories_tabs.php

Code:

---

  <li class="mshopping-cart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <? echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <? echo $currencies->format($_SESSION['cart']->show_total());?></a></li>

---

This should be changed to

Code:

---

  <li class="mshopping-cart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <?php echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a></li>

---

Quote:

---

Originally Posted by lat9

I just downloaded this template and found some short-open tags in the file /includes/templates/stirling_grand/templates/tpl_modules_mobile_categories_tabs.php

Code:

---

  <li class="mshopping-cart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <? echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <? echo $currencies->format($_SESSION['cart']->show_total());?></a></li>

---

This should be changed to

Code:

---

  <li class="mshopping-cart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <?php echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a></li>

---

---

I see these relate to the mobile template.
As I currently don't have a smartphone to test this, what effect would a mobile user see as a result of the missing 'php' tags.
Does putting them in change the screen content on a mobile? how

Thanks

Quote:

---

Originally Posted by lat9

I just downloaded this template and found some short-open tags in the file /includes/templates/stirling_grand/templates/tpl_modules_mobile_categories_tabs.php

Code:

---

  <li class="mshopping-cart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <? echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <? echo $currencies->format($_SESSION['cart']->show_total());?></a></li>

---

This should be changed to

Code:

---

  <li class="mshopping-cart"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <?php echo $_SESSION['cart']->count_contents();?> <?php echo HEADER_TITLE_CART_ITEMS; ?> - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a></li>

---

---

Thank you for posting. I do have this on a list of things to fix for a future update ;)

Thanks,

Anne

Quote:

---

Originally Posted by pewe

I see these relate to the mobile template.
As I currently don't have a smartphone to test this, what effect would a mobile user see as a result of the missing 'php' tags.
Does putting them in change the screen content on a mobile? how

Thanks

---

It will not be a problem for a large majority of users. If you are worried then just add in the changes posted to fix.

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

It will not be a problem for a large majority of users. If you are worried then just add in the changes posted to fix.
Thanks,

Anne

---

Not worried Anne :P
Just curious - but will add the changes anyway. :yes: