Winchester Black Responsive Template

This new responsive template package is based on the Winchester Responsive template package. Color palette has been changed to black. I had someone request this and thought it would be a popular option. Even though it is based on the Winchester Responsive package, I have updated it to include many bug fixes and added the zen colorbox plugin. Thanks goes to rbarbour for the Responsive DIY Template Default for v1.5.x for contributing the excellent responsive framework used to build this package.

See the live demo here:

Winchester Black Demo

Template features:

• Flexible design perfect for any type of e commerce store
• Flexible design perfect for any type of ecommerce store
• Super easy 3 step install!
• Responsive 2 column display--single column home page layout
• Optimized Drop Down Navigation for hand held devices
• Font Awesome CSS icons
• CSS Buttons
• Responsive Home Page slideshow
• 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, and Instagram.
• Customized product info page layout
• Responsive lightbox for product images, and lightbox gallery for additional product images
• 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 using emulators for: iPhone6, iPhone6 Plus, iPhone 5, iPhone 4, iPhone 3GS, iPad Retina, Nexus 4, Nexus 5, Galaxy Nexus, Nexus S, Nexus 10, Nexus 7, Vega No. 6, Vega R3, HTC One, HTC One Mini, HTC Evo, Xperia Z, Xiaomi Mi3, Xiaomi Mi 2, Ascend Mate2, Ascend G6, Lenovo K900, Lenovo A390, ZTE Grand S, ZTE Grand X, Galaxy Note4, Galaxy S5 - Note3, Galaxy S3 - Note2, Galaxy Note1, Galaxy S2 - S1, Galaxy Tab S, G3, G2, Optimus G Pro, Optimus G, Optimus View, G Pad 8.3
• W3C Valid XHTML and CSS
• Comes with the following modules installed: Column Layout Grid, About Us Page, Back to Top, Responsive Flexslider, 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, Zen Colorbox
• 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 really like the look of this template :bigups:

rbarbour:

I really like the look of this template :bigups:

Thanks! I hope that others will find it useful :smile:

Thanks,

Anne

Hi Anne,

I love this template. Thank you. I have noticed a small bug. I am using an iPad running native Safari. When the site is viewed in landscape mode the drop down menu is white text on black background. In portrait however this changes to black text on black background.

Lee

Hi Anne,

Sorry have also noticed another slight bug. Again on an iPad in portrait that when you click the menu icon and the drop down menu displays the logo gets shifted across to the right hand side of the page. On an iPhone 4 it doesn't do this, instead the menu sits nicely over the top of the logo.

Lee

OLCS:

Hi Anne,

I love this template. Thank you. I have noticed a small bug. I am using an iPad running native Safari. When the site is viewed in landscape mode the drop down menu is white text on black background. In portrait however this changes to black text on black background.

Lee

Thank you so much for pointing this out! I will be sure to fix this in the next update. For now, you can change #222 to #fff on line 259 of the stylesheet.css file

Thanks,

Anne

OLCS:

Hi Anne,

Sorry have also noticed another slight bug. Again on an iPad in portrait that when you click the menu icon and the drop down menu displays the logo gets shifted across to the right hand side of the page. On an iPhone 4 it doesn't do this, instead the menu sits nicely over the top of the logo.

Lee

Try this and let me know if it fixes it:

In includes/templates/override/css/responsive_tablet.css on line 83 change to this:

#menu{width:100%;position:absolute;top:0;left:0;z-index:9999;}

Remove line 92:

#menu{left:0;}

Thanks,

Anne

Here are a few more css changes that need to be made in the includes/templates/override/css/stylesheet.css file:

add:
#cartProdTitle{color:#000;}

line 112, change to:
#cartContentsDisplay td{padding-top:25px;padding-bottom:25px;border-bottom:1px solid #222;color:#000;}

line 349, change to:
.categoryListBoxContents a{font-size:110%;color:#a0a0a0;}

line 21, change to:
input:focus, select:focus, textarea:focus {background: #ccc;color:#000;}

line 20, change to:
TEXTAREA {margin: auto;display: block;width: 95%;border:1px solid #222;background:#000;margin-top:10px;margin-bottom:10px;color:#222;}

Thanks,

Anne

picaflor-azul:

Thank you so much for pointing this out! I will be sure to fix this in the next update. For now, you can change #222 to #fff on line 259 of the stylesheet.css file

Thanks,

Anne

Hi Anne,

Sorry there doesn't appear to be #222 on line 259 of the stylesheet.css file.

Line 259 is the following:

ul.slimmenu.collapsed li > ul {display: none;position: static;}

Thanks

Lee

Try this and let me know if it fixes it:

In includes/templates/override/css/responsive_tablet.css on line 83 change to this:

Code:
#menu{width:100%;position:absolute;top:0;left:0;z-index:9999;}
Remove line 92:

Code:
#menu{left:0;}

In the responsive_tablet.css there isn't anything on line 92, changing line 83 to what you suggested however does get the menu to display without shifting the logo, however the menu icon is now barely visible as it is hanging off the top of the screen...

Thanks

Lee

Sorry Anne,

Have also noticed that this core file is not listed in the overwrites in the install guide:

includes/classes/split_page_results.php

Hi Anne,

I have also noticed that when viewing the site on a desktop it is not possible to click/ type in the search box at the top of the page

Thanks

Lee

OLCS:

Hi Anne,

I have also noticed that when viewing the site on a desktop it is not possible to click/ type in the search box at the top of the page

Thanks

Lee

I will confirm on this. You can't work the search box on a desktop

OLCS:

Hi Anne,

Sorry there doesn't appear to be #222 on line 259 of the stylesheet.css file.

Line 259 is the following:

ul.slimmenu.collapsed li > ul {display: none;position: static;}

Thanks

Lee

I don't know what to tell you. I just downloaded the template package from the plugins section and this is on line 259:

ul.slimmenu.collapsed li a {display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.075);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;color:#222 !important;}

Change it to:

ul.slimmenu.collapsed li a {display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.075);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;color:#fff !important;}

Thanks,

Anne

OLCS:

In the responsive_tablet.css there isn't anything on line 92, changing line 83 to what you suggested however does get the menu to display without shifting the logo, however the menu icon is now barely visible as it is hanging off the top of the screen...

Thanks

Lee

I am not seeing this. Here is the template loaded to a test cart:

http://weblyweb.com/win/index.php?main_page=index&display_mode=isTablet

resize your desktop window to 768px wide

Thanks,

Anne

OLCS:

Sorry Anne,

Have also noticed that this core file is not listed in the overwrites in the install guide:

includes/classes/split_page_results.php

I'll make a note of this for a future upgrade.

Thanks,

Anne

OLCS:

Hi Anne,

I have also noticed that when viewing the site on a desktop it is not possible to click/ type in the search box at the top of the page

Thanks

Lee

In the stylesheet.css file add this to the #navMainSearch:

position:relative;
z-index:1;

Thanks,

Anne

Hi Anne,

picaflor-azul:

I don't know what to tell you. I just downloaded the template package from the plugins section and this is on line 259:

ul.slimmenu.collapsed li a {display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.075);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;color:#222 !important;}

> 
> Change it to:
> 
> ```
ul.slimmenu.collapsed li a {display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.075);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;color:#fff !important;}

Thanks,

Anne

Ah ok, I downloaded the template from your site rather than the plugins section. That particular line is line 258 in the one on your website...

I have now downloaded the plugin from the plugins section on here instead and uploaded that instead and made the change which has resolved the issue.

Thanks

Lee

OLCS:

Hi Anne,

Ah ok, I downloaded the template from your site rather than the plugins section. That particular line is line 258 in the one on your website...

I have now downloaded the plugin from the plugins section on here instead and uploaded that instead and made the change which has resolved the issue.

Thanks

Lee

Yes, I have already added the changes into the package on my site. I will submit an updated package in a while after more people have tested out the template ;)

Thanks,

Anne

picaflor-azul:

I am not seeing this. Here is the template loaded to a test cart:

http://weblyweb.com/win/index.php?main_page=index&display_mode=isTablet

resize your desktop window to 768px wide

Thanks,

Anne

Agreed, when displaying on a desktop using the link you provided and re-sizing the window the menu icon appears over the top of the specials bar in the top right of the screen. When viewing on an iPad Retina however the menu icon appears in the middle of the page and only half visible as the top is hanging off the page as below:

The menu icon is that little black sliver at the top of the screen

Thanks

Lee