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

Quote:

---

Originally Posted by pixelpadre

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)

---

Sorry, you are sorely misinformed and mixing apples with oranges.

US 508 Accessibility has been US federal law since 1986. It originally applied only to federal contractors or anyone receiving federal funds for services rendered. It has grown over the years in the US and the world has expounded on it W3c and other organizations.

Just take a look at one of the lawsuits from early on (2008). https://arstechnica.com/uncategorize...sibility-suit/

Many states already have established amounts to award ranging from $1k to $4k per.

The lawsuits over copyright images that were the big thing a few years ago have been replaced in the twenties with lawsuits on accessibility. Especially contrast and inability to work with readers. https://www.digitalcommerce360.com/2...ly-20-in-2021/

Quote:

---

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

---

@carlwhat,
Sometimes you have to drill down a bit in the right place. There's a lot of stuff in there. Over twenty years experience mean nothing as I find something each time my mind say, "I wonder if..."

Text readers are confused when the h tags are incorrect. Without the h1, you technically meet AA standards. You cannot meet AAA standards without a logical progression. https://www.tpgi.com/headings-accessibility/

It's one of the things I want to address in 1.5.8 before it gets out. We've gotten in such a habit of just blowing away the h1 text that it's not used as it should be. Several options can be done but, with the "just drop it" method currently advised........

Note that this discussion is not based on US 508 accessibiltiy but are from WCAG. https://www.w3.org/WAI/standards-guidelines/wcag/

Chrome's Web Developer Tools uses an accessibility tool (WAVE) powered by WebAIM. It's not perfect and needs to be done for every view a page can give. It is a good start for an overall idea for your site.

Yeh, ADA will stand but making books and blogs conform to blind or vision impaired will NEVER NEVER NEVER NEVER be inforced by the US Supreme Court.

You're in Florida. You may publish a book but I doubt it. Books and websites are totally different form of "Public Accomodation". Here's what happened in your state. https://www.wtsp.com/article/news/in...f-bd36d2fefe15

BTW, your site has two contrast errors and, of course, the missing H1 on the main page. If you have $1000-4000 a pop, go for it.

I'll take it to the us supreme court. Florida laws DO NOT trump US Supreme Court rulings.

Definition of Public Accommodation from the ADA website:

Quote:

---

A public accommodation is a private entity that owns, operates, leases, or leases to, a place of public accommodation. Places of public accommodation include a wide range of entities, such as restaurants, hotels, theaters, doctors' offices, pharmacies, retail stores, museums, libraries, amusement parks, private schools, and day care centers. Private clubs and religious organizations are exempt from the ADA's title III requirements for public accommodations.

---

I wonder if the ADA website complies.....https://adata.org

Quote:

---

Originally Posted by dbltoe

Text readers are confused when the h tags are incorrect. Without the h1, you technically meet AA standards. You cannot meet AAA standards without a logical progression. https://www.tpgi.com/headings-accessibility/

It's one of the things I want to address in 1.5.8 before it gets out. We've gotten in such a habit of just blowing away the h1 text that it's not used as it should be. Several options can be done but, with the "just drop it" method currently advised........

Note that this discussion is not based on US 508 accessibiltiy but are from WCAG. https://www.w3.org/WAI/standards-guidelines/wcag/

---

lot of good information here. thank you.

i would like to point out a few things (none of which are related to any pending supreme court rulings):

• i am not seeing anything that specifically states "standards". it seems like they are all guidelines.
• the site that you pointed me to is a blog post from a commercial provider of accessibility products.
• they do have a lot of good information there and in previous blog posts.
• not including an h1 heading does not automatically constitute a failure.
• from this blog post on the site you pointed to:
  
  • Missing <h1>
    On a similar note, although beginning a heading hierarchy with an <h1> is a logical and common approach to structuring web content, it’s not a requirement of either WCAG or the HTML 5.2 specification. While such a heading hierarchy may be unusual, the absence of an <h1> does not represent a WCAG failure.
• i completely support incorporating as much of these guidelines as possible into v158.
• i applaud all of your efforts to make that happen.

best.

Quote:

---

Originally Posted by dbltoe

You're in Florida. You may publish a book but I doubt it. Books and websites are totally different form of "Public Accomodation". Here's what happened in your state. https://www.wtsp.com/article/news/in...f-bd36d2fefe15

BTW, your site has two contrast errors and, of course, the missing H1 on the main page. If you have $1000-4000 a pop, go for it.

---

Anyone losing in a court case in USA is losing because they are not offering locational accommodations for the disabled on their websites. (i.e. rooms with special features like brail, desks with proper heights for wheel chairs etc etc). That's very different than having contrast issues or text size issues on websites. If you think website contrast is discriminating against individuals with vision impairments then every business is going to have to comply with office lighting to appease a minority. Don't see that happening either.

What I see today are companies that are offering protection thru their services. This is nothing more than exploiting peoples fears of litigation and is destined for total failure. Sort of like protection money for the mob. Pay them or your business may burn down. Can you imagine is big law firms were selling these services and the moment you stopped paying they filed a lawsuit for non compliance. This is really making a mountain out of a mole hill. We shouldnt even be having this discussion.

Here's a good one...how about forcing the high contrast on currency with large print etc etc.

Quote:

---

Originally Posted by pixelpadre

What I see today are companies that are offering protection thru their services.... Sort of like protection money for the mob.... We shouldnt even be having this discussion.

---

i could not agree more.

unfortunately, the lawyers are winning these cases.

a few articles on the topic:

https://www.digitalcommerce360.com/2...-main-targets/

https://www.jdsupra.com/legalnews/su...ility-9470297/

https://www.wsj.com/articles/lawsuit...ng-11626369056

from one of the articles:

“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.

Quote:

---

Originally Posted by rlexyd

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.

