Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

Quote:

---

Originally Posted by TheGrimReaper

It looks like I'm also off on an adventure to dissect the includes/classes/categories_ul_generator.php to figure out how to remove the numbers.

---

Change Configuration :: My Store :: Show Category Counts to false.

Yes ma'am, but again what works for the full version, which is awesome, doesn't work for the alleged "responsive" mobile, which is not very friendly, not well supported and doesn't care what happens on the full version.

Just a side note: I don't use the Information box on the desktop, thus the problem doesn't show up. The mobile version forces it in there.

Well, DrByte...I got the email with your question, but see it isn't here anymore and yes...when lat9 pointed me that direction I turned it off but the mobile didn't respond in kind.

We're trying to get the mobile version of a very good template to behave because I'm a stubborn old man that doesn't give up easily and I'm not willing to give up on it...yet.

Now the doc(umentation) just put a new twist on the numbers thingy -"Key: SHOW_COUNTS
Path: Configuration > My Store
Description: Count recursively how many products are in each category, when I thought you said it doesn't count products. What'd I miss?

Now the Doc(umentation) just put a new twist in the basket,

Key: SHOW_COUNTS
Path: Configuration > My Store
Description: Count recursively how many products are in each category

Having a products count would be wildly desirable and a very valuable, useful feature. It's just the counting categories that puts the worm in my apple.

I DO think I recall that maybe the product count was in the Information box and I'll go back and see if that's true, but in the mobile it's seems to be counting only categories...which isn't real useful. Dang, now I gotta second guess myself and go back to see how stupid I am.

Ok, in the full version it counts the products in the categories not the categories - that's cool. That's what should be. The mobile version is counting categories, not products. Whew,.....

Turns out lat9 and I were both wrong about the counts in the responsive_classic mobile menu.

Those counts are not generated by Zen Cart at all. And they don't represent products or categories directly.
They're in javascript, and the numbers represent the number of sub-items in the menu's HTML, giving hints about how large the sub-menu will be if clicked.

You can turn off those counts in tpl_modules_mobile_menu.php by changing counters: true to counters: false here:

Code:

---

<script type="text/javascript">
  $(function() {
    $("#menu")
      .mmenu({
        slidingSubmenus : false,
        extensions : [ "theme-dark", "effect-listitems-slide" ],
        iconPanels: {
          add : true,
          visible: 1
        },
        navbar: {
          add : false
        },
        counters: true
      }).on('click', 'a[href^="#/"]', function() {
        alert("Thank you for clicking, but that's a demo link.");
        return false;
      });
  });
</script>

---

I don't use the categories sidebox because I don't need the redundancy of the top menu in a sidebox too. I mistakenly referred to it as the Information sidebox, (deep red blush) sorry folks. It's the categories in the mobile that has the issue.

In mobile:
The number in the information box reflects how many items are in it, mine has, and reflects 7. I don't need that number there, but at least it matches to the contents.

The categories box says I have 10 categories, which I do and some of those have the correct numbers for how many subs there are, which is accurate. So, the counting in the mobile tells us the number of only the next level of categories and those do not tell us how many products once the lowest level is reached. I see what it's doing, but trying to explain it confuses even this author. I'll try to figure out how to articulate it better............

Ok, the link "Categories" 10 - there ARE 10

Open that and we see
"Children's toys" 6

There are not 6 children's toys - right now there's 20 that I have in as of yet, but I have 6 sub-sub categories - this means it counts whatever is immediately below it and those numbers are correct.

The problem is, one gets the impression there are 6 children's toys, not 6 children's toys categories - thus the confusion and desire to ditch the numbers overall. I'm sure the counter is working as designed and it's wrong of me to say it isn't. If it went deeper and said "Ride on cars - 20" that would be accurate and ok, but then I'd want to have only those numbers and not the category counts.

It would also be great if at the "Childrens Toys" Level the number reflected the count of all products in all of the subs, thus products total, and upon descending the hierarchy it started to reflect the amount of toys in that sub cat, and so on until in the end all those sub, sub products totaled the 20 at the top-but I understand that is adding a bit of additional code and and realistically don't expect that. It would make a better though. For now, I'd settle for the numbers to go away in the mobile as they do in the full version when I turn them off.

I think that's a better explanation.........

Quote:

---

Originally Posted by DrByte

Turns out lat9 and I were both wrong about the counts in the responsive_classic mobile menu.

Those counts are not generated by Zen Cart at all. And they don't represent products or categories directly.
They're in javascript, and the numbers represent the number of sub-items in the menu's HTML, giving hints about how large the sub-menu will be if clicked.

You can turn off those counts in tpl_modules_mobile_menu.php by changing counters: true to counters: false here:

Code:

---

<script type="text/javascript">
  $(function() {
    $("#menu")
      .mmenu({
        slidingSubmenus : false,
        extensions : [ "theme-dark", "effect-listitems-slide" ],
        iconPanels: {
          add : true,
          visible: 1
        },
        navbar: {
          add : false
        },
        counters: true
      }).on('click', 'a[href^="#/"]', function() {
        alert("Thank you for clicking, but that's a demo link.");
        return false;
      });
  });
</script>

---

---

I think we diagnosed it just about the same time, good to know that both of us realized the same thing, and great that one of us has the smarts to know how to fix it. Gotta love teamwork, yes? Thank you DrB. I'll make the change.

Quote:

---

Originally Posted by DrByte

Turns out lat9 and I were both wrong about the counts in the responsive_classic mobile menu.

Those counts are not generated by Zen Cart at all. And they don't represent products or categories directly.
They're in javascript, and the numbers represent the number of sub-items in the menu's HTML, giving hints about how large the sub-menu will be if clicked.

You can turn off those counts in tpl_modules_mobile_menu.php by changing counters: true to counters: false here:

Code:

---

<script type="text/javascript">
  $(function() {
    $("#menu")
      .mmenu({
        slidingSubmenus : false,
        extensions : [ "theme-dark", "effect-listitems-slide" ],
        iconPanels: {
          add : true,
          visible: 1
        },
        navbar: {
          add : false
        },
        counters: true
      }).on('click', 'a[href^="#/"]', function() {
        alert("Thank you for clicking, but that's a demo link.");
        return false;
      });
  });
</script>

---

---

That did the trick.

Thank you DrByte!

Anybody feel like working out why on the mobile version my links in the "Important Links" don't show as they do in the full version? That would complete the menu issues and I can dig into the Rants and Raves showing between the centerbox and Header instead of in the menu. Just point me somewhere to look so I can beat the hell out of it.

Quote:

---

Originally Posted by TheGrimReaper

That did the trick.

Thank you DrByte!

Anybody feel like working out why on the mobile version my links in the "Important Links" don't show as they do in the full version? That would complete the menu issues and I can dig into the Rants and Raves showing between the centerbox and Header instead of in the menu. Just point me somewhere to look so I can beat the hell out of it.

---

The Rants and Raves, by the way, is built from lat9's Blank_Sidebox mod, which is also awesome.

Quote:

---

Originally Posted by TheGrimReaper

Anybody feel like working out why on the mobile version my links in the "Important Links" don't show as they do in the full version?

---

In the tpl_modules_mobile_menu.php template file, it builds those "Important Links" from the EZ-Pages Header, not from the sidebox.
You could try changing this:

Code:

