Winchester Black Responsive Template

OLCS:

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:

Thanks

Lee

If you want to view the tablet view on a desktop and just resize the browser window then you need to use this url:

site url.com/index.php?main_page=index&display_mode=isTablet

so for my demo:

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

This will switch the user agent so you see the correct layout.

Thanks,

Anne

picaflor-azul:

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

position:relative;
z-index:1;

> 
> Thanks,
> 
> Anne

Great, thanks Anne, that's fixed it!

picaflor-azul:

If you want to view the tablet view on a desktop and just resize the browser window then you need to use this url:

site url.com/index.php?main_page=index&display_mode=isTablet

so for my demo:

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

This will switch the user agent so you see the correct layout.

Thanks,

Anne

Hi Anne,

That's what I am saying, I looked at your site on my desktop using the url http://weblyweb.com/win/index.php?main_page=index&display_mode=isTablet and agree that it displays correctly when you re-size the browser window.

However if I use my iPad and browse to http://weblyweb.com/win/index.php?main_page=index and view that in portrait mode on my iPad retina the menu icon appears as shown in the image on my post above, so I think there is something wrong in the stylesheet somewhere..

If I view on an iPhone 5 again it displays correctly, so there only appears to be something wrong with portrait orientation on an iPad Retina

Thanks

Lee

OLCS:

Hi Anne,

That's what I am saying, I looked at your site on my desktop using the url http://weblyweb.com/win/index.php?main_page=index&display_mode=isTablet and agree that it displays correctly when you re-size the browser window.

However if I use my iPad and browse to http://weblyweb.com/win/index.php?main_page=index and view that in portrait mode on my iPad retina the menu icon appears as shown in the image on my post above, so I think there is something wrong in the stylesheet somewhere..

If I view on an iPhone 5 again it displays correctly, so there only appears to be something wrong with portrait orientation on an iPad Retina

Thanks

Lee

I am sorry, but I can not see the problem:

http://durl.me/89ycwz

If you want to move the menu icon for portrait tablets you can do it in the responsive_tablet.css file.

Thanks,

Anne

picaflor-azul:

I am sorry, but I can not see the problem:

http://durl.me/89ycwz

If you want to move the menu icon for portrait tablets you can do it in the responsive_tablet.css file.

Thanks,

Anne

Scratch that. I do see it now.

Thanks,

Anne

OLCS:

Hi Anne,

That's what I am saying, I looked at your site on my desktop using the url http://weblyweb.com/win/index.php?main_page=index&display_mode=isTablet and agree that it displays correctly when you re-size the browser window.

However if I use my iPad and browse to http://weblyweb.com/win/index.php?main_page=index and view that in portrait mode on my iPad retina the menu icon appears as shown in the image on my post above, so I think there is something wrong in the stylesheet somewhere..

If I view on an iPhone 5 again it displays correctly, so there only appears to be something wrong with portrait orientation on an iPad Retina

Thanks

Lee

Ok, add this to the bottom of the styles for the portrait tablets in includes/templates/override/css/resonsive_tablet.css:

.safari #menu{top:30px;}

Then change this line:

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

to this:

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

Thanks,

Anne

Another small fix for safari mobile. Add this to both the landscape and portrait sections of the responsive_tablet.css file:

.safari input [type=submit], input[type=submit]{ -webkit-appearance: none;-webkit-border-radius: 0;}

Thanks,

Anne

picaflor-azul:

Ok, add this to the bottom of the styles for the portrait tablets in includes/templates/override/css/resonsive_tablet.css:

.safari #menu{top:30px;}

> 
> Then change this line:
> 
> ```
#menu{width:100%;position:absolute;top:0;left:0;z-index:9999;}

to this:

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

> 
> Thanks,
> 
> Anne

Scratch this.  I just noticed a mistake in the file.  To fix the problem you just need to remove this line in the /* ----------- iPads (portrait) ----------- */ section:

#menu{float:none;margin-top:-30px;width:50%;}

Thanks,

Anne

Hello Anne,

Can confirm the categories menu is now working fine on my ipad3 in portrait. Have the 3 horizontal menu dashes on top of eachother in the top right hand corner of the main page which drops down the categories, information and contact menus.

Btw, thank you for sharing this great template, really clean and simple. Extremely impressed!

Nathan

himmon:

Hello Anne,

Can confirm the categories menu is now working fine on my ipad3 in portrait. Have the 3 horizontal menu dashes on top of eachother in the top right hand corner of the main page which drops down the categories, information and contact menus.

Btw, thank you for sharing this great template, really clean and simple. Extremely impressed!

Nathan

Thanks for posing ;) I am happy that you like the template package.

Thanks,

Anne

picaflor-azul:

Scratch this. I just noticed a mistake in the file. To fix the problem you just need to remove this line in the /* ----------- iPads (portrait) ----------- */ section:

#menu{float:none;margin-top:-30px;width:50%;}

> 
> 
> Thanks,
> 
> Anne

Fantastic!  That's got it.  Thanks so much Anne!

OLCS:

Fantastic! That's got it. Thanks so much Anne!

Thank you for testing ;)

Thanks,

Anne

picaflor-azul:

Another small fix for safari mobile. Add this to both the landscape and portrait sections of the responsive_tablet.css file:

.safari input [type=submit], input[type=submit]{ -webkit-appearance: none;-webkit-border-radius: 0;}

> 
> Thanks,
> 
> Anne

Fantastic, you've fixed the search button too! 

Thanks Anne :)

hi, i love the look of this template, nice and dark. i would only give you a bit of feedback regarding the text colour. I noticed that it seems a bit too dark in the product detail page, that bit that can make reading hard for blinds like me :D :D :D

I would actually go for something much brighter than the menu for the description and the headers (description, details, reviews, categories, price, product name, etc) so highlighting it amongst the page. In marketing there is risk a potential buyer get distracted by brighter line of text on the page, and on this page there are already the categories, and the cross selling link below.

just my personal opinion, i'm able to mod a few lines of code to make it happen anyway. here is a moke up on how i would see it.

thanks for your time

satello:

hi, i love the look of this template, nice and dark. i would only give you a bit of feedback regarding the text colour. I noticed that it seems a bit too dark in the product detail page, that bit that can make reading hard for blinds like me :D :D :D

I would actually go for something much brighter than the menu for the description and the headers (description, details, reviews, categories, price, product name, etc) so highlighting it amongst the page. In marketing there is risk a potential buyer get distracted by brighter line of text on the page, and on this page there are already the categories, and the cross selling link below.

just my personal opinion, i'm able to mod a few lines of code to make it happen anyway. here is a moke up on how i would see it.

thanks for your time

This is true, I have noticed a few other places as well where the text could be lightened. I will include these in a future update.

You can change in stylesheet_responsive_tabs.css:

.resp-tabs-list li {
    font-weight: normal;
    font-size: 140%;
    text-transform:uppercase;
    display: inline-block;
    padding: 13px 15px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    float: left;
    color: #444;
}

to:

.resp-tabs-list li {
    font-weight: normal;
    font-size: 140%;
    text-transform:uppercase;
    display: inline-block;
    padding: 13px 15px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    float: left;
    color: #a0a0a0;
}

and change this in stylesheet.css:

.pi-reviews, #productDetailsList, #productDescription {
line-height: 22px;
color: #444;
}

to this:

.pi-reviews, #productDetailsList, #productDescription {
line-height: 22px;
color: #a0a0a0;
}

also in stylesheet.css change this:

h2 {
text-transform: uppercase;
font-weight: normal;
color: #444;
font-size: 140%;
font-weight: normal;
}

to this:

h2 {
text-transform: uppercase;
font-weight: normal;
color: #a0a0a0;
font-size: 140%;
font-weight: normal;
}

also in stylesheet.css change this:

#productName {
font-weight: normal;
font-size: 160%;
color: #444;
margin-top: 0px;
margin-bottom: 30px;
}

to this:

#productName {
font-weight: normal;
font-size: 160%;
color: #a0a0a0;
margin-top: 0px;
margin-bottom: 30px;
}

also in stylesheet.css change this:

h3.leftBoxHeading, h3.rightBoxHeading {
color: #444;
font-weight: normal;
font-size: 150%;
}

to this:

h3.leftBoxHeading, h3.rightBoxHeading {
color: #a0a0a0;
font-weight: normal;
font-size: 150%;
}

Thanks,

Anne

Love you Anne :clap: :clap: :clap: :clap: :clap: :clap:

Hello Anne,

The main page wide slide show banner plugin (zen colorbox-slideshow speed) appears to have a bug in that I cannot slow down the scroll speed which by default is 2500 Milliseconds.

I've changed this to 20 seconds so 20000 Milliseconds and it doesnt appear to make any difference. I've also changed this to multiple values, nothing seems work?

What is also odd is the slideshow seems to be disabled by default which is strange as it's scrolling.

Also would you please be able to confirm where is go to change the uppercasing of the content item description as shown in the screenshot attachment to normal casing?

One other issue is the "enter search keywords here" is extremely small to read in the top right search bar.

kind regards

Nathan

himmon:

Hello Anne,

The main page wide slide show banner plugin (zen colorbox-slideshow speed) appears to have a bug in that I cannot slow down the scroll speed which by default is 2500 Milliseconds.

I've changed this to 20 seconds so 20000 Milliseconds and it doesnt appear to make any difference. I've also changed this to multiple values, nothing seems work?

What is also odd is the slideshow seems to be disabled by default which is strange as it's scrolling.

Also would you please be able to confirm where is go to change the uppercasing of the content item description as shown in the screenshot attachment to normal casing?

One other issue is the "enter search keywords here" is extremely small to read in the top right search bar.

kind regards

Nathan

The main page slide show is not using zen colorbox. This is flexsldier. You can see the readme.html file for a link to the authors site and instructions on how to adjust the speed.

I am not sure what you mean by "the content item description" but any text-transform:uppercase; will be in the stylesheets.

Thanks,

Anne

picaflor-azul:

The main page slide show is not using zen colorbox. This is flexsldier. You can see the readme.html file for a link to the authors site and instructions on how to adjust the speed.

I am not sure what you mean by "the content item description" but any text-transform:uppercase; will be in the stylesheets.

Thanks,

Anne

Ah okay thank you, will take a look in the readme.

RE: "the content item description" Sorry, my mistake. Category Item description, the description Txt under the flower image in the attachment that's all in CAPITALS, would like to change it to normal case.

I'll take a look in the stylesheets as you mentioned.

Thanks,

Nathan

picaflor-azul:

The main page slide show is not using zen colorbox. This is flexsldier. You can see the readme.html file for a link to the authors site and instructions on how to adjust the speed.

I am not sure what you mean by "the content item description" but any text-transform:uppercase; will be in the stylesheets.

Thanks,

Anne

Hi Anne, you should probably adjust your documentation or the slide show image as your stock scrolling image say's "Manage Slide Show Via The Admin" which doesnt look to be the case as you mentioned I have to effectively edit, configure the flexslider jscript 2.1 unless I'm mistaken.

A slider that can be configured fully from admin would personally be much more convenient and preferable than having to ftp and modify a file with changes, especially to a basic simple user as myself and many others trying zen cart and your superb template for the first time.

Thanks