Winchester Responsive

RixStix:

Top Specials Bar. Is this by design or a glitch? Our initial thought was to use this bar to highlight a link to an EZ page that would explain new features or functionality in an attempt to help customers get acquainted with a new look. Then, migrate to SPECIALS.

Quitting time today, so will pick up here tomorrow.

/bof top specials/
define('HEADER_TITLE_SPECIALS','<a href="index.php?main_page=specials">Specials</a>');
define('HEADER_TITLE_TOP_TEXT','FREE Shipping on all orders over $50.00!');

> 
> The HEADER_TITLE_SPECIALS link only appears on desktop displays and is removed when width steps down from full width or possibly tablets.  GalaxyTab 8 and 10 inch.  Both are 1280 x 800.  10inch displays both 'defines' in landscape.  8 inch only displays HEADER_TITLE_TOP_TEXT in landscape.  Do not have any means to test Apple devices.
> 
> The HEADER_TITLE_TOP_TEXT is displayed on all tablet devices that I can test but has no clickable link due to the above.

You can put any content in the top bar.  You can add your content by editing the define statements.  If you want the text to link somewhere, then just add a html link tag ;)  It is designed that the specials button will be hidden on mobile devices.  This is for space sake.

Thanks,

Anne

picaflor-azul:

It is designed that the specials button will be hidden on mobile devices. This is for space sake.

TNX. I thought that might be the case.

What do I change so that the space occupied by the collapsed menu does not overlay the logo in the mobile width? I have tried several settings but have yet to find the proper file and/or edit.

Purple width instead of green width.

[Attachment no longer available]

RixStix:

What do I change so that the space occupied by the collapsed menu does not overlay the logo in the mobile width? I have tried several settings but have yet to find the proper file and/or edit.

Purple width instead of green width.

[Attachment no longer available]

You will need to edit the responsive_mobile.css and the responsive_default.css (this is for devices whose user agent is not detected).

In responsive_default.css on line 182 change to:

#menu {
margin-top: -130px;
width: 50%;
float: right;

Thanks,

Anne

picaflor-azul:

In responsive_default.css on line 182 change to:

#menu {
margin-top: -130px;
width: 50%;
float: right;

I probably should stop working with the template until the entire category list can be displayed, but when the above code is changed in responsive_default.css, 2 instances of login and shopping cart appear on the page (desktop or mobile).

In my attempts to try to figure this out on my own, I found the page source code seems to indicate that they are there before the code is changed (maybe one is naturally hidden until the above code edit is made).

<!--eof handheld menu display--> <div id="mobile-nav1"> <a href="http://www.zenlyzen.com/responsive-zen-cart-templates/index.php?main_page=account"><i class="fa fa-user"></i></a> <a href="http://www.zenlyzen.com/responsive-zen-cart-templates/index.php?main_page=advanced_search"><i class="fa fa-search"></i></a> <div id="header-cart"> <a href="http://www.zenlyzen.com/responsive-zen-cart-templates/index.php?main_page=shopping_cart">0 - $0.00</a> </div> </div> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul class="back"> <li class="h-login"><a href="http://www.zenlyzen.com/responsive-zen-cart-templates/index.php?main_page=login">Log In / Register</a></li> </ul> </div> <br class="clearBoth" /> <div id="header-cart"> <a href="http://www.zenlyzen.com/responsive-zen-cart-templates/index.php?main_page=shopping_cart">0 - $0.00</a> </div> <!--eof-navigation display--> ```

The slideshow is a tad too tall for my client's preferences.. How do I change the height.. I tried simply resizing the images, but that didn't work..

Found a small typo in the auto-installer in the banner section
Change this line:

('', 'Packed with Features', 'http://www.picaflor-azul.com', 'banners/slide14.jpg', 'homepagesldie', NULL, '0', NULL, NULL, '0001-01-01 00:00:00', NULL, '1', '1', '1', '0'),

To this:

('', 'Packed with Features', 'http://www.picaflor-azul.com', 'banners/slide14.jpg', 'homepageslide', NULL, '0', NULL, NULL, '0001-01-01 00:00:00', NULL, '1', '1', '1', '0'),

DivaVocals:

Found a small typo in the auto-installer in the banner section
Change this line:

('', 'Packed with Features', 'http://www.picaflor-azul.com', 'banners/slide14.jpg', 'homepagesldie', NULL, '0', NULL, NULL, '0001-01-01 00:00:00', NULL, '1', '1', '1', '0'),

> 
> To this:
> ```
('', 'Packed with Features', 'http://www.picaflor-azul.com', 'banners/slide14.jpg', 'homepageslide', NULL, '0', NULL, NULL, '0001-01-01 00:00:00', NULL, '1', '1', '1', '0'),

Thanks for the catch! I have already fixed this for the next update which I will uploading soon.

Thanks,

Anne

DivaVocals:

The slideshow is a tad too tall for my client's preferences.. How do I change the height.. I tried simply resizing the images, but that didn't work..

You can edit the stylesheet_flex.css file line 27 min-height and max-height.

Thanks,

Anne

The template package has been approved and is available for download from the plugins section ;)

Thanks,

Anne

picaflor-azul:

You can edit the stylesheet_flex.css file line 27 min-height and max-height.

Thanks,

Anne

Doh!! Sorry.. It was late and I was coming off of a turnaround business trip.. Too tired to see this.. :laugh: Sadly I "looked" right at this and STILL missed it....

DivaVocals:

Doh!! Sorry.. It was late and I was coming off of a turnaround business trip.. Too tired to see this.. :laugh: Sadly I "looked" right at this and STILL missed it....

Ah, it happens all the time to me! Thank you so much for all of your help working out the bugs :hug:

Thanks,

Anne

picaflor-azul:

Ah, it happens all the time to me! Thank you so much for all of your help working out the bugs :hug:

Thanks,

Anne

Sure.. Happy to help.. :smile: You know I'm a BIG fan of your work.. Once I have the responsive version of TPP integrated with this template I'll send you a link to what I'm working on so you can see it..

would like to have the featured products scroller advance to the next 4 products versus the next single product as it currently does..

I know if I change this section in the includes/templates/winchester_responsive/templates/tpl_index_default.php and includes/templates/winchester_responsive/templates/tpl_index_categories.php files from:

<script type="text/javascript"><!--
      $(document).ready(function() {
          $("#foo1").carouFredSel({
       
      auto: false,
                align: "center",
                padding: [0, 25, 0, 20],
                width: "100%",
                height: "auto",
                items: {
          },
                scroll: 1,
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });

to:

<script type="text/javascript"><!--
      $(document).ready(function() {
          $("#foo1").carouFredSel({
       
      auto: false,
                align: "center",
                padding: [0, 25, 0, 20],
                width: "100%",
                height: "auto",
                items: {
          },
                scroll: 4,
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });

This works perfectly UNTIL.. you view it on a mobile device.. So how can I set it to scroll 4 on devices up to 979px and just scroll 1 at a time on smaller devices..

picaflor-azul:

Thanks for the catch! I have already fixed this for the next update which I will uploading soon.

Thanks,

Anne

So how does the typeo affect the site if the template has already been installed?

SPH:

So how does the typeo affect the site if the template has already been installed?

It means one of the slides won't display because the banner group is wrong.. Edit the slide in question.. change the banner group to the right banner group..

DivaVocals:

would like to have the featured products scroller advance to the next 4 products versus the next single product as it currently does..

I know if I change this section in the includes/templates/winchester_responsive/templates/tpl_index_default.php and includes/templates/winchester_responsive/templates/tpl_index_categories.php files from:

<script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 1, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); ``` > > to: > ``` <script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 4, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); ``` > > This works perfectly UNTIL.. you view it on a mobile device.. So how can I set it to scroll 4 on devices up to 979px and just scroll 1 at a time on smaller devices.. I am sorry, but I have no idea. My guess is that you will have to write some javascript. Thanks, Anne

DivaVocals:

would like to have the featured products scroller advance to the next 4 products versus the next single product as it currently does..

I know if I change this section in the includes/templates/winchester_responsive/templates/tpl_index_default.php and includes/templates/winchester_responsive/templates/tpl_index_categories.php files from:

<script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 1, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); ``` > > to: > ``` <script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 4, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); ``` > > This works perfectly UNTIL.. you view it on a mobile device.. So how can I set it to scroll 4 on devices up to 979px and just scroll 1 at a time on smaller devices.. Try: ``` <?php if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){ ?> <script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 1, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); --></script> <?php } else { ?> <script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 4, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); --></script> <?php } ?>

rbarbour:

Try:

<?php if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){ ?> <script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 1, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); --></script> <?php } else { ?> <script type="text/javascript"><!-- $(document).ready(function() { $("#foo1").carouFredSel({ auto: false, align: "center", padding: [0, 25, 0, 20], width: "100%", height: "auto", items: { }, scroll: 4, prev : { button : "#foo1_prev", }, next : { button : "#foo1_next", } }); }); --></script> <?php } ?>

Yes, that is the way to do it!  Thank you for pointing it out, I had forgotten about the device specific js that can be added with the new version of DIY responsive default, very cool :cool:

Thanks,

Anne

<p> **grrr**</p>