---

Is my above post in the wrong thread??
Just want to see if anyone can help me identify the template/plugins used on that website wether they are available on the plugins page or where a private work?

you're in the correct thread, but the conversation has been partially derailed (you know who you are...)
The site in question has a pile of customizations on it. Seems a fair bit is hard-coded into the template versus a plugin to manage it, such as the header and footer.

Quote:

---

Originally Posted by rlexyd

Is my above post in the wrong thread??
Just want to see if anyone can help me identify the template/plugins used on that website wether they are available on the plugins page or where a private work?

---

There's no better source than the folks themselves. BUT

The thing to bear in mind is that the site ranks low in most tests. Lighthouse has it at 82, 89, 67, 83 for the main page. Your site is 98, 100, 93, 100 and your main page loads 20% faster! Your Best Practices of 93 will be 100 when you fix the hanging < in your Google Analytics.

Some of the portions you like are what make the site a lower rank. Most of the "glitz" lacks alt tags so the SEs have no idea what's going on.

The site is not secure and uses no less than four vulnerabilities through outdated jquery. It's more than likely that the bad jquery resides in the "glitx".

I haven't see a Best Practices rating of 67 in a long time.:dontgetit

I wonder why you have the logo so prominent on each page that it takes away from presenting product.

Be careful on things like the 30cm Cupcake. The color used to let folks know it's pink is not a proper contrast. Perhaps it would be best to have pink in the product title which would add it to the alt tag.

Your large image for that item is larger than the screen which hinders the customer's being able to tell what the item is. I would combine the other two cupcakes and use something like Magic Thumb to swap out the images as the customer selects Pink or Blue. Something like the tin selection at https://allpecans.com/index.php?main...roducts_id=126

Lastly, I would add lat9's scrolling sideboxes to randomly "show off" your products, change your width to 100%, and move them to the right-hand column along with reviews.

Quote:

---

Originally Posted by barco57

you're in the correct thread, but the conversation has been partially derailed (you know who you are...)
The site in question has a pile of customizations on it. Seems a fair bit is hard-coded into the template versus a plugin to manage it, such as the header and footer.

---

Thanks for your reply.
It’s a real shame as I really like that website and was hoping they did it with available plugins :) (especially the gallery image slider and nicely designed footer).

Quote:

---

Originally Posted by dbltoe

There's no better source than the folks themselves. BUT

The thing to bear in mind is that the site ranks low in most tests. Lighthouse has it at 82, 89, 67, 83 for the main page. Your site is 98, 100, 93, 100 and your main page loads 20% faster! Your Best Practices of 93 will be 100 when you fix the hanging < in your Google Analytics.

Some of the portions you like are what make the site a lower rank. Most of the "glitz" lacks alt tags so the SEs have no idea what's going on.

The site is not secure and uses no less than four vulnerabilities through outdated jquery. It's more than likely that the bad jquery resides in the "glitx".

I haven't see a Best Practices rating of 67 in a long time.:dontgetit

I wonder why you have the logo so prominent on each page that it takes away from presenting product.

Be careful on things like the 30cm Cupcake. The color used to let folks know it's pink is not a proper contrast. Perhaps it would be best to have pink in the product title which would add it to the alt tag.

Your large image for that item is larger than the screen which hinders the customer's being able to tell what the item is. I would combine the other two cupcakes and use something like Magic Thumb to swap out the images as the customer selects Pink or Blue. Something like the tin selection at https://allpecans.com/index.php?main...roducts_id=126

Lastly, I would add lat9's scrolling sideboxes to randomly "show off" your products, change your width to 100%, and move them to the right-hand column along with reviews.

---

Thank you J,
Especially for taking the time to view my site and make an actual assessment in real time, will definitely work on your suggestions!
I'm in the middle of getting the website logo finalized and it will be a smaller rectangle size, the lady working on it is almost done.
I know this isn't the right thread to talk about this but will do this once, what do you mean hanging < in google analytics?
I pasted the exact code from google and can't seem to see a < that doesn't belong?!

Quote:

---

Originally Posted by dbltoe

Chrome's Web Developer Tools uses an accessibility tool (WAVE) powered by WebAIM. It's not perfect and needs to be done for every view a page can give. It is a good start for an overall idea for your site.

---

Just re-added the text "Welcome to MYSHOP" back into the includes/languages/english/MYTEMPLATE/index.php in both HEADING_TITLE, so they are not blank and it no longer shows a H1 Error on WAVE, thanks again J :)
With thanks to Simon's solution of adding display:none to indexDefaultHeading into the .css, it's not displaying the above text on my site and the headers are aligned, so all good :)

Looking at a couple of changes if anyone can help.
I'm on zen cart 1.5.7c with this responsive_classic template.

1) I would like to change the color of the background of the Categories Dropdown via mobile view, currently it goes a little lighter than the main category black color, but would like to change it.
Please view snapshot link: https://i.imgur.com/rxCZLk9.png

2) I would like to add a space/padding only between the LAST of the category names & the New Products Link in the category box in desktop view.
I was able to achieve this by adding a category name but did not add any text to the name, however that blank space has the active link for that category link, so obviously not the way to do it.
Please view snapshot link: https://i.imgur.com/kgxna9Q.png

The category fly-out color is on line 1329 of jquery.menu.all.css. I would do an override in something like stylesheet.zcustom.css. That way, it's easier to find later.

A quick way to add the space is to create a blank cat. No name, description, nothing. Put the sort order last of your cats.

I recently installed lat9's jQuery Scrolling Sideboxes on my test website.
The above awesome plugin works perfectly with this amazing template.

Now, I really wanted to add a scrolling REVIEW box and after a Lot of trial & error (one of my favourite movies) and finishing touches from Cindy (thank you), I managed to finally clone one of the scrolling boxes and merge it with the random reviews sidebox :)
The php code for the created scrolling review sidebox can be found here..
https://www.zen-cart.com/showthread....81#post1383881

It works great except one tiny visual problem.
As you can see here (https://i.imgur.com/sPZZ5cK.png), the sideboxes on mobile view are not center aligned, they are displaying to the right.
BTW, I did not change my sideboxes to display on mobile view, they just started showing up automatically after installing the plugin. The only sidebox that seems to be Centered correctly in mobile view is the Scrolling Featured sidebox, the Scrolling Bestsellers & Reviews Sideboxes are Not centering.

Any suggestions on how to center the scrolling sideboxes correctly please?
Thanking you in advance.

Just noticed if I move the sideboxes in Layout Boxes Controller to the LEFT Column, they all center correctly.
However, I want them to show at the bottom of the website, not the top in mobile view.
The right column shows them at the bottom but they are Not centered.

Just bumping this up, could really use the help.

Quote:

---

Originally Posted by rlexyd

Just noticed if I move the sideboxes in Layout Boxes Controller to the LEFT Column, they all center correctly.
However, I want them to show at the bottom of the website, not the top in mobile view.
The right column shows them at the bottom but they are Not centered.

---

I'm afraid when it comes to changing the layout of side columns with css I know just enough to be dangerous. As a starting point you could try adding this code to your responsive_default.css, responsive_mobile.css & responsive_tablet.css - checking of course that it has no ill effects elsewhere:

Code:

---

@media (max-width:767px) {
.onerow-fluid>[class*="col"]:nth-child(3){float:none;}
}

---

Quote:

---

Originally Posted by simon1066

I'm afraid when it comes to changing the layout of side columns with css I know just enough to be dangerous. As a starting point you could try adding this code to your responsive_default.css, responsive_mobile.css & responsive_tablet.css - checking of course that it has no ill effects elsewhere:

Code:

---

@media (max-width:767px) {
.onerow-fluid>[class*="col"]:nth-child(3){float:none;}
}

---

---

Thank you Simon, you did it :)
It looks good and from what I can see, it doesn't seem to have any side effects.

Remember that mobile phones can be looked at in Portrait AND Landscape. Two of those stylesheets have Portrait AND Landscape sections.

Quote:

---

Originally Posted by dbltoe

Remember that mobile phones can be looked at in Portrait AND Landscape. Two of those stylesheets have Portrait AND Landscape sections.

---

Thank You for making sure I get it right :)
Yes, I placed that code in both sections mentioned.

Quote:

---

Originally Posted by dbltoe

The category fly-out color is on line 1329 of jquery.menu.all.css. I would do an override in something like stylesheet.zcustom.css. That way, it's easier to find later.
A quick way to add the space is to create a blank cat. No name, description, nothing. Put the sort order last of your cats.

---

Just realised I haven't actually replied to your helpful post, sorry.
Thank you, I managed to get it to work as per Your advice (NO WAY I could have done that without you narrowing it down for me).
It was very tricky to be honest as I also wanted to change the colour when you actually click on the category links, there was so many options and it wasn't as easy/clear as I thought it would be, especially having to keep clearing my browsers cache to force the new css to download on every change I made. I probably will attempt a few more colour changes in the near future as well.

I just noticed another issue on my TEST website, not sure what I did for this to happen as I can't see that display error on my live site?!
https://i.imgur.com/EVUxUS5.png
As you can see from the snapshot above, when I click the Show All Products link from the main page, the page doesn't display well (via desktop),
The products display weird, lots of spacing and not aligned with each other, boxes and pricing are not aligned and looks messy, also displays that way on new and featured products links.
The products should be displayed like the 2nd product in the snapshot, yet some like the 1st and 3rd products are not displaying well.
Any help would be appreciated?

Just bumping this up..as I can't seem to find the reason for this?
Any help would be greatly appreciated.

Quote:

---

Originally Posted by rlexyd

I just noticed another issue on my TEST website, not sure what I did for this to happen as I can't see that display error on my live site?!
https://i.imgur.com/EVUxUS5.png
As you can see from the snapshot above, when I click the Show All Products link from the main page, the page doesn't display well (via desktop),
The products display weird, lots of spacing and not aligned with each other, boxes and pricing are not aligned and looks messy, also displays that way on new and featured products links.
The products should be displayed like the 2nd product in the snapshot, yet some like the 1st and 3rd products are not displaying well.
Any help would be appreciated?

---

Add this to stylesheet.css (put it after .listing-left) and play around with the width:

Code:

---

.listing-right {
    width: ???%;
}

---

Quote:

---

Originally Posted by simon1066

Add this to stylesheet.css (put it after .listing-left) and play around with the width:

Code:

---

.listing-right {    width: ???%; }

---

---

Woow, Thank you very much again Simon!!
That did the trick, would love to have your knowledge :)

Quote:

---

Originally Posted by rlexyd

Woow, Thank you very much again Simon!!
That did the trick, would love to have your knowledge :)

---

No problem. I couldn't have done it without the use of a browser's developer tools. A matter of inspecting the various elements in and around the problem area and seeing what might need to be tweaked/added. It's easy to experiment with different options if the answer isn't immediately obvious.

Quote:

---

Originally Posted by DrByte

Hmmm ... it appears that all the desktop-based "mobile emulators" do show the CSS buttons in mobile mode, but some of the actual mobile devices are still rendering them shaped as lighter-colored pill buttons.

I imagine Anne has a quicker fix for that than I do.

---

Hi,
We are having the same issue with our site – the CSS buttons are correct when using mobile emulators (such as firefox or chrome devtools) but lighter coloured ‘pill’ style buttons are displaying on iphone/ipad.

I believe this issue is present in version 1.5.7c as well as 1.5.6 and 1.5.5.

The add to cart button seems to be affected on the product info page (but unaffected on the product listing).

Does anyone know of a fix for this bug? We are having trouble locating the code that causes this issue.

Any help would be much appreciated.
Many thanks

I'm not finding a way to see this. I am currently using the Chrome extension found at https://chrome.google.com/webstore/d...ekfoccmk?hl=en It even has the new iPhones.

Regardless of whether toggling the view in the Chrome inspect window or using the extension, it's best to clear the cache after starting either one.

Could you do a screen shot of the differences and post them here?

Hi,
Thank you for your reply - I have attached some screenshots showing the issue. The desktop based mobile emulators seem to display correct CSS buttons. I can confirm that I have cleared the browser cache and this did not make a difference.

The issue can be seen when using actual mobile devices (I have tested with a new iphone SE, iphone X and ipad).

The light coloured pill style buttons appear on the product info page ‘add to cart’ (the page with the full product description) and the ‘search’ button in the mobile menu. This issue was mentioned in post #12.

I believe the buttons are styled by CSS – unfortunately I have been unable to find the code that is causing this issue.
If possible please could you check on a mobile device to see if you can replicate the issue.
--
Many thanks
Attachment 19763
Attachment 19762
Attachment 19764
Attachment 19765

Quote:

---

Originally Posted by richard7315

Hi,
Thank you for your reply - I have attached some screenshots showing the issue. The desktop based mobile emulators seem to display correct CSS buttons. I can confirm that I have cleared the browser cache and this did not make a difference.

The issue can be seen when using actual mobile devices (I have tested with a new iphone SE, iphone X and ipad).

The light coloured pill style buttons appear on the product info page ‘add to cart’ (the page with the full product description) and the ‘search’ button in the mobile menu. This issue was mentioned in post #12.

I believe the buttons are styled by CSS – unfortunately I have been unable to find the code that is causing this issue.
If possible please could you check on a mobile device to see if you can replicate the issue.
--
Many thanks

---

Hi Richard,

Try adding the following to your stylesheet.css, it worked for me.

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

https://www.zen-cart.com/showthread....19#post1383119

Hi rlexyd
Thank you for your reply – I had missed the posts from you and janks regarding this issue. I have tried the suggested code and it seems to work perfectly.
Many thanks for your help – it is much appreciated. I have submitted a bug report so this will hopefully be fixed on future versions of Zen Cart.

I just installed latest zc. I have categories in the horizontal header bar. But they don't appear in the responsive view. With my other site 1.5.7, the categories do appear in responsive view. Is this something that has changed in 157C? I really would like to have the categories appear across my repsonsive view. Most customers don't know how to use the drop down menu.

So, I am not having this problem with my other 157C websites. Whatever the problem is, its not related to zc version. Anyone know why I am not seeing categories bar on my android or tablet?

Seriously? You know why they are missing, we had a conversation about this and you fixed it on at least one site... Category tabs are hidden on mobile
and nobody cares that you think it is a bug because you think everything is a bug that is not exactly as you want it out of the box.

Quote:

---

Originally Posted by barco57

Seriously? You know why they are missing, we had a conversation about this and you fixed it on at least one site... Category tabs are hidden on mobile
and nobody cares that you think it is a bug because you think everything is a bug that is not exactly as you want it out of the box.

---

I considered that a possibility. I'll have to find the solution. Is it in this thread? It is true though that half the people have no clue about drop down menus on cell phones. You're lucky if they can figure out its possible to scroll down. No point in showing these people, they never remember it 2 minutes after you show them.

I dont remember saying it was a bug in my most recent post.

Quote:

---

Originally Posted by pixelpadre

So, I am not having this problem with my other 157C websites. Whatever the problem is, its not related to zc version. Anyone know why I am not seeing categories bar on my android or tablet?

---

ok, so i just searched this thread and can't find it anywhere.

Header banner is obstructed by menu bar at least on my android.

I am upgrading to v157c from v157. I copied these lines from the stylesheet.css in v157 to the stylesheet.css in v157c (inserted after line #100) but I am getting a big blank white space. The .jpg is in the includes/templates/responsive_classic/images/ folder and I can access it directly in my browser by itself just not on the site. Is it safe to list the url to the test site here on a public forum when it is in a folder on my current live site or did I give you enough info to help?

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

Quote:

---

Originally Posted by GoldBuckle

I am upgrading to v157c from v157. I copied these lines from the stylesheet.css in v157 to the stylesheet.css in v157c (inserted after line #100) but I am getting a big blank white space. The .jpg is in the includes/templates/responsive_classic/images/ folder and I can access it directly in my browser by itself just not on the site. Is it safe to list the url to the test site here on a public forum when it is in a folder on my current live site or did I give you enough info to help?

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

---

I would first make sure the image is in the correct folder (I know... probably done already but.....)
Then, I would suspect the .. in the image link.
If you right-click on the space, does the inspect show the image when you hover over it? If not, the image is missing or the link is incorrect. Preceding could cause the code to not be processed.
IF all those fail, you may have messed up the preceding or following lines of code in the file.
It would be easier to diagnoase if we had a look.

Several Problems

One . is the answer for what you were trying although that is not what is currently on your site. The link on your site looks in the yoursite.com main images folder. The image is actually in your template's images folder.

Might be something to discuss in 1.5.8 to make the template's images folder something like images_tpl to avoid confusion.

BTW. You can safely post a URL by using DOT like yoursiteDOTcom. SEs won't react to that and the forum helpers can get a look at the site.

Here's what should be there if doing what you wanted.

Code:

---

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

---

It would be much simpler with

Code:

---

#logoWrapper {height:235px;}
#logo{background:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg') no-repeat center;
}

---

BUT....

The real problem is what happens on varying screen sizes including mobile phones. With text in front of a background image, you must take into account what will happen as the image becomes responsive and the text does not. As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen. Just your DPS image and the text underneath does not work on a mobile phone. The last line is lost.

Other problems include the use of the tagline div twice. A div should not be used twice UNLESS they are on separate pages. Here, you would need to change it to a class. https://tinyurl.com/y9f2bjlp

There are a lot more adjustments to be made but your original premise is really not going to work without a set screen size.:no:

I think I understand what you are saying...thanks for breaking it down. Considering what you said regarding the responsive issue, do you have any ideas you could share as to how to accomplish what I am trying to do. The most important thing to me is to have the logo, hours and contact info prominently there to make it as easy as possible for someone to contact me via phone or email. Next most important is the file types and payment methods accepted. Before I created the background image and added the info there, in my opinion it looked to empty with just the logo on a desktop device. "As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen" How is this text in violation and how do I fix it so it is not in violation?

Quote:

---

Originally Posted by dbltoe

Several Problems

One . is the answer for what you were trying although that is not what is currently on your site. The link on your site looks in the yoursite.com main images folder. The image is actually in your template's images folder.

Might be something to discuss in 1.5.8 to make the template's images folder something like images_tpl to avoid confusion.

BTW. You can safely post a URL by using DOT like yoursiteDOTcom. SEs won't react to that and the forum helpers can get a look at the site.

Here's what should be there if doing what you wanted.

Code:

---

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

---

It would be much simpler with

Code:

---

#logoWrapper {height:235px;}
#logo{background:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg') no-repeat center;
}

---

BUT....

The real problem is what happens on varying screen sizes including mobile phones. With text in front of a background image, you must take into account what will happen as the image becomes responsive and the text does not. As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen. Just your DPS image and the text underneath does not work on a mobile phone. The last line is lost.

Other problems include the use of the tagline div twice. A div should not be used twice UNLESS they are on separate pages. Here, you would need to change it to a class. https://tinyurl.com/y9f2bjlp

There are a lot more adjustments to be made but your original premise is really not going to work without a set screen size.:no:

---

When you take the text beyond or below 100% of what is set in the body tag, it's often not automatically adjusted in all aspects.

Your taking the #tagline (again, used twice) to 1.3em requires an appropriate change in linespacing so that the lines of text do not run together.

Do you actually have two HEADER_SALES_TEXT defines in your includes/languages/english/responsive_classic/header.php?

You can combine the text to look like

Code:

---

define('HEADER_SALES_TEXT', 'Going beyond your expectations...NOT your budget!<br><br><strong>Need Help? Call (678) 561-8151<br>8 AM till 10 PM Eastern Standard Time - 7 DAYS A WEEK!</strong><br><br>Email your quote requests to <a href="mailto:[email protected]&subject=Sales%20Quote&body=I%20would%20like%20a%20quote%20for...">Sales</a>');

---

That would put all the text together, add the subject to the e-mail, and even add the body text to remind them they are requesting a quote.

There are two schools of thought on the spaces (%20) in the mailto link. You could just use regular spaces but, to be on the safe side.....

Hello,
I spent a lot of time trying to realize how the layout recognizion mechanism is working
(Actually, the most important question was why $_SESSION['layoutType'] varable is always set to 'legacy')

So...

The file 'zca_responsive_functions.php' contains the following code:

Code:

---

function layoutTypes()
{
    return array('default', 'mobile', 'tablet', 'full');
}

function initLayoutType()
{
    // Safety check.
    if (!class_exists('Mobile_Detect')) { return 'default'; }

    $detect = new Mobile_Detect;
    $isMobile = $detect->isMobile();
    $isTablet = $detect->isTablet();

    $layoutTypes = layoutTypes();

    if ( isset($_GET['layoutType']) ) {
        $layoutType = $_GET['layoutType'];
    } else {
        if (empty($_SESSION['layoutType'])) {
            $layoutType = ($isMobile ? ($isTablet ? 'tablet' : 'mobile') : 'default');
        } else {
            $layoutType =  $_SESSION['layoutType'];
        }
    }

    if ( !in_array($layoutType, $layoutTypes) ) {
        $layoutType = 'default';
    }

    $_SESSION['layoutType'] = $layoutType;

    return $layoutType;
}

$layoutType = initLayoutType();

---

But this code is executed at the moment, when session is not started yet ($_SESSION array is still undefined)

(containing all functions files is being loaded before 'init_sessions.php' - see Breakpoint 60 and Breakpoint 70 in 'config.core.php' file)

Thus, any manipulations with $_SESSION in above mentioned code seem not only as exotical way, but fully incorrect.

It seems strange to me, I am the first who noticed this, but brief search over this forum gave no relevalt results.
Sorry, if I do understand something wrong

And also, should the following line be added in the beginning of function initLayoutType() ?

Code:

---

if (!class_exists('Mobile_Detect')) include_once DIR_WS_CLASSES . 'Mobile_Detect.php';

---

Quote:

---

Originally Posted by yesaul

Hello,
I spent a lot of time trying to realize how the layout recognizion mechanism is working
(Actually, the most important question was why $_SESSION['layoutType'] varable is always set to 'legacy')

So...

The file 'zca_responsive_functions.php' contains the following code:

Code:

---

function layoutTypes()
{
    return array('default', 'mobile', 'tablet', 'full');
}

function initLayoutType()
{
    // Safety check.
    if (!class_exists('Mobile_Detect')) { return 'default'; }

    $detect = new Mobile_Detect;
    $isMobile = $detect->isMobile();
    $isTablet = $detect->isTablet();

    $layoutTypes = layoutTypes();

    if ( isset($_GET['layoutType']) ) {
        $layoutType = $_GET['layoutType'];
    } else {
        if (empty($_SESSION['layoutType'])) {
            $layoutType = ($isMobile ? ($isTablet ? 'tablet' : 'mobile') : 'default');
        } else {
            $layoutType =  $_SESSION['layoutType'];
        }
    }

    if ( !in_array($layoutType, $layoutTypes) ) {
        $layoutType = 'default';
    }

    $_SESSION['layoutType'] = $layoutType;

    return $layoutType;
}

$layoutType = initLayoutType();

---

But this code is executed at the moment, when session is not started yet ($_SESSION array is still undefined)

(containing all functions files is being loaded before 'init_sessions.php' - see Breakpoint 60 and Breakpoint 70 in 'config.core.php' file)

Thus, any manipulations with $_SESSION in above mentioned code seem not only as exotical way, but fully incorrect.

It seems strange to me, I am the first who noticed this, but brief search over this forum gave no relevalt results.
Sorry, if I do understand something wrong

---

IMO, you are correct. extra_functions seem to be loaded PRIOR to session vars getting set up as well as before the loading of this class file.

HOWEVER, if one looks here:

https://github.com/zencart/zencart/b...er.php#L32-L40

i think this is where the mobile detection gets used.

you are getting set to legacy because you are using the template default. if you set your template to responsive classic, you will then see changes to your layout_type.

to me this function can be safely deleted from the zc core.

best.

Quote:

---

Originally Posted by carlwhat

IMO, you are correct. extra_functions seem to be loaded PRIOR to session vars getting set up as well as before the loading of this class file.

to me this function can be safely deleted from the zc core.

best.

---

Sure, it can. But this makes using $_SESSION['layoutType'] completely useless

- no relevant info will be kept within session in $_SESSION['layoutType']

- mobile detection will be being done for every next page again

- the only way to change $_SESSION['layoutType'] will be $_GET (see init_includes/init_zca_layout.php)

As addition to deleting of 'zca_responsive_functions.php' file (containing code, which is non-functional anyway), here is my suggestion for code in 'init_zca_layout.php' file:

Code:

---

if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}

include_once DIR_WS_CLASSES . 'Mobile_Detect.php';

if (isset($_GET['layoutType'])) $layoutType = preg_replace('/[^a-z0-9_-]/i', '', $_GET['layoutType']);
elseif (!empty($_SESSION['layoutType'])) $layoutType =  $_SESSION['layoutType'];
elseif (!class_exists('Mobile_Detect'))  $layoutType = 'default';
else {
  $detect = new Mobile_Detect;       
  $layoutType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'default');       
}
             
if (!in_array($layoutType, array('mobile', 'tablet', 'full'))) $layoutType = 'default';
       
$_SESSION['layoutType'] = $layoutType;

---

This handle $_SESSION['layoutType'] in correct way and correct place and makes any further mobile detection within (any) template unnecessary

Hi. I have recently upgraded to v1.57 and switched to this template. I have a photo showing up at the top of a product category. It is above the list of products and below the category name. It only happens in one category. Any idea why this is showing up and how I can get rid of it? Thanks

Edit: I just uploaded a thin white rectangle as a bandaid. Here a more useful question:

On the front page, there is one large image front and center. I have this linked to a particular category. Is there a way to duplicate this, so I can have a list of 3 or 4 of these, so one for each category type of thing?

Thanks

I'm guessing (without a link to the site in question), that the upper image you're referring to is the associated category's image; it must be the only category where an image is provided.

To remove that display, you'll set Configuration :: Product Listing :: Include Product Listing Top Categories Image to false.

Again, without the site link, the question about the front-and-center image is "difficult" to answer.

Thanks, that fixed the image thing.

The front page image is specified in this file:

includes/languages/english/html_includes/responsive_classic/define_main_page.php

this file is just a couple lines of code. Maybe it's a banner? I wonder if I could just copy and paste those two lines a couple times to get more of them. Thanks! Sorry, don't want to post actual site in case Russian hackers are hanging out looking for easy prey. That would be me ;) I'm probably paranoid.

Send me a link via PM (Private Message).

Quote:

---

Originally Posted by CosmosK

Sorry, don't want to post actual site in case Russian hackers are hanging out looking for easy prey. That would be me ;) I'm probably paranoid.

---

You can always do something like mysiteDOTcom or mysiiteCOMdot. We can figure it out while the bots won't wasgte their time. Gets more folks involved on the help wagon.:P

Hello members,

I'm using v1.5.7d with an older template (cherry_zen), but now I'm going to go straight-up responsive templates. I tried to load the default template (Responsive Classic), but it won't load in. I also have Responsive All Business templates installed but they won't load either.

On the center page of the Admin, it shows 2 templates, but on the right side box, it shows I have 4 templates. I switch to different templates but nothing changes on the front end.

My goal is to get the Responsive Classic template to load up. Currently the site is live.

Is there a way I can test the template being changed without visitors seeing it? If so, what do I need to do?

Thanks for your valued time!
TesterServers

https://docs.zen-cart.com/user/templ...ivate_testing/

I need to set a global min-width for Zencart so that icon images are displayed no fewer than four to a line (except for mobile devices). I am using the Responsive Classic and presumed the entry for this would be in the mainWrapper line of stylesheet.css . Setting a pixel width there has no effect on the main site. Resizing the browser to a narrow width creates odd overlaps and white space - which is why I wish to restrict this width for the client. So where should the min-width for the page be set

Quote:

---

Originally Posted by SPython

I need to set a global min-width for Zencart so that icon images are displayed no fewer than four to a line (except for mobile devices). I am using the Responsive Classic and presumed the entry for this would be in the mainWrapper line of stylesheet.css . Setting a pixel width there has no effect on the main site. Resizing the browser to a narrow width creates odd overlaps and white space - which is why I wish to restrict this width for the client. So where should the min-width for the page be set

---

I should add that I am using Zencart 1.5.7d

We are using ZenCart 1.5.7d with the built in Responsive Classic template. Our product images with description and purchase button are displayed in columns four to a row. The problem is that when the browser window is resized to a narrow width the columns overlap causing a haphazard rendering of the information and unwanted white space. Any suggestions on how to remedy this in the Admin configuration? Please see attached image.Attachment 20122

Quote:

---

Originally Posted by SPython

I need to set a global min-width for Zencart so that icon images are displayed no fewer than four to a line (except for mobile devices). I am using the Responsive Classic and presumed the entry for this would be in the mainWrapper line of stylesheet.css . Setting a pixel width there has no effect on the main site. Resizing the browser to a narrow width creates odd overlaps and white space - which is why I wish to restrict this width for the client. So where should the min-width for the page be set

---

I always work towards fluid rather than fixed website designs, which usually means specifying % values for divs and em's for text rather than pixels or other units in css. As a result, my responsive design tends to be somewhat different to the Responsive Classic, as it allows negative margins and other amazing trickery.

I tend to construct multi-tiered divs to put things into, beginning with a div 100% width of the parent div, which is then subdivided into smaller divs of equal width 1/2 = 50%, 1/3 = 33%, 1/4 = 25%, 1/5 = 20% etc width of their parent div, which is usually controlled by a particular media css attribute that can also specify a minimum and/or maximum pixel width of the div. Float left or right controls the packing or pushing of the divs. Such design provides the basis for centrally placing an image within a div of variable % width of the parent div and then stacking one or more captions beneath the image in separate divs, all controlled by css.

The body css attribute is also used to specify the minimum and/or maximum pixel widths of the overall website.

Hope this helps.

Hi Anne,

I just wanted to ask about a weird thing happing with my web site.

When i enable the header serach box I also get a small search box displayed in the top right column as well.

When I turn off the header search box, both the header search and RHS search box dissapears.

Any idea of how to fix the issue to stop the little search box appearing?

This is independant of the "real" column search box. :)

Many Thanks,
Les :)

Attachment 20216

I'm new to the responsive classic template. In the desktop view, I'd like to switch to the mobile view if the browser window is smaller than say 750 px. Any suggestions on how to accomplish this?
Thank you.
zc1.5.8a

Many people are using scaling. Some use 125% (Win10 default), others even 175% at their little tiny 4K screens.

The problem I have with responsive_classic is the proportions become all wrong as soon scaling is used. The main container width remains while inner content is being scaled.
I'm styling at a large FHD screen with 100% scaling.

When using my Win 10 17" Workstation with 4K screen the default scaling is set to 250%

I compared to other shops which behave different. They scale everything (not only the inner content) and keep the content 1:1.

Was the Important Links sidebox from the old barebones template in 1.5.4 and earlier removed in the responsive classic template? It is mentioned under the responsive classic template at https://docs.zen-cart.com/user/ezpages/ezpages_display/ but I don't see it in Admin > Tools > Layout Box Controller

Was it renamed to More Information? https://docs.zen-cart.com/user/sideboxes/sidebox_list/

I am playing around with 1.5.8a

Quote:

---

Originally Posted by pixodaros

Was the Important Links sidebox from the old barebones template in 1.5.4 and earlier removed in the responsive classic template? It is mentioned under the responsive classic template at https://docs.zen-cart.com/user/ezpages/ezpages_display/ but I don't see it in Admin > Tools > Layout Box Controller

Was it renamed to More Information? https://docs.zen-cart.com/user/sideboxes/sidebox_list/

I am playing around with 1.5.8a

---

It's still there, the ezpages sidebox. That sidebox needs to be enabled (and your site needs to have EZ-Pages defined) for the sidebox to display.

On an old site the contents of the custom pages were stored directly under public_html. Where are ez-pages and their configuration files on the file system currently?

It looks like the database-only update successfully imported the EZ-Pages, so I could go in to the admin interface and make them visible with the Layout Boxes Controller tool. Now I am trying to figure out what the old LOGO_SIDEBOX_IMAGE from barebones template corresponds to in the new responsive classic template

it doesn't correspond to any stock sidebox. Logo Sidebox is an old plugin to display a logo in a sidebox. https://www.zen-cart.com/downloads.php?do=file&id=265

Humh, I will see if I can find traces of that plugin, it seems one which is mostly modifications to preexisting files.

On Desktop, I see the EZ-Pages sidebox as Important links with links to the two custom pages (Medieval Brooch Manufacturing and Riveting- How To). But on a mobile device when I click Important Links I see EZPages, Privacy Notice, Shared, Zen Cart (none of them being the two custom pages). So the sidebox is being sourced differently in desktop layout and Mobile layout.

I will have to dig around to find out where the mobile version is coming from and how to edit it.

I acitvated a sidebox and deactivated it. Now there is a gap on the one side I can't get rid of.
All sidebox elements are deactivated.

Instead of col970 there are loaded col820 and col150

Quote:

---

Originally Posted by Shop Suey

I acitvated a sidebox and deactivated it. Now there is a gap on the one side I can't get rid of.
All sidebox elements are deactivated.

Instead of col970 there are loaded col820 and col150

---

I forgot to disable the display at the Admin.
Because the name was different I wasn't able to find the entry via Screen Search.

So problem solved.
Thanks to Jörg from webchills.at (as so !!! often before)

I am using 1.5.8a / Responsive Classic / php 7.4 - website is comfortspotfurniture.com

I have been trying to figure out the most basic thing I am sure, but am stumped. Whos Online counter is displaying in desktop view, great! However, I cannot get it to display in mobile view. In fact, none of the layout box items for left nor right column are displaying while in mobile view. I am not looking for a left column, nor right column as I understand the point of responsive view is a clean single column. My issue is, none of the items selected are displaying while in mobile view at all. I do have global column turned on and 150px for sideboxes. Help, Lol.

Quote:

---

Originally Posted by chuckrey

I am using 1.5.8a / Responsive Classic / php 7.4 - website is comfortspotfurniture.com

I have been trying to figure out the most basic thing I am sure, but am stumped. Whos Online counter is displaying in desktop view, great! However, I cannot get it to display in mobile view. In fact, none of the layout box items for left nor right column are displaying while in mobile view. I am not looking for a left column, nor right column as I understand the point of responsive view is a clean single column. My issue is, none of the items selected are displaying while in mobile view at all. I do have global column turned on and 150px for sideboxes. Help, Lol.

---

Nevermind, it's resolved. In case anyone else has the same question....

includes/templates/responsive_classic/css/responsive_default.css
1. locate the sidebox item and remove: "display:none;visibility:hidden;" (should look like {}),

2. Do the same as #1 for responsive_tablet.css

3. Go to includes/templates/responsive_classic/jscript/jscript_responsive_framework.php
locate the sidebox item you need to display and place: /* [YOUR PREFERRED SIDE BOX] */

Worked for me.

My front page has 9 products on it, then you have to go to page 2 to see more. Is there a way to increase how many can be seen at once?

Thanks

Quote:

---

Originally Posted by CosmosK

My front page has 9 products on it, then you have to go to page 2 to see more. Is there a way to increase how many can be seen at once?

Thanks

---

Look under Maximum Values under the Configuration menu in your admin.

More info is available in the docs at https://docs.zen-cart.com/user/admin...maximumvalues/

Thanks, I was just going to edit that I found it in the maximum values section. Thanks!

Zen 1.5.7c
PHP 7.4
Template: Responsive classic

Below is a screen capture of the banner. The top is normal, but if the screen width is below 768 pixels, the banner gets mangled as shown.

Is there a quick fix?

Maybe if I change the shopping cart button to plain text? How is that done?

Attachment 20827

Zen: 1.5.7c
php: 7.4
Template: Responsive Classic


How can I disable the product sorting banner shown here? For my site, sorting is not necessary, and the default is fine

Attachment 20828

Quote:

---

Originally Posted by split63

How can I disable the product sorting banner shown here? For my site, sorting is not necessary, and the default is fine

---

I made a very crude fix to this problem. Comment out line 41 of \includes\modules\responsive_classic\product_listing.php

It comments out this: $list_box_contents[0] = array('params' => 'class="productListing-rowheading"');

This removes the bulky box and just leaves a thin text version...so sorting is still offered, but no longer takes up all that space

hi there
i have a minor change i want to make but im going screwy trying to find where the right place is

the issue i have is that i have an attribute set that allows customers to upload there files, the button you click to upload the file says "choose file" i simply want to change it to say "upload file"
i have search language files, i have search attribute php files,i have checked java files, i have looked in /image/buttons folder i have used developers tool kit to search and i am loss as to where the text can be changed, can anyone help
Attachment 20868

https://www.cjscreativecrafts.com/po...irts-p-11.html

Quote:

---

Originally Posted by vmax

hi there
i have a minor change i want to make but im going screwy trying to find where the right place is

the issue i have is that i have an attribute set that allows customers to upload there files, the button you click to upload the file says "choose file" i simply want to change it to say "upload file"
i have search language files, i have search attribute php files,i have checked java files, i have looked in /image/buttons folder i have used developers tool kit to search and i am loss as to where the text can be changed, can anyone help
Attachment 20868

https://www.cjscreativecrafts.com/po...irts-p-11.html

---

That "Choose File" text comes from the browser when it encounters a form-field with an input-type of "file".

I did a web search for file upload change choose file text to see what could be done to change the text ... it's complicated.

Is there any way to replace it with a button either css or a png file?

Quote:

---

Originally Posted by vmax

Is there any way to replace it with a button either css or a png file?

---

Web search engines are your friend; did you try the web-search I suggested above? IIRC, at least one had some javascript/css that would do that.

Quote:

---

Originally Posted by lat9

Web search engines are your friend; did you try the web-search I suggested above? IIRC, at least one had some javascript/css that would do that.

---

yes. what @lat9 said makes perfect sense.

i found the 2nd solution in this posting, after doing what she recommended to be a potentially easy way to accomplish what you want.

Quote:

---

Originally Posted by carlwhat

yes. what @lat9 said makes perfect sense.

i found the 2nd solution in this posting, after doing what she recommended to be a potentially easy way to accomplish what you want.

---

thank you for the link, im not sure which file i need to edit and/or create, im a novice coder at best, i coann follow guideas and instructions and modify existing code to a small degree but thats about my limit

Quote:

---

Originally Posted by lat9

Web search engines are your friend; did you try the web-search I suggested above? IIRC, at least one had some javascript/css that would do that.

---

hi thanks for the reply
i did search and the more i read the more lost i got:unsure:, after a couple of hours of reading various results i didnt know which way was up :frusty:so had to admit defeat

ok have found a possible css solution and want to run it past you guys

the issue i am having in implementing it is knowing the exact tags required for that specific button/field

Code:

---

.upload-form .elementor-field-type-upload input[type="file"]::before{
    content: 'Browse files';
    background-color: grey;
    padding: 10px 15px;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    line-height: 3em !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

.upload-form .elementor-field-type-upload input[type="file"]::after{
    content: 'You have not chosen any files yet';
    font-size: 14px !important;
    padding-left: 10px;
}

.upload-form .elementor-field-type-upload input[type="file"]{
    font-size: 0px;
}

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button{
    display: none;
}

---

tutorial was here
https://www.youtube.com/watch?v=8XnOBVrU6r0