Westminster New

Another new responsive free template package built using the excellent DIY Responsive Template Default for v1.5.x by rbarbour. It uses a php mobile detect script to detect user agents and serve up the correct, optimized layout for the viewing device.

Be sure to read the readme.html file because installation is much different than my previous free templates. It has been simplified down to a 3 step process and includes an auto installer!



See the live demo here:

Westminster New

Template Features:

* Super flexible design perfect for all types of ecommerce stores--the possibilities are endless!
* Super easy 3 step install!
* Responsive 2 column display--single column home page layout
* Optimized Drop Down Navigation for hand held devices
* Matching CSS icons included
* CSS Buttons for easier multi language implementation
* Responsive Full Width Home Page slideshow included
* 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 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
* Tabbed product description, details, reviews, and a custom tab (ad your content using the banner manager) which converts automatically to accodions on hand held devices
* 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
* Cross Browser tested in Firefox, IE11, 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 , HTC One, Nokia Lumia 920, Google Nexus 7, Apple iPad Mini, Kindle
* W3C Valid XHTML and CSS
* Comes with the following modules installed: Column Layout Grid, About Us Page, Back to Top, Responsive Flexslider, Carousel Featured Products, Bestsellers Thumbnails, Flexible Footer Columns Menu, Easy Responsive Tabs, DG Reveiws on Product Info Page, Contact Us Add Subject, Left Slide Out Panel
* 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 here with your questions, or any bugs you find. Be sure to read the readme.html file included in the template package before posting your question, and read the posts in this thread as you question has probably already been asked and answered ;)


Thanks,

Anne

I for one can not decide which one I like better, Winchester or this one (Westminster New).

As always, great work Anne! :bigups:

Noticed this nice new template a few days ago when implementing Winchester.

Close call but I'd PROBABLY go with my current Winchester. But there are a couple of things I do like better with this new Westminster:

1. I like how the collapsable categories plugin (slimmenu something or other?) has a black highlight around the arrows; probably makes for better customer navigation.

2. I like how this template appears to be wider in desktop view.

Questions:

1. Would it be too difficult to do above on Winchester...especially wider in desktop?

2. How much of a conflict (if any) would there be in loading both templates onto the site? Would either work with just a click changing templates in admin?

Thanks.

Out of the two I've decided to go with this template, the home page slider better suits my needs.

I've noticed in the readme for both templates that - includes/init_includes/config.display_mode.php - is stated to be in the package, although it's not.

No doubt a typo.

Thank you for providing this template Anne, I'm implementing it in a heavily modded and customised site, it'll be a challenge but is seriously needed as 40% of this sites' traffic is mobile/tablet based, as no doubt is the case of most sites these days.

Installed template. Core file overwrites appear to be identical. Switching between Westminster and Winchester is a quick.

My eyes like Westminster better than Winchester. Could be color scheme but blue is not a color that I normally gravitate to.
I like that login, cart & checkout are better defined with text and images by default.
I like currency change visible by default.
My eyes like fade-in over sliding homepage.

Did you change the way Custom Left Slideout works? Something seems different on the good side.

Problem on both the demo and my sandbox:

Tap or click CATEGORIES button without using the expanded menu.

Next screen is

[HTML]Not Found The requested URL /' . HTTP_SERVER . DIR_WS_CATALOG . ' was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
[/HTML]

SPH:

Noticed this nice new template a few days ago when implementing Winchester.

Close call but I'd PROBABLY go with my current Winchester. But there are a couple of things I do like better with this new Westminster:

1. I like how the collapsable categories plugin (slimmenu something or other?) has a black highlight around the arrows; probably makes for better customer navigation.

2. I like how this template appears to be wider in desktop view.

Questions:

1. Would it be too difficult to do above on Winchester...especially wider in desktop?

2. How much of a conflict (if any) would there be in loading both templates onto the site? Would either work with just a click changing templates in admin?

Thanks.

You can load both templates on to your site and then just switch between them. They will not conflict with each other.

You can change the desktop width for Winchester Responsive by editing the width of div.onerow-fluid.fluidIsFixed in responsive.css and the .onerow-fluid at the very bottom of the responsive_default.css file.

Thanks,

Anne

simon1066:

Out of the two I've decided to go with this template, the home page slider better suits my needs.

I've noticed in the readme for both templates that - includes/init_includes/config.display_mode.php - is stated to be in the package, although it's not.

No doubt a typo.

Thank you for providing this template Anne, I'm implementing it in a heavily modded and customised site, it'll be a challenge but is seriously needed as 40% of this sites' traffic is mobile/tablet based, as no doubt is the case of most sites these days.

I am happy that you like the template ;)

The file is in files/includes/init_includes/init_display_mode.php in the zip file that I have uploaded.


Thanks,

Anne

RixStix:

Installed template. Core file overwrites appear to be identical. Switching between Westminster and Winchester is a quick.

My eyes like Westminster better than Winchester. Could be color scheme but blue is not a color that I normally gravitate to.
I like that login, cart & checkout are better defined with text and images by default.
I like currency change visible by default.
My eyes like fade-in over sliding homepage.

Did you change the way Custom Left Slideout works? Something seems different on the good side.

Problem on both the demo and my sandbox:

Tap or click CATEGORIES button without using the expanded menu.

Next screen is

[HTML]Not Found The requested URL /' . HTTP_SERVER . DIR_WS_CATALOG . ' was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
[/HTML]

Thanks for the catch!

I forgot to wrap the constant in the php tags. You can replace line 23 of the includes/templates/westminster_new/templates/tpl_modules_mobile_categories_tabs.php with this:

 <li class="test"><a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG; ?>" class="mshop"><?php echo HEADER_TITLE_CATEGORIES; ?></a>

I'll add this to the list for an update ;)

Thanks,

Anne

rbarbour:

I for one can not decide which one I like better, Winchester or this one (Westminster New).

As always, great work Anne! :bigups:

Thank you so much! Your opinion means a lot to me :smile:

Thanks,

Anne

RixStix:

Installed template. Core file overwrites appear to be identical. Switching between Westminster and Winchester is a quick.

My eyes like Westminster better than Winchester. Could be color scheme but blue is not a color that I normally gravitate to.
I like that login, cart & checkout are better defined with text and images by default.
I like currency change visible by default.
My eyes like fade-in over sliding homepage.

Did you change the way Custom Left Slideout works? Something seems different on the good side.

Problem on both the demo and my sandbox:

Tap or click CATEGORIES button without using the expanded menu.

Next screen is

[HTML]Not Found The requested URL /' . HTTP_SERVER . DIR_WS_CATALOG . ' was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
[/HTML]

Yes, I changed the slide out to a "on click" instead of the "on hover" so that it would work on tablets and mobile devices ;)

Thanks,

Anne

picaflor-azul:

The file is in files/includes/init_includes/init_display_mode.php in the zip file that I have uploaded.

Anne

Yes, I thought that was the case.

Slight alignment issue. I don't think size matters but this was a 7" touch device. I will try using a real phone later.

I stopped testing using Android tablets due to the menu issue.

FWIW: 11% of our site traffic stats is from Android devices.

==========================================
This is a phone.
Your UA is Mozilla/5.0 (Linux; Android 4.2.2; DX752 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.170 Mobile Safari/537.36

RixStix:

Slight alignment issue. I don't think size matters but this was a 7" touch device. I will try using a real phone later.

I stopped testing using Android tablets due to the menu issue.

FWIW: 11% of our site traffic stats is from Android devices.

==========================================
This is a phone.
Your UA is Mozilla/5.0 (Linux; Android 4.2.2; DX752 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.170 Mobile Safari/537.36

I just corrected the php mobile detect script on the demo. Give it another try and let me know if it looks different.



Thanks,

Anne

Here it is. Yes, there is some difference. Screengrab from phone.

The 7" has now decided to be difficult with screengrabs.

RixStix:

Here it is. Yes, there is some difference. Screengrab from phone.

The 7" has now decided to be difficult with screengrabs.

I suggest you stop editing the css files and layout until you get the full fix for the mobile detect. There are 2 issues which 1 was partially fixed in the winchester template by rbarour. Basically, the fix was to include the 2.0 workaround to call the correct css files. However, the code fix did NOT attempt to change ALL instances where specific device files are called. And this is where your issue comes in as the tpl header file is the same one called for mobile, tablet and desktop. But if you look in the common folder, you will see that the 2.1 code has specific headers for each device.

So the same logic has to be implemented, BUT it depends on whether you are using the switches on the templates. If you do NOT use the switches to change views, then you can use this code:

In tpl_main_page.php, find:

[PHP]
if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){


require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else {

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');
[/PHP]

change to:

[PHP]
if($detect->isMobile() && !$detect->isTablet() or $detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){


require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else {

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');
[/PHP]

A note on this is that is the tpl_header_tablet is not being called in the code. I don't know whether it was done on purpose by Anne. But if the tpl_header_tablet is suppose to be called for tablets then you can use this code:

[PHP]
if($detect->isMobile() && !$detect->isTablet() or $detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){

require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else if ($detect->isTablet() or $detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

require($template->get_template_dir('tpl_header_tablet.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_tablet.php');

} else {
require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');

} ?>
[/PHP]

If you are using the switches, then follow the posts I wrote in the winchester as you will have to add the session to each if statement. Also, you may have to modify other files if you are using the mobile detect code to call certain files.

yaritai:

I suggest you stop editing the css files and layout until you get the full fix for the mobile detect. There are 2 issues which 1 was partially fixed in the winchester template by rbarour. Basically, the fix was to include the 2.0 workaround to call the correct css files. However, the code fix did NOT attempt to change ALL instances where specific device files are called. And this is where your issue comes in as the tpl header file is the same one called for mobile, tablet and desktop. But if you look in the common folder, you will see that the 2.1 code has specific headers for each device.

So the same logic has to be implemented, BUT it depends on whether you are using the switches on the templates. If you do NOT use the switches to change views, then you can use this code:

In tpl_main_page.php, find:

[PHP]
if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){


require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else {

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');
[/PHP]

change to:

[PHP]
if($detect->isMobile() && !$detect->isTablet() or $detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){


require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else {

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');
[/PHP]

A note on this is that is the tpl_header_tablet is not being called in the code. I don't know whether it was done on purpose by Anne. But if the tpl_header_tablet is suppose to be called for tablets then you can use this code:

[PHP]
if($detect->isMobile() && !$detect->isTablet() or $detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){

require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else if ($detect->isTablet() or $detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

require($template->get_template_dir('tpl_header_tablet.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_tablet.php');

} else {
require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');

} ?>
[/PHP]

If you are using the switches, then follow the posts I wrote in the winchester as you will have to add the session to each if statement. Also, you may have to modify other files if you are using the mobile detect code to call certain files.

Ok, I understand now, with the help of rbarbour's explanation :smile: I will work on getting the demos working correctly and then update the template packages.

Thanks,

Anne

I just submitted an update to this template package. Changes were:

05/27/2014------Added includes/templates/westminster_new/templates/tpl_product_reviews_info_default.php

05/27/2014------Added admin control for turning the EZ Pages menu item on or off in includes/templates/westminster_new/templates/tpl_modules_mobile_categories_tabs.php

05/27/2014------Added includes/templates/westminster_new/css/responsive.css div#mobile-nav1.hidenav1 {display:none;}

05/27/2014------Fixed class "onerow-fluids" includes/templates/westminster_new/common/tpl_footer.php, includes/templates/westminster_new/common/tpl_header.php, includes/templates/westminster_new/common/tpl_header_mobile.php, includes/templates/westminster_new/common/tpl_header_tablet.php, includes/templates/westminster_new/common/tpl_main_page.php

05/27/2014------Added code to exclude main image and additional image popups from being responsive /includes/templates/westminster_new/common/html_header.php

05/27/2014------Fixed php mobile detect script includes/templates/westminster_new/templates/tpl_modules_mobile_categories_tabs.php

05/27/2014------Fixed php mobile detect script includes/templates/westminster_new/common/tpl_main_page.php

05/27/2014------Fixed broken link to home page in includes/templates/westminster_new/templates/tpl_modules_mobile_categoreis_tabs.php

Thanks,

Anne

Beautiful design Anne!

I understand the template is designed for v1.5.0 / 1.5.1 - has anyone successfully tried it on a 1.5.2 BETA?

Thanks guys

frank18:

Beautiful design Anne!

I understand the template is designed for v1.5.0 / 1.5.1 - has anyone successfully tried it on a 1.5.2 BETA?

Thanks guys

Thanks ;) No, I have not tested it on 1.5.2 but unless there are major changes, I would think all would work.

Thanks,

Anne

frank18:

Beautiful design Anne!

I understand the template is designed for v1.5.0 / 1.5.1 - has anyone successfully tried it on a 1.5.2 BETA?

Thanks guys

I just tested on 1.5.2 Beta and there was a problem with the installation. I'll work on it and let you know ;)

Thanks,

Anne