Responsive Avonlee Contempo

soapycauldron:

Yet another awesome site from Piacaflor-Azul! Big big fan, I've used a couple of your templates over the years and they are always gorgeous. I had a few issues uploading but as usual it's a PICNIC error as it's been quite a few years since I've made any changes to my site. Had to upgrade from 1.3.8 to 1.5.4 (norty, slapped wrists all around). Anyway- thank you. Just a few more aesthetic tweaks and links to sort and we're ready to go live x

Demo site

That's great! Thank you so much for posting. You have made me smile ;)

Thanks,

Anne

First off,
Thank You Anne for such a great template that is easy to modify for my store. I have one question when viewing on my iPhone the shopping cart and home button located at the top bar is moved down below the bar. Where would I look to find the file to move them up?

Thank You again,
Randy

rtfulk:

First off,
Thank You Anne for such a great template that is easy to modify for my store. I have one question when viewing on my iPhone the shopping cart and home button located at the top bar is moved down below the bar. Where would I look to find the file to move them up?

Thank You again,
Randy

This template has not been updated to use php mobile detect and is relying solely on media queries. You will have to edit the responsive.css file.

Thanks,

Anne

Thank you for the direction. I have corrected the problem. If anyone else has this problem this is what I done.
In responsive.css

line 106 & 107 I changed to this
.m-cart{position:relative;margin-left:100px;}
.m-home{position:relative;margin-left:100px;}

Line 160 & 161 I changed to this.
.m-cart{position:relative;margin-left:100px;}
.m-home{position:relative;margin-left:100p;}

Randy

rtfulk:

Thank you for the direction. I have corrected the problem. If anyone else has this problem this is what I done.
In responsive.css

line 106 & 107 I changed to this
.m-cart{position:relative;margin-left:100px;}
.m-home{position:relative;margin-left:100px;}

Line 160 & 161 I changed to this.
.m-cart{position:relative;margin-left:100px;}
.m-home{position:relative;margin-left:100p;}

Randy

Thanks for posting your solution ;)

Thanks,

Anne

Hi Anne,

Thanks for the template! It's a great help!
I was wondering if it is possible to have a different logo image for the mobile devices?

Olga

Olga:

Hi Anne,

Thanks for the template! It's a great help!
I was wondering if it is possible to have a different logo image for the mobile devices?

Olga

This template is built using an older version of the diy responsive template default package and does not use php mobile detect so you can not use device specific php files or javascript. If you want to do this you will need to do it using media queries only or add a javascript to swap out the image in the main header file.

Thanks,

Anne

Anne,

More often than not clients are editing the define_main_page.php in admin using the built-in editor and ofc the php code which calls the slideshow is deprecated or butchered otherwise.

So I am testing an alternative. I completely removed the php code from the define_main_page.php and then edited

/includes/templates/responsive_avonlee_contempo/templates/tpl_index_default.php

Just before

<?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?>

I added the slider code

<!-- bof slider code --> 
<?php 
if ($this_is_home_page) { 
?> 
 <?php 
    if (RAV_SLIDES_STATUS == 'true') { 
?> 
      <?php require($template->get_template_dir('tpl_home_slider.php',DIR_WS_TEMPLATE, $current_page_base,'common') 
            . '/tpl_home_slider.php');?> 
<?php 
    } ?> 
<?php 
    } ?> 
<!-- eof slider code -->

Seems to work ok on my local dev site.

Do you see a problem with this? If not then this may solve the editing problems of the define_main_page.php using a common editor.

Cheers / Frank

frank18:

Anne,

More often than not clients are editing the define_main_page.php in admin using the built-in editor and ofc the php code which calls the slideshow is deprecated or butchered otherwise.

So I am testing an alternative. I completely removed the php code from the define_main_page.php and then edited

/includes/templates/responsive_avonlee_contempo/templates/tpl_index_default.php

Just before

> 
> I added the slider code
> 
> ```php
<!-- bof slider code --> 
<?php 
if ($this_is_home_page) { 
?> 
 <?php 
    if (RAV_SLIDES_STATUS == 'true') { 
?> 
      <?php require($template->get_template_dir('tpl_home_slider.php',DIR_WS_TEMPLATE, $current_page_base,'common') 
            . '/tpl_home_slider.php');?> 
<?php 
    } ?> 
<?php 
    } ?> 
<!-- eof slider code -->

Seems to work ok on my local dev site.

Do you see a problem with this? If not then this may solve the editing problems of the define_main_page.php using a common editor.

Cheers / Frank

Yes, this can be done. I always like to discourage clients from using an html editor because of the "bad" code that it generates ;)

Thanks,

Anne

Anne,

I was using Alysa Rounded on my website, which I loved, but I do not see it in the responsive format, so I decided to install Responsive Avonlee Contempo since they look similar enough, even though I really wanted Alysa Rounded as responsive. (Did you make that one?) Anyway, I noticed there are four SQL patches, and I was going to install them, but then I saw that the directions stated, "DO NOT INSTALL THE PATCH IF YOU HAVE PREVIOUSLY INSTALLED ONE OF OUR TEMPLATES OR HAVE RUN IT BEFORE." I do not believe Alysa Rounded used any of those SQL patches, but since I believe you created Alysa Rounded, I have used one of your templates before. Do I still install all four of those patches listed for Responsive Avonlee Contempo? Please let me know, because I do not want to install something I should not and then have a big mess. At the same time, when I do not install any of those, the template does not look correct, and the option in Configuration, Layout Settings for the Responsive Style is not there, so I am sure I must need to do at least a few of those SQL patches. My only hang-up is that the directions say not to install the patches if I have previously used one of your templates. Please let me know! Thanks! :-)

CookieMonster:

Anne,

I was using Alysa Rounded on my website, which I loved, but I do not see it in the responsive format, so I decided to install Responsive Avonlee Contempo since they look similar enough, even though I really wanted Alysa Rounded as responsive. (Did you make that one?) Anyway, I noticed there are four SQL patches, and I was going to install them, but then I saw that the directions stated, "DO NOT INSTALL THE PATCH IF YOU HAVE PREVIOUSLY INSTALLED ONE OF OUR TEMPLATES OR HAVE RUN IT BEFORE." I do not believe Alysa Rounded used any of those SQL patches, but since I believe you created Alysa Rounded, I have used one of your templates before. Do I still install all four of those patches listed for Responsive Avonlee Contempo? Please let me know, because I do not want to install something I should not and then have a big mess. At the same time, when I do not install any of those, the template does not look correct, and the option in Configuration, Layout Settings for the Responsive Style is not there, so I am sure I must need to do at least a few of those SQL patches. My only hang-up is that the directions say not to install the patches if I have previously used one of your templates. Please let me know! Thanks! :-)

If you try to upload the patches from your admin--tools--install sql patches and get an error then you most likely already have them installed. Doing this should not cause any thing to break, the patch will just not upload.

I would love to update the Alysa Rounded to be responsive and have this on my to do list. Unfortunately, the donations for this project are very low and I have to put my paid projects first (need to earn rent money ;) so I do not have any sort of eta as to when I can get to this. If you are interested in sponsoring the update, drop me an email.

Thanks,

Anne

Hello,
I have just setup this template on zen cart 1.5.3.
I am having trouble with a couple issues.

1. on pc - full site www.house6gifts.com on the home page how can I better align and or add space between images? I don't like how the images are against each other.

2. on mobile site - home page - the image overlaps the price and button. How can I fix this?

Thanks , Russ

Anne,

I have been trying to edit the responsive stylesheet for mobile use to allow the next/prev and return to product buttons to NOT be stacked upon each other.

I tried inserting the code in the first section and found that it also half changed the regular computer version..not happy with self so then moved it to the next section @media (max-width:480px) at the bottom of that set of codes.

two things need advice/help with

1. got them to be left justified but prev/next align with same distance from left side and product is a wee bit to the right more. Any way to get them all 3 to the left the same distance?

2. I gave them a margin of 1.55em to give them space between and it works, even when in horizontal (wide screen) view which then they are aligned like computer view.....but there is quite a gap between the last button and the image ---- again in wide view it is perfectly aligned and spaced.

This is the code I used:

.button_prev, .button_next,
.button_return_to_product_list{text-align:left;margin:1.55em;display:block;}

Is the space in the cell phone view to leave as it should be? I don't think it really poses and eye sore, cept to me...LOL
Thanks in advance.

If you want to see it in a cell phone or mobile media ---- BTW --- we are trying to please Google cause they claim that your templates are not mobile friendly due to text sizes too small and links are too close together.

http://www.desingerperfumesnob.com

DarkAngel:

Anne,

I have been trying to edit the responsive stylesheet for mobile use to allow the next/prev and return to product buttons to NOT be stacked upon each other.

I tried inserting the code in the first section and found that it also half changed the regular computer version..not happy with self so then moved it to the next section @media (max-width:480px) at the bottom of that set of codes.

two things need advice/help with

1. got them to be left justified but prev/next align with same distance from left side and product is a wee bit to the right more. Any way to get them all 3 to the left the same distance?

2. I gave them a margin of 1.55em to give them space between and it works, even when in horizontal (wide screen) view which then they are aligned like computer view.....but there is quite a gap between the last button and the image ---- again in wide view it is perfectly aligned and spaced.

This is the code I used:

.button_prev, .button_next,
.button_return_to_product_list{text-align:left;margin:1.55em;display:block;}

Is the space in the cell phone view to leave as it should be? I don't think it really poses and eye sore, cept to me...LOL
Thanks in advance.

If you want to see it in a cell phone or mobile media ---- BTW --- we are trying to please Google cause they claim that your templates are not mobile friendly due to text sizes too small and links are too close together.

http://www.desingerperfumesnob.com

My responsive templates, all of them even these old ones which do not use the latest version of the diy template default and rely solely on media queries, pass the google mobile friendly test out of the box. See the demo:

https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fwww.zenlyzen.com%2Fresponsive_zen_cart%2Findex.php%3Fmain_page%3Dindex%26template_switch_id%3Dresponsive_avonlee_contempo

If your site is not mobile friendly, it is due to changes that you have made to the template.

Thanks,

Anne

house6:

Hello,
I have just setup this template on zen cart 1.5.3.
I am having trouble with a couple issues.

1. on pc - full site www.house6gifts.com on the home page how can I better align and or add space between images? I don't like how the images are against each other.

2. on mobile site - home page - the image overlaps the price and button. How can I fix this?

Thanks , Russ

If you want to use a 3 column layout I would recommend making your product images smaller (less wide) in admin--images

Thanks,

Anne

Thanks Anne that worked great. I'm still new to ZC so I'm still feeling around. :smile:
I just came another visual issue on mobile view.
The products price under the category listing is one price off. The first products price is listed above the row for that product and on down the list all is priced wrong. Thanks in advance.

picaflor-azul:

My responsive templates, all of them even these old ones which do not use the latest version of the diy template default and rely solely on media queries, pass the google mobile friendly test out of the box. See the demo:

https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fwww.zenlyzen.com%2Fresponsive_zen_cart%2Findex.php%3Fmain_page%3Dindex%26template_switch_id%3Dresponsive_avonlee_contempo

If your site is not mobile friendly, it is due to changes that you have made to the template.

Thanks,

Anne

Not to argue the fact but no, this was tested in googles mobile frieindly page right after installation and it said that the links were too close and fonts too small for finger usage.

So it was not even edited at that point, just installed turned on then tested.

That said do you have any information to tell me or should I just ask in the open forum for others to see if they can offer assistance.

I was not diggin at your "work" I just thought you might like to know what google told us about her store templates.

DarkAngel:

Not to argue the fact but no, this was tested in googles mobile frieindly page right after installation and it said that the links were too close and fonts too small for finger usage.

So it was not even edited at that point, just installed turned on then tested.

That said do you have any information to tell me or should I just ask in the open forum for others to see if they can offer assistance.

I was not diggin at your "work" I just thought you might like to know what google told us about her store templates.

Since the issue is obviously inherent in the template package (demos pass with no problems) my guess is that you had other text on your home page, probably in your define_main_page.php that was breaking the responsiveness.

Just for the record, again, all of my responsive templates do pass the google mobile friendly test out of the box.

Thanks,

Anne

house6:

Thanks Anne that worked great. I'm still new to ZC so I'm still feeling around. :smile:
I just came across another visual issue on mobile view.
The products price under the category listing is one price off. The first products price is listed above the row for that product and on down the list all is priced wrong. Thanks in advance.

Can someone help please? I can't seem to fix this. Thank You.
ZC version 1.5.3

house6:

Can someone help please? I can't seem to fix this. Thank You.
ZC version 1.5.3

I had a pricing issue too and they had me go to admin/tools/store manager/reset prices (something like that), once clicked it puts the prices back like they ahould be...mine were not sorting properly when filtered to low-high or high to low.