---

  include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
  if (!empty($var_linksList)) {

---

to this:

Code:

---

  $var_linksList = $page_query_list_sidebox;
  if (!empty($var_linksList)) {

---

Quote:

---

Originally Posted by TheGrimReaper

the Rants and Raves showing between the centerbox and Header instead of in the menu.

---

The responsive_classic template uses a bunch of javascript to hide certain sections in mobile.
You need to add your custom-added sections so that it knows what to do.

To hide the sidebox on mobile:
/includes/templates/responsive_classic/jscript/jscript_responsive_framework.php

Code:

---

$('#manufacturers').css({'display': 'none', 'visibility': 'hidden'  });
$('#rantssidebox').css({'display': 'none', 'visibility': 'hidden'  });
$('#reviews').css({ 'display': 'none', 'visibility': 'hidden' });

---

If you want to copy the links you put in that sidebox's PHP/HTML so that they also appear in the mobile menu, add them manually to tpl_modules_mobile_menu.php:

Code:

---

<li><a href="put url here">put link text here</a></li>

---

You could maybe nest them inside a sub ul/li list if you wanted them grouped.

Quote:

---

Originally Posted by DrByte

The responsive_classic template uses a bunch of javascript to hide certain sections in mobile.
You need to add your custom-added sections so that it knows what to do.

To hide the sidebox on mobile:
/includes/templates/responsive_classic/jscript/jscript_responsive_framework.php

Code:

---

$('#manufacturers').css({'display': 'none', 'visibility': 'hidden'  });
$('#rantssidebox').css({'display': 'none', 'visibility': 'hidden'  });
$('#reviews').css({ 'display': 'none', 'visibility': 'hidden' });

---

If you want to copy the links you put in that sidebox's PHP/HTML so that they also appear in the mobile menu, add them manually to tpl_modules_mobile_menu.php:

Code:

---

<li><a href="put url here">put link text here</a></li>

---

---

Ok, I'll work on that. I'll go with the adding the links to the mobile.

Moving Rants and Raves to the mobile menu was a fun and educational challenge, thank you DrB. for the points!

I could have sat here until the Grim Reaper drew my name trying to figure out how to make it disappear from the centerbox and magically reappear in the menu. I'd never 'ave thunk of java.

Well, it looks like what I wanted. Thank you everybody that looked on, chimed in and got their giggles from all the happenings in this now updated thread. I hope a lot of people benefit from the trials we went through. Now I have to go cool off my carpal tunnels..........

Quote:

---

Originally Posted by TheGrimReaper

I'd never 'ave thunk of java.

---

and continue to not think of java....

think of javascript....

they are both coding languages.... but they are very different...

https://towardsdatascience.com/java-...9-a41ee2d3f78d

"...Java is to JavaScript as ham is to a hamster...."

Quote:

---

Originally Posted by carlwhat

and continue to not think of java....

think of javascript....

they are both coding languages.... but they are very different...

https://towardsdatascience.com/java-...9-a41ee2d3f78d

"...Java is to JavaScript as ham is to a hamster...."

---

I apologize for confusing you. I'm a much better person today having found this out. Maybe Santa, or is that Santa Clause, will be kinder to me come Christmas.
:blush:

Hello,

(V1.5.5)

We have a problem with "Your Total" field is squeezed on the page "Step 2 of 3 - Payment Information" when using Chrome browser on Desktop":
Attachment 19436

The same page is working fine in Firefox browser and mobile browser:
Attachment 19437

We cleared cookies and it did not help.

Please, advise where to look.

Thank you.

It's been identified before as a missing br in the code. I forget where the answer is but could have advised had I had a link to look at. It's those pesky posting tips....Not your standard Ipsum Lorem.:P

Was able to find the site from the image. There is a <br class="clearBoth"> after the .floatingBox .important .forward. If you add a <br> after it, it will straighten right up.

OR... add

Code:

---

fieldset#checkoutOrderTotals {clear: both;}

---

to your stylesheet.

Quote:

---

Originally Posted by dbltoe

Was able to find the site from the image. There is a <br class="clearBoth"> after the .floatingBox .important .forward. If you add a <br> after it, it will straighten right up.

OR... add

Code:

---

fieldset#checkoutOrderTotals {clear: both;}

---

to your stylesheet.

---

Thank you for reply.

So, for others to make it clear, change is done in file:

.../public_html/includes/templates/template_default/templates/tpl_checkout_payment_default.php

Search string is "floatingBox important forward"

Code:

---

<address><?php echo zen_address_label($_SESSION['customer_id'], $_SESSION['billto'], true, ' ', '<br />'); ?></address>
</div>

<div class="floatingBox important forward"><?php echo TEXT_SELECTED_BILLING_DESTINATION; ?></div>
<br class="clearBoth" /><br> <-add this code
<?php // ** BEGIN PAYPAL EXPRESS CHECKOUT **
      }
      // ** END PAYPAL EXPRESS CHECKOUT ** ?>

---

Question is though, should be this corrected file copied to custom_template or this issue is fixed in later Version?

(P.S. For stylesheet fix, which file should be edited?)

It's fixed in latest version.

And, again, it can be done in the stylesheet.

Sometime back a year or two, someone suggested adding stylesheet_zcustom.css to one's template to hold fixes just like this. Makes it easy to find changes you've made when troubleshooting or upgrading.

1.5.5f upgraded (standard upgrade as recommended) in 2016 from 1.3.9b..1.3.8
zero mods
Server OS: Linux 2.6.32-954.3.5.lve1.4.67.el6.x86_64
HTTP Server: Apache
PHP Version: 7.0.33 (Zend: 3.0.0)
MySQL Slow Query Log Status: On
MySQL Slow Query Log File: /var/log/slowqueries
MySQL Mode: NO_ENGINE_SUBSTITUTION
site is vinyldecalsuperstore dot com

My logged in customer menu drops to just "Home" and "Log In" when the HOME PAGE is selected. Adding additional items after viewing the Home page without first viewing cart gives a "Whoops!" Login Time Out message on screen. If someone logs in, adds to cart, and checks out, all processes fine.

Attachment 19439

Template selection made no difference.
Is there a simple fix for this?
I am working on an upgrade to 1.5.7b.

This is probably an easy answer, but I could not find this information anywhere in the forum and trial & error has not been on my side. I am trying to edit the colors of this template, so I found the colors stylesheet in the css for the desktop and tablet versions, evidently, as those have changed to the colors I want, but I cannot find where to edit the dark gray and medium gray colors in the attached mobile screenshot. Please tell me where the file and lines of code are "hiding" so I can edit those mobile colors. I am using the very latest version of ZenCart available. Thanks!

Background colors are set in stylesheet_colors.css around line 20.

Some colors are set in responsive_mobile.css.

I am using v157 and the responsive classic template. At the very top of the page where the black bar is that has "Home"/"Login" left side and search box right side I want to add this so that it displays in between those links and the search box. I have tried adding it to the tpl.header.php file but it is putting it above this black bar and adding white space. (www.discountprintingservice.com) Can anybody help me out?

<html>
<table>
<tr><a href="mailto:[email protected]">[email protected] m</a></strong>
</tr>
<tr><span style="color: #ff0000;"><strong>Call us <a title="contact us 678-859-7075" href="https://www.discountprintingservice.com/index.php?main_page=contact_us">(678)859-7075</a> 8AM-10PM (EST) 7 DAYS A WEEK!</strong></span>
</tr>
</html>

Quote:

---

Originally Posted by GoldBuckle

I am using v157 and the responsive classic template. At the very top of the page where the black bar is that has "Home"/"Login" left side and search box right side I want to add this so that it displays in between those links and the search box. I have tried adding it to the tpl.header.php file but it is putting it above this black bar and adding white space. (www.discountprintingservice.com) Can anybody help me out?

<html>
<table>
<tr><a href="mailto:[email protected]">[email protected] m</a></strong>
</tr>
<tr><span style="color: #ff0000;"><strong>Call us <a title="contact us 678-859-7075" href="https://www.discountprintingservice.com/index.php?main_page=contact_us">(678)859-7075</a> 8AM-10PM (EST) 7 DAYS A WEEK!</strong></span>
</tr>
</html>

---

Should be OK to use tpl.header.php - after

Code:

---

<!--bof navigation display-->
<div id="navMainWrapper" class="group onerow-fluid">

---

Quote:

---

Originally Posted by marton_1

Background colors are set in stylesheet_colors.css around line 20.

Some colors are set in responsive_mobile.css.

---

I appreciate your reply, but I cannot find it. It looks like I am looking for colors 333 and 666, the dark gray and light gray colors on mobile, but I have changed all occurrences of them in those two files, responsive_mobile.css and stylesheet_colors.css, and even when I clear my cache and do a refresh of the mobile page, the colors aren't changing. I just cannot find the file and lines of code to change these two colors, so if anyone knows, please let me know.

Quote:

---

Originally Posted by marton_1

Should be OK to use tpl.header.php - after

Code:

---

<!--bof navigation display-->
<div id="navMainWrapper" class="group onerow-fluid">

---

---

Thank you! This is almost what I want. It is above the line of the "Home" and "Log In" links, I want it to be directly in between those and the search box. Also I noticed you can't see all of it on my phone the first line is cut off. Looks okay on desktop just in wrong spot.

Also, I would like for it to be same font but larger text, can I change that in the css without messing with all the other font sizes?

Is there a set of buttons for the links inside of each sidebox that works well with Responsive Classic template? And will using buttons make it less mobile friendly?

Quote:

---

Originally Posted by CookieMonster

I appreciate your reply, but I cannot find it. It looks like I am looking for colors 333 and 666, the dark gray and light gray colors on mobile, but I have changed all occurrences of them in those two files, responsive_mobile.css and stylesheet_colors.css, and even when I clear my cache and do a refresh of the mobile page, the colors aren't changing. I just cannot find the file and lines of code to change these two colors, so if anyone knows, please let me know.

---

Line 21 of responsive_mobile.css changes the second light gray color. However, it only changes it on my desktop when I am viewing as mobile, not on my mobile device, which is odd, and I will have to look into. However, I still cannot find where to change the top dark gray bar on mobile.

Quote:

---

Originally Posted by GoldBuckle

I am using v157 and the responsive classic template. At the very top of the page where the black bar is that has "Home"/"Login" left side and search box right side I want to add this so that it displays in between those links and the search box. I have tried adding it to the tpl.header.php file but it is putting it above this black bar and adding white space. (www.discountprintingservice.com) Can anybody help me out?

<html>
<table>
<tr><a href="mailto:[email protected]">[email protected] m</a></strong>
</tr>
<tr><span style="color: #ff0000;"><strong>Call us <a title="contact us 678-859-7075" href="https://www.discountprintingservice.com/index.php?main_page=contact_us">(678)859-7075</a> 8AM-10PM (EST) 7 DAYS A WEEK!</strong></span>
</tr>
</html>

---

Please limit your requests to one thread. You're asking the same thing in multiple places. eg How do I add these elements to my header?

Quote:

---

Originally Posted by CookieMonster

This is probably an easy answer, but I could not find this information anywhere in the forum and trial & error has not been on my side. I am trying to edit the colors of this template, so I found the colors stylesheet in the css for the desktop and tablet versions, evidently, as those have changed to the colors I want, but I cannot find where to edit the dark gray and medium gray colors in the attached mobile screenshot. Please tell me where the file and lines of code are "hiding" so I can edit those mobile colors. I am using the very latest version of ZenCart available. Thanks!

---

We always add stylesheet_zcustom.css to our CSS folder and use it to store changes we make to the site. Keeps them all in one place where we can find them.

Either there, are at the end of any stylesheet you prefer, you can add

Code:

---

/* BOF Color Changes jquery.mmenu.all.css  (for menu in mobile view) */
    /*.mm-menu.mm-theme-dark, .header {background:none !important;}*/
    /*  These settings control the colors of the top nav bar in Mobile/Tablet view */
    .mm-menu.mm-theme-dark.mm-vertical {color:#FFFFFF !important;/*font-weight:bold;*/}
    a.mm-next.mm-fullsubopen::after {border-color: #FFFFFF !important;}
    i.fa.fa-bars {color: #FFFFFF;}
    /*i.fa.fa-home:hover, i.fa.fa-arrow-circle-up:hover, i.fa.fa-sign-in:hover  {color:#f66;}*/
    #navMain ul li a:hover, #navSupp ul li a:hover{color:#FFFFFF;}
    em.mm-counter, .mm-next {color:#FFFFFF !important;}
/* EOF Color Changes jquery.mmenu.all.css (for menu in mobile view) */

---

NOTE: This is a quick grab from one of our sites and you may or may not want the three lines commented out for your application. The !important needs to be used as there is no guarantee that even the stylesheet_zcustom.css will load last on any page or responsive view.

Of course, the colors are yours to play with.

Quote:

---

Originally Posted by dbltoe

We always add stylesheet_zcustom.css to our CSS folder and use it to store changes we make to the site. Keeps them all in one place where we can find them.

Either there, are at the end of any stylesheet you prefer, you can add

Code:

---

/* BOF Color Changes jquery.mmenu.all.css  (for menu in mobile view) */
    /*.mm-menu.mm-theme-dark, .header {background:none !important;}*/
    /*  These settings control the colors of the top nav bar in Mobile/Tablet view */
    .mm-menu.mm-theme-dark.mm-vertical {color:#FFFFFF !important;/*font-weight:bold;*/}
    a.mm-next.mm-fullsubopen::after {border-color: #FFFFFF !important;}
    i.fa.fa-bars {color: #FFFFFF;}
    /*i.fa.fa-home:hover, i.fa.fa-arrow-circle-up:hover, i.fa.fa-sign-in:hover  {color:#f66;}*/
    #navMain ul li a:hover, #navSupp ul li a:hover{color:#FFFFFF;}
    em.mm-counter, .mm-next {color:#FFFFFF !important;}
/* EOF Color Changes jquery.mmenu.all.css (for menu in mobile view) */

---

NOTE: This is a quick grab from one of our sites and you may or may not want the three lines commented out for your application. The !important needs to be used as there is no guarantee that even the stylesheet_zcustom.css will load last on any page or responsive view.

Of course, the colors are yours to play with.

---

THANK YOU, DBLTOE. That is EXACTLY what I needed! I appreciate it so much.

When I go to a product and click on "Ask a Question," it shows "No Picture Available" above the Ask A Question Contact Form even though the item has a picture. Also, when I try to "Send" a message about the item in the Ask A Question Contact Form, it takes me to a page that says, "Sorry, the product was not found" and shows other available products. And the Ask a Question e-mail never sends as it is not in E-mail Archive Manager. I am using Version 1.5.7b and this Responsive Classic Template. I have added on E-mail Archive Manager, Image Handler 5, and the Contact Form Non CAPTCHA plug-ins. Everything else appears to be working with the template. Any ideas? If nothing else, can I shut off the "Ask a Question" feature through the admin or changing some code? If so, what do I need to do, please?

Quote:

---

Originally Posted by CookieMonster

If nothing else, can I shut off the "Ask a Question" feature through the admin or changing some code? If so, what do I need to do, please?

---

There's a switch in Admin > Catalog > Product Types > Layout Settings.

Quote:

---

Originally Posted by simon1066

There's a switch in Admin > Catalog > Product Types > Layout Settings.

---

Great; thanks, simon1066! That works for now. If anyone reads this and knows of a way to fix this so I can use the Ask a Question feature, please let me know. I don't know if it is a bug affecting everyone or if I did something wrong, but I feel like I installed everything correctly and didn't add on too much.

Quote:

---

Originally Posted by CookieMonster

If anyone reads this and knows of a way to fix this so I can use the Ask a Question feature, please let me know. I don't know if it is a bug affecting everyone or if I did something wrong

---

It's not affecting everyone.
Feels like something amiss with alterations made to your template, eg tpl_product_info_display.php (assuming you're using Product General, adapt filename for other product-types).
Two approaches one could take for researching: compare your customized tpl_product_info_display.php with the original and see what's different in that part of the file (probably has a change made to the product ID); ... or turn the feature back on and post a link to the page so we can look at the raw HTML generated and compare it with a working site in order to find approximate clues to what might be wrong/different. You could compare the raw html to that of a working site as well. eg WinMerge

To make it as easy as possible for customers to contact us from any page on our site (discountprintingservice.com) I added this to my header.php file on line 23:

define('HEADER_SALES_TEXT2', 'Need Help? Call <b>(XXX)-XXX-XXXX</b><br><b>8AM to 10PM - 7 DAYS/WEEK!</b> (eastern standard time)<br>E-mail quote requests to <a href="mailto:[email protected]">[email protected] m</a>');

And to fill the unattractive empty white space I created an image at 1429pxx215px that I have added as a background image to my header logo wrapper by adding this to line 102 of my stylesheet.css

#logoWrapper {
width:100%;
height:215px;
background-image:url('../images/discount_printing_service_online_print_copy_shop.jpg');
background-repeat:no-repeat;
}

It looks great on my desktop but when I make the window smaller the background image is not responsive. I need it to scale down in size and I need help with the code to accomplish that.
Thanks in advance!
John

A quick trick we have used is to move the logo to the beginning of the define_main_page and make the logo wrappper a display none but, you would want to leave the center info in the wrapper.

Just one quick thought. Hope to get full power today and maybe full water this week. I'll look again when power is back

Quote:

---

Originally Posted by dbltoe

A quick trick we have used is to move the logo to the beginning of the define_main_page and make the logo wrappper a display none but, you would want to leave the center info in the wrapper.

Just one quick thought. Hope to get full power today and maybe full water this week. I'll look again when power is back

---

Thank you, hope all is back to normal for you. If you get a change to look at it again and see how I can make the background image responsive I would greatly appreciate it. All of my images on the define_main_page.php resize just fine so why is this background image not?:huh:

Thanks, we have full power but the water still has to be shut off when not in use. Waiting now on UPS to deliver the last part to make the pressure work.

You are currently overriding the responsiveness of the template by hard coding a height and width to the image. That overrides lines 12 and 13 of responsive.css which are

Code:

---

/* This is used to re-size images */
img{max-width:100%;height:auto;border:0;}

---

Still, as you may have already noticed, the logo was not designed to be a banner. It was meant to approximate the size of the column width and is set in includes/languages/english/YOUR_TEMPLATE/header.php to a specific alt text, width, height, and image name. The default width of 200 will work just fine with the template in any mode.

NOTE: I will be submitting a change to the docs as the modern browsers do not like anything but numerical information on either the store or admin logo sizes. The docs should say

Code:

---

define('HEADER_ALT_TEXT', 'My new alt text');
define('HEADER_LOGO_WIDTH', '200');
define('HEADER_LOGO_HEIGHT', '80');
define('HEADER_LOGO_IMAGE', 'newlogo.png');

---

vs

Code:

---

define('HEADER_ALT_TEXT', 'My new alt text');
define('HEADER_LOGO_WIDTH', '200px');
define('HEADER_LOGO_HEIGHT', '80px');
define('HEADER_LOGO_IMAGE', 'newlogo.png');

---

Next, you're going to say but, "My img is set to 207 by 100." That's just the standard logo in the middle of your banner. The background image is 1429 pixels wide! The .onerow-fluid in the stylesheet (line 24 of stylesheet.css) is already dropping that width to 75% and you want more.

You're asking the system to turn a banner that crosses over the street into a hand-held sign.

You can see some examples of how we handled this in other cases:

1. Move the logo into the define_main_page. -- https://texasleathercoozy.com
2. Make the logo smaller and center it in the presentation. -- https://enightlights.com
3. Change lots of div positions while dropping-down the side columns at a certain point -- https://haredo.com

In each of the above cases, start with a maximized browser and just click to un-maximize and use the right-hand edge of the browser to draw it left and smaller. You will see the affects of each site are different in operation with the haredo site having the most affect on legibility.

I would say that the haredo method is probably your best bet BUT, you will need to make it into ONE image that the system can work with and be legible at all stops along the way.

Hi all, I know I'm not the first person to have this question but having trouble locating the solution so hoping someone can point me in the right direction. I'm wanting the hamburger menu that is default on the mobile and tablet versions of the site to "appear" on the default layout when the screen width hits a certain width (but leave the regular horizontal menu for wider screens). Right now, the sideboxes are hidden to conserve space and it makes navigation difficult without the drop-down menu on the mobile versions.

Using 1.5.7c. Website is www.thecoinauthority.com.

Thanks in advance!

Quote:

---

Originally Posted by mcqueeneycoins

Hi all, I know I'm not the first person to have this question but having trouble locating the solution so hoping someone can point me in the right direction. I'm wanting the hamburger menu that is default on the mobile and tablet versions of the site to "appear" on the default layout when the screen width hits a certain width (but leave the regular horizontal menu for wider screens). Right now, the sideboxes are hidden to conserve space and it makes navigation difficult without the drop-down menu on the mobile versions.

Using 1.5.7c. Website is www.thecoinauthority.com.

Thanks in advance!

---

The underlying complexity with your request is the responsive_classic template's use of the Mobile_Detect.php class's detection of the device-type, e.g. iPhone vs iPad, making the request to your site's server. That's what determines whether/not that "hamburger menu" is created.

Thanks for the quick reply. I understand the mobile detect element, but if I'm viewing on a desktop the mobile detect script doesn't trigger, and as I make the browser window smaller the elements of the desktop site (sideboxes, etc) disappear and the nav menu more difficult to use. Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

@mcqueenycoins. Somehow, you have managed to turn the responsive_classic mobile settings into a 1920 US Silver Dollar.

Missing in action. I would drop back to the original responsive_classic from your current template, use lat9's Clone a Template to make a copy of responsive_classsic to play with.

IMHO the desktop user is not going to be looking for a hamburger and will be much more likely to appreciate normal desktop navigation.

Quote:

---

Originally Posted by mcqueeneycoins

Thanks for the quick reply. I understand the mobile detect element, ...

Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

---

The best way to "trick" mobiledetect is to tell your browser to simulate mobile. Or if it doesn't have that option (most do), you could try telling it to fake its UserAgent to that of a mobile device.

Or, use a more standards-based template like the Bootstrap 4 template, which naturally adapts to resized windows regardless of what device is in use.

Quote:

---

Originally Posted by mcqueeneycoins

Thanks for the quick reply. I understand the mobile detect element, but if I'm viewing on a desktop the mobile detect script doesn't trigger, and as I make the browser window smaller the elements of the desktop site (sideboxes, etc) disappear and the nav menu more difficult to use. Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

---

Bear in mind that with responsive_classic if you are changing the browser width by squeezing or stretching the window, you have to do a refresh (often via CTRL+R) once you get to the desired width so the screen can be repainted.

A real device doesn't just change its width (unless of course you use a large hammer).

Thanks everyone for the input. Sounds like this may be a little harder than I was envisioning. I have seen it done on other (non zen-cart) sites, so figured it would be a fairly straightforward code change, but guess not! I'll keep playing with the template and see if I can come up with a satisfactory solution. I agree desktop users are not looking for a mobile website version, but do think there are times when there is a need to make a window smaller and just want the "experience" to be seamless as much as possible. In other words, when the browser window is the size of a mobile device, have it look/act like the mobile website, and when it's a normal size, act like the desktop site. Thanks again, and please continue sharing any tips/tricks/opinions I can/should consider.

Quote:

---

Originally Posted by DrByte

The best way to "trick" mobiledetect is to tell your browser to simulate mobile. Or if it doesn't have that option (most do), you could try telling it to fake its UserAgent to that of a mobile device.

Or, use a more standards-based template like the Bootstrap 4 template, which naturally adapts to resized windows regardless of what device is in use.

---

Quote:

---

Originally Posted by mcqueeneycoins

Thanks everyone for the input. Sounds like this may be a little harder than I was envisioning. I have seen it done on other (non zen-cart) sites, so figured it would be a fairly straightforward code change, but guess not! I'll keep playing with the template and see if I can come up with a satisfactory solution. I agree desktop users are not looking for a mobile website version, but do think there are times when there is a need to make a window smaller and just want the "experience" to be seamless as much as possible. In other words, when the browser window is the size of a mobile device, have it look/act like the mobile website, and when it's a normal size, act like the desktop site. Thanks again, and please continue sharing any tips/tricks/opinions I can/should consider.

---

Echoing DrByte's response, that template (https://www.zen-cart.com/downloads.php?do=file&id=2191) will provide the functionality that you're looking for.

I added a couple of small images to tpl_header around line 43 under "navMainWrapper" here

Code:

---

<div id="navMainWrapper" class="group onerow-fluid">

---

They show up fine in desktop view but not in mobile or tablet.

I tried adding an IF statement like below to tpl_header and adding the images under that but just crashed my test site.

Code:

---

if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {

---

Is there an easy way to achieve my aim of showing on mobile and tablet?

The navMainWrapper is shut off in mobile devices with the responsive#####.css style sheets. You can either her turn them (or portions) back on in the stylesheets or place the imag s outside the wrapper

Quote:

---

Originally Posted by dbltoe

The navMainWrapper is shut off in mobile devices with the responsive#####.css style sheets. You can either her turn them (or portions) back on in the stylesheets or place the imag s outside the wrapper

---

I could fix my problem using CSS, thank you for your help.

First THANK YOU for the lovely responsive_classic template, it's awesome especially the mobile version :)
I have been trying to do a few things with it, I'm not that knowledgeable with php or css, but can follow instructions and even attempt a few things myself on occasions :)

Ok, what I want to do it put a header on the VERY TOP of the website to show up all the time...Something that says:
"Standard Flat Rate Shipping $9.95 | Shipping Australia Wide" with a link to my shipping link.

https://imgur.com/UACWbqY (View link)

I have looked everywhere to no avail, I found a post (can't find that post again) suggested by DrByte I think to use the public notice of a website maintenance, which helped but the problem is it shows the ERROR image and adjusting the text and the background colour and size hasn't been easy, no luck. (All I could do was center the text, plus it centered the text on all my website error messages so editing this is probably not good as it will edit all the warning errors at once.)
Can you please advise if there is a better way to achieve the same result? I'm sure there is somewhere.

Quote:

---

Originally Posted by rlexyd

First THANK YOU for the lovely responsive_classic template, it's awesome especially the mobile version :)
I have been trying to do a few things with it, I'm not that knowledgeable with php or css, but can follow instructions and even attempt a few things myself on occasions :)

Ok, what I want to do it put a header on the VERY TOP of the website to show up all the time...Something that says:
"Standard Flat Rate Shipping $9.95 | Shipping Australia Wide" with a link to my shipping link.

https://imgur.com/UACWbqY (View link)

I have looked everywhere to no avail, I found a post (can't find that post again) suggested by DrByte I think to use the public notice of a website maintenance, which helped but the problem is it shows the ERROR image and adjusting the text and the background colour and size hasn't been easy, no luck. (All I could do was center the text, plus it centered the text on all my website error messages so editing this is probably not good as it will edit all the warning errors at once.)
Can you please advise if there is a better way to achieve the same result? I'm sure there is somewhere.

---

You could do that with a header-based banner (via the admin's Banner Manager). Although for a different reason, see this GitHub posting (https://github.com/lat9/ZCA-Bootstra...ment-874775344) for additional information.

Thank you for your reply Cindy.

To be honest, I was looking at putting that message either ABOVE of the HOME | LOG IN Header or in the MIDDLE of the HOME | LOG IN Header.

The Github suggestion seems to show the Text under the tagline which is in the logo area, which isn't really what I want.
(p.s I tried it anyway by adding a new banner but it didn't show up anyway, but no matter as it's not really it.)

I hope there is another method to do it like what I am after?!

Thank you once again.

https://docs.zen-cart.com/user/admin...anner_manager/ for banners.

Thank you for sending me the banner link, I read that, it doesn't display a banner on top.
Again, not really much use for me as I want a banner or header to show on TOP on the header home-login top.

Quote:

---

Originally Posted by rlexyd

Thank you for sending me the banner link, I read that, it doesn't display a banner on top.
Again, not really much use for me as I want a banner or header to show on TOP on the header home-login top.

---

See this (https://vinosdefrutastropicales.com/...e=article&p=26) article that identifies the built-in Zen Cart banner locations. It sounds like you're "looking for" content in Header Position 1.

Great, that's it. Thank you :)
I finally managed to do it after spending days trying to figure it out, all I had to do was follow what you said.
Now is there a way to get that to display correctly on Mobile view on the Header?! That's where I really would like it to show correctly.
It shows on the Header and Footer on PC browsers, but only shows on footer correctly on my mobile, the banner is half hidden behind the header.
(Please view photo: https://imgur.com/fHJgpLo)

Also, while you are reading this, is there a way (in Mobile device view) to force additional images to display in 2 instead of one as I have they take too much space if I have a few images under each other. I tried to play with mobile css with no luck.
(Please view photo: https://imgur.com/nKpsp5v)

Thank you VERY much once again.

Sorry, I am also getting an error log re: images/display.
(I posted this on another post but realized it's not for the responsive template post.)

Code:

---

[13-Jul-2021 18:31:39 Australia/Sydney] Request URI: /index.php?main_page=product_info&cPath=1&products_id=20, IP address: 101.#1  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php:58]#2  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php) called at [/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php:153]
#3  require(/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php:178]
#4  require(/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php) called at [/home2//public_html/.com.au/index.php:94]
--> PHP Warning: Use of undefined constant LARGE_IMAGE_WIDTH - assumed 'LARGE_IMAGE_WIDTH' (this will throw an Error in a future version of PHP) in /home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php on line 24.

[13-Jul-2021 18:31:39 Australia/Sydney] Request URI: /index.php?main_page=product_info&cPath=1&products_id=20, IP address: 101.
#1  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php:58]
#2  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php) called at [/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php:153]
#3  require(/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php:178]
#4  require(/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php) called at [/home2//public_html/.com.au/index.php:94]
--> PHP Warning: Use of undefined constant LARGE_IMAGE_HEIGHT - assumed 'LARGE_IMAGE_HEIGHT' (this will throw an Error in a future version of PHP) in /home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php on line 24.

---

You need to define these values in your configuration. Here's a start - paste this into Admin > Tools > Install SQL Patches

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Large Image Width', 'LARGE_IMAGE_WIDTH', '600', 'The pixel width of large images', '4', '80', now());
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Large Image Height', 'LARGE_IMAGE_HEIGHT', '600', 'The pixel height of large images', '4', '81', now());

Thank you Scott once again :clap:, that fixed it, the error log no longer comes up with this :)
I didn't know I needed to adjust these settings in the images section to be honest, thought they would be set to a default or something.
I will know from now on, lesson learned.

If you have anymore time for me, could you Please look into my post above and help guide me in the right way (#962) please?

Thanks,

Quote:

---

Originally Posted by rlexyd

Great, that's it. Thank you :)
Is there a way to get that top banner to display correctly on Mobile view in the Header?! That's where I really would like it to show correctly.
It shows on the Header and Footer on PC browsers, but only shows on footer correctly on my mobile, the banner is half hidden behind the header in mobile view as per the following snapshot... (Please view photo: https://imgur.com/fHJgpLo)

Also, is there a way (in Mobile device view) to force additional images to display in 2 instead of one as I have they take too much space if I have a few images under each other. I tried to play with mobile css with no luck...(Please view photo: https://imgur.com/nKpsp5v)

Thank you VERY much once again.

---

I really need some help here... Is there anyone that can assist me with this?
I have played around with different things and still couldn't figure it out?!

Am I posting the above request in the wrong thread?! as I thought I might get some assistance by now :please:
I know there are a lot of requests for help from my fellow zencart users and limited mods available to offer help.
I just want to make sure it's even possible to do what I've asked for above otherwise if it can't be done and I get advised so, I will move on to my next problem, as I have posted a few post of different problems and not much luck getting responses with some of them.
Thank you as always Cindy & Scott for your help with the other problems :bow::thumbsup:

Quote:

---

Originally Posted by rlexyd

I really need some help here... Is there anyone that can assist me with this?
I have played around with different things and still couldn't figure it out?!

---

I suspect a link to a live site might be needed. Perhaps if it's a dev site it could be installed in a temporary location (subfolder/domain) for Zenners to inspect.

Hi Simon,
Here is an image which displays my website URL for anyone needing it.
Thank you.

https://i.imgur.com/BmG0mAL.jpeg

Quote:

---

Originally Posted by rlexyd

Great, that's it. Thank you :)
I finally managed to do it after spending days trying to figure it out, all I had to do was follow what you said.
Now is there a way to get that to display correctly on Mobile view on the Header?! That's where I really would like it to show correctly.
It shows on the Header and Footer on PC browsers, but only shows on footer correctly on my mobile, the banner is half hidden behind the header.
(Please view photo: https://imgur.com/fHJgpLo)

Also, while you are reading this, is there a way (in Mobile device view) to force additional images to display in 2 instead of one as I have they take too much space if I have a few images under each other. I tried to play with mobile css with no luck.
(Please view photo: https://imgur.com/nKpsp5v)

Thank you VERY much once again.

---

Quote:

---

Originally Posted by rlexyd

Hi Simon,
Here is an image which displays my website URL for anyone needing it.
Thank you.

https://i.imgur.com/BmG0mAL.jpeg

---

Thanks for your URL. I'm not sure you can resolve these with just CSS, as you've probably found. It might need changes to the template files. Hopefully someone with a better knowledge of this template can chime in.

While it won't give 2 additional images per row on mobile you could try this to give three images (as you've defined in your admin configuration) per row:

in responsive_mobile.css, in the blank line after line#388 add,

Code:

---

.additionalImages.centeredContent.back {
    float: left;
}

---

although I see there is similar code commented out at that line so you may have already tried and discarded this.

Hi Simon, thank you so much for that, it did the trick :)
I did not notice that code in the CSS, it took someone a little more clever to pick it up right away :)
Thanks again.
Now, I hope we get the head banner problem sorted now, as it's a bit annoying as customers can't see the message on their mobiles which is my main customers right now.

Quote:

---

Originally Posted by rlexyd

Hi Simon, thank you so much for that, it did the trick :)
I did not notice that code in the CSS, it took someone a little more clever to pick it up right away :)
Thanks again.
Now, I hope we get the head banner problem sorted now, as it's a bit annoying as customers can't see the message on their mobiles which is my main customers right now.

---

A bit more thought on this and I believe you need to add some padding to the <body> tag. So in responsive_mobile.css add:

Code:

---

body {padding-top:36px;}

---

You'll need to add it to both the landscape and portrait sections of the stylesheet and adjust the value to suit. Showing the banner below the nav menu, rather than above, is the best I can do at the moment.

What a champion, that did the trick, Thank You very very much :bow:

Sorry Simon, there is another problem I'm having that you might be able to help me with.
I edited my (/includes/languages/english/modules/payment/dirbankaus.php) to include an image and help centre it as well.
The code I used was:

<div id="bankpayment">Bank Deposit/Internet Transfer:<br><strong>Payment details will be included in your order confirmation email.</strong></br><img src="images/bankpayment.jpg" alt="Bank Payment" /></div>

Now it displays well during the checkout, when using One Page Checkout and the regular zen checkout and the emails that get sent out, however checkout success page goes all funny, it goes black background and the bottom ezpage footer move all the way up.

When I change the code to the following:

Bank Deposit/Internet Transfer<div id="bankpayment"><img src="images/bankpayment.jpg" alt="" /></a></div>

The payment method displays correctly, althouh I cannot add the extra BOLD text.

I also added this to stylesheet.css... #bankpayment {text-align:center;}

Obviously I'm doing something wrong which is why it's ruining the checkout success page.

Here is 2 snapshots of the 1st code and the error it causes:
https://i.imgur.com/WHEXiqN.jpg
https://i.imgur.com/9GXD2gV.jpg

Here is 2 snapshots of the 2nd code which doesn't have an error (but I need to the extra line and make it bold but everytime I try it causes the above error.):
https://i.imgur.com/sNBHBx3.jpg
https://i.imgur.com/LbLIwdu.jpg

Just so you know, here is the full dirbankaus.php lines.

Code:

---

<?php

$id=$_SESSION['customer_id'];
$ln=$_SESSION['customer_last_name'];




  define('EMAIL_TEXT_NO_DELIVERY',
  '<p>No Delivery, see below:');
  define('MODULE_PAYMENT_DIRBANKAUS_TEXT_EMAIL_FOOTER',
  "Please use the following details to transfer your total order value:\n\n" .
  "\nAccount No.:  " . MODULE_PAYMENT_DIRBANKAUS_ACCNUM .
  "\nBSB Number:  " . MODULE_PAYMENT_DIRBANKAUS_BSB .
  "\nAccount Name: " . MODULE_PAYMENT_DIRBANKAUS_ACCNAM .
  "\nBank Name:    " . MODULE_PAYMENT_DIRBANKAUS_BANKNAM .
  "\nSwift Code:  " . MODULE_PAYMENT_DIRBANKAUS_SWIFT .
  "\nReference:    "  . $ln ."-" . $id . "-%s" .
  "\n\nSend Cheques/Money Orders To:    " . MODULE_PAYMENT_DIRBANKAUS_ADDRESS .
  "\nCheques/Money Orders Payable To:  " . MODULE_PAYMENT_DIRBANKAUS_PAYABLE .
  "\n\nThanks for your order which will ship immediately once we receive payment in the above account.\n");


  define('MODULE_PAYMENT_DIRBANKAUS_HTML_EMAIL_FOOTER',
  '<BR>Please use the following details to transfer your total order value:<br><pre>' .
  "\nAccount No.:  " . MODULE_PAYMENT_DIRBANKAUS_ACCNUM .
  "\nBSB Number:  " . MODULE_PAYMENT_DIRBANKAUS_BSB .
  "\nAccount Name: " . MODULE_PAYMENT_DIRBANKAUS_ACCNAM .
  "\nBank Name:    " . MODULE_PAYMENT_DIRBANKAUS_BANKNAM .
  "\nSwift Code:  " . MODULE_PAYMENT_DIRBANKAUS_SWIFT .
  "\nReference:    "  . $ln ."-" . $id . "-%s" .
  "\n\nSend Cheques/Money Orders To:    " . MODULE_PAYMENT_DIRBANKAUS_ADDRESS .
  "\nCheques/Money Orders Payable To:  " . MODULE_PAYMENT_DIRBANKAUS_PAYABLE .
  '</pre><p>Thanks for your order which will ship immediately once we receive payment in the above account.');


  define('MODULE_PAYMENT_DIRBANKAUS_TEXT_TITLE', '<div id="bankpayment">Bank Deposit/Internet Transfer:<br><strong>Payment details will be included in your order confirmation email.</strong></br><img src="images/bankpayment.jpg" alt="Bank Payment" /></div>');
  define('MODULE_PAYMENT_DIRBANKAUS_TEXT_DESCRIPTION',
  '<BR>Banking and Address details will be sent to your email once the order is confirmed.<br><pre>' .
  '</pre><p>Thanks for your order which will ship immediately once we receive payment.');
?>

---

Quote:

---

Originally Posted by rlexyd

<div id="bankpayment">Bank Deposit/Internet Transfer:<br><strong>Payment details will be included in your order confirmation email.</strong></br><img src="images/bankpayment.jpg" alt="Bank Payment" /></div>

---

It looks as though the </strong></br> is causing the problem, you should be using </strong><br>

Whenever I get a screwy layout, I first check the HTML code (and perhaps CSS) for errors - use https://validator.w3.org

Thanks Simon, I've removed the / from br but made no difference :(

Quote:

---

Originally Posted by rlexyd

Thanks Simon, I've removed the / from br but made no difference :(

---

Have you validated the HTML? The validator (https://validator.w3.org) won't be able to scan your checkout success page but you can paste the source code of the page in to the 'Validate by Direct Input' tab.

That's all I have I'm afraid.

doing it now but not sure what is actually causing this problem..
https://i.imgur.com/FRqMftN.png
https://i.imgur.com/2fEoB3J.png
https://i.imgur.com/acVJmSu.png
https://i.imgur.com/MwLOLyw.png

Am I supposed to be deleting all the yellow codes??

Quote:

---

Originally Posted by rlexyd

doing it now but not sure what is actually causing this problem..
https://i.imgur.com/FRqMftN.png
https://i.imgur.com/2fEoB3J.png
https://i.imgur.com/acVJmSu.png
https://i.imgur.com/MwLOLyw.png

Am I supposed to be deleting all the yellow codes??

---

No, the yellow is just highlighting the location of the error. From those screeshots there are quite a few HTML errors, you will need to resolve them I'm afraid. Just work through them one at a time. A quick and dirty method of viewing these is to view the page source code in Firefox and the errors (most of them anyway) will be helpfully highlighted in red. That gives a clue of where to look in your template php files.

Thanks for that, will do.
However the problem with the checkout success page only occured when I added those text to the dirbankaus.php, the others obviously have been there but at least did not interfer with the success page.
Just wondering would there be a limit to how many text charachters can fit in the part that displays the payment module?! I have a feeling that might be it as when I type the full message I want with the image code, the text gets cut off and doesn't in full which is weird and it even cuts the word in half (where there isn't any code or errors there), so why would it only display half the word and not show anything after that!
I hope you get what I mean.

Quote:

---

Originally Posted by rlexyd

Thanks for that, will do.
However the problem with the checkout success page only occured when I added those text to the dirbankaus.php, the others obviously have been there but at least did not interfer with the success page.
Just wondering would there be a limit to how many text charachters can fit in the part that displays the payment module?! I have a feeling that might be it as when I type the full message I want with the image code, the text gets cut off and doesn't in full which is weird and it even cuts the word in half (where there isn't any code or errors there), so why would it only display half the word and not show anything after that!
I hope you get what I mean.

---

Sounds like there might be a limit somewhere, and that cut-off code will probably be the cause of some of your HTML errors.

Ok I fixed some of the errors from my doing, the rest are javascript stuff which must be part of zen cart.
As for the payment info I could NOT figure out a way to add that text...
Do you know if *Payment Module* names have a character name count?
The only way I could add what I wanted was to replace the name of the module which was effecting the checkout success page.
I really would prefer to add the text instead of adding the text in a photo to fit it which isn't ideal or good quality but unless someone can advise how to I have to do the text image root.

Another issue I'm having is when I'm checking out using mobile view on an iPhone 7, the checkout (TICK on the top right goes down to another line when logged in and have something in cart which customer can't see if background is white - please view snapshot link..)
https://i.imgur.com/mORz9fv.jpg
Anyway to move the top icons to the left so it fits next to the shopping cart icon as it does when viewing via landscape?
Also, anyone know how to adjust the payment image and text to center on mobile view?
I've put a div on the payment logo but it doesn't seem to center on mobile view?!
Thank you for your help.

Tried adding 20px in responsive_mobile.css on line 448 (#navMain{width:70%;float:right;position:fixed;right:20px;top:-5px;z-index:2;})
AND I tried adding padding-right:20px; as well but both versions moved the headers left which is good, BUT it still forced the checkout Tick to be Under the shopping cart icon and the shopping cart icon seems to have been cut off?!
https://i.imgur.com/boiw1eC.jpg
I'm sure there's a very easy fix for this but it still eludes me!

Good reading at https://css-tricks.com/almanac/properties/b/box-sizing/

Quote:

---

Originally Posted by lat9

See this (https://vinosdefrutastropicales.com/...e=article&p=26) article that identifies the built-in Zen Cart banner locations. It sounds like you're "looking for" content in Header Position 1.

---

Hi Cindy, thanks again for your easy to read link/image with the banner positions.
I just need to show a different Header and Footer at the same time!
Now the wide-banners display randomly, but I would like to set a wide-banner for Header 1 that always displays on Top and set a DIFFERENT wide-banner for Footer 2 that always displays at the bottom.
How can I do that please?

Quote:

---

Originally Posted by dbltoe

Good reading at https://css-tricks.com/almanac/properties/b/box-sizing/

---

Thank you for that link, I read that but couldn't figure what I need to do.
I'm assuming the border-box is forcing all those icons to show in there, I went to (jquery.mmenu.all.css) and changed border-box to padding-box, it made no difference?!
The problem I cannot seem to find a way to test my sire on firefox to inspect the css on that SMALL size, firefox smallest shrink is still bigger than my phone so it shows well on there.
This is quiet annoying and I can't see how this isn't effecting many more zen cart users who use this template as it will happen to all their sites on regular screen phones.

Quote:

---

Originally Posted by rlexyd

Hi Cindy, thanks again for your easy to read link/image with the banner positions.
I just need to show a different Header and Footer at the same time!
Now the wide-banners display randomly, but I would like to set a wide-banner for Header 1 that always displays on Top and set a DIFFERENT wide-banner for Footer 2 that always displays at the bottom.
How can I do that please?

---

Just figured it out with this link I think:
https://docs.zen-cart.com/user/admin...anner_manager/
Than went to Banner Manager in admin, entered a new Banner Group names for both banners and set them in Admin > Configuration > Layout Settings to match.
Banner Display Groups - Header Position 1: BanWHeadPos1
Banner Display Groups - Footer Position 2: BanWFootPos2

Quote:

---

Originally Posted by rlexyd

Tried adding 20px in responsive_mobile.css on line 448 (#navMain{width:70%;float:right;position:fixed;right:20px;top:-5px;z-index:2;})
AND I tried adding padding-right:20px; as well but both versions moved the headers left which is good, BUT it still forced the checkout Tick to be Under the shopping cart icon and the shopping cart icon seems to have been cut off?!
https://i.imgur.com/boiw1eC.jpg
I'm sure there's a very easy fix for this but it still eludes me!

---

Finally figured it out after two weeks of trying.
Changed line 238 in responsive_mobile.css under (ORIENTATION:PORTRAIT) from #navMain ul{float:right;width:100%;} to #navMain ul{float:right;width:120%;}.
Now all the icons on top fit correctly in the box.
Not sure if this was the correct method to do it and I'm not sure if doing it this way will stuff something else up but that's all I can figure out.

Quote:

---

Originally Posted by janks

It has been a while since you asked about this - but I had the same issue to which I have found a solution.

The display only affects the buttons that are using an input tag. Where as buttons utilising a span, render the css correctly.
Researching this, I found Apple have a built in function in safari to style the input button according to 'Apple standard'. :blink:

To fix this add the follow property to the stylesheet_css_buttons.css file in your css directory of your template.

Code:

---

input.submit_button { -webkit-appearance: none; }

---

---

YOU ARE A LEGEND, thanks so much for your solution, LOOKED everywhere for this, finally thanks to you it's fixed :)

Just realized it was still showing the pill shaped button in black once you actually clicked the add to cart button, so after some testing figured out you need to add the hover part to the code as well to the stylesheet_css_buttons.css.

input.submit_button, input.cssButtonHover { -webkit-appearance: none; }

Stumbled on this website recently (www eapresto com).
Looked at the view source and it shows they are using the (Responsive_Classic) template?!
I have this template and it's a whole lot different than that.
Can anyone help to identify it? or what other templates they might be using? I couldn't find anything and I've emailed them asking and no response.

Found an old closed thread and did what it suggested but it didn't help (https://www.zen-cart.com/showthread....-left-side-box).
I would like to align the Categories header & the Middle column header, please view snapshot (https://i.imgur.com/QW3555n.png)
Using Responsive classic on 1.5.7c.

Quote:

---

Originally Posted by rlexyd

Found an old closed thread and did what it suggested but it didn't help (https://www.zen-cart.com/showthread....-left-side-box).
I would like to align the Categories header & the Middle column header, please view snapshot (https://i.imgur.com/QW3555n.png)
Using Responsive classic on 1.5.7c.

---

Looking at the page's source code, you have this:

Code:

---

<div class="centerColumn" id="indexDefault">
<h1 id="indexDefaultHeading"></h1>
<div id="indexDefaultMainContent" class="content"></div>

---

The h1 tag is there, but empty. You could either add display:none to indexDefaultHeading in your css or remove/comment out the h1 code from the template file.

Whether you delete the text or comment out the h1 call in the file, the problem with just "eliminating" an h1 tag is that it is generally followed on the page by at least an h2.

Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.

This is a common error when folks are trying to get rid of the "Congratulations!" line in a new installation. They go to includes/languages/english/index.php and make the HEADING_TITLE blank. That then throws the accessibility error.

Depending on your involvement with any US federal or state entity, this could affect your business with them.

Quote:

---

Originally Posted by simon1066

Looking at the page's source code, You could add display:none to indexDefaultHeading in your css.

---

Thank you Simon, that did the trick!
Feels so much better when things align :)

Quote:

---

Originally Posted by dbltoe

Whether you delete the text or comment out the h1 call in the file, the problem with just "eliminating" an h1 tag is that it is generally followed on the page by at least an h2.
Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.
This is a common error when folks are trying to get rid of the "Congratulations!" line in a new installation. They go to includes/languages/english/index.php and make the HEADING_TITLE blank. That then throws the accessibility error.
Depending on your involvement with any US federal or state entity, this could affect your business with them.

---

Thanks for your advice John,
You are correct, I've made the HEADING_TITLE blank as I have always thought that's what I was meant to do :(
Should I change it back to what it was now since I added Simon's solution of adding display:none to indexDefaultHeading in my css?
Cheers,

Quote:

---

Originally Posted by dbltoe

Whether you delete the text or comment out the h1 call in the file, the problem with just "eliminating" an h1 tag is that it is generally followed on the page by at least an h2.

Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.

This is a common error when folks are trying to get rid of the "Congratulations!" line in a new installation. They go to includes/languages/english/index.php and make the HEADING_TITLE blank. That then throws the accessibility error.

Depending on your involvement with any US federal or state entity, this could affect your business with them.

---

What would be the best tool to test for accessibility? Running the home page through Chrome's Lighthouse gets a 100% pass, even though the h1 tag is empty it still seems to recognise it.

Quote:

---

Originally Posted by dbltoe

Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.

---

i would be curious as to where one could find this accessibility standard and how removing h1 is against a standard.

my understanding is that these are guidelines (as opposed to a standard). the only info i could find on this was from this page:

https://www.w3.org/WAI/tutorials/pag...#heading-ranks

which states:

Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

Skipping heading ranks can be confusing and should be avoided where possible:

not really a standard... more of a guideline...

but i would interested where you may see a standard that specifically states this.

Quote:

---

Originally Posted by simon1066

What would be the best tool to test for accessibility? Running the home page through Chrome's Lighthouse gets a 100% pass, even though the h1 tag is empty it still seems to recognise it.

---

simon, i am not sure what the situation is in the UK; here in the US, there has been a proliferation of lawsuits against online retailers claiming the website does not comply with the ADA and is not in conformance with the WCAG. someone recently forwarded me an email claiming there are now bots looking at sites for non-WCAG compliance, and in turn targeting those sites for lawsuits. this is a quote from a recent wsj article:

“I don’t want to in any way diminish the value of ADA compliance. I think it makes a lot of sense,” Overstreet says. But he adds that the plaintiffs’ law firms in digital accessibility cases are “vermin” that actively seek out companies to sue and file numerous lawsuits at once.

the best solution i have found is here:

accessibe

it costs some money. but 1 line of javascript and they automate the whole WCAG compliance, and hopefully prevent these lawsuits from happening.

but more importantly, accessibe truly makes your site available to disabled visitors in a way that i think manually coding would take a long time.

hope that helps.

best.

This is a moot issue. Supreme court will no more enforce this stupid law than they would make book publishers comply with ADA.

There is a line to draw and it is the internet...............JMHO (based on 67 years of life)