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.

Attachment 14980

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:

Quote:

---

Originally Posted by 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

Quote:

---

Originally Posted by 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

Quote:

---

Originally Posted by 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:

Code:

---

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

---

Remove line 92:

Code:

---

#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

Quote:

---

Originally Posted by 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

Quote:

---

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