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

[dbltoe]

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.

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.

[rlexyd]

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

[rlexyd]

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.

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?!

[rlexyd]

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 :)

[rlexyd]

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

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

[rlexyd]

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.

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

[rlexyd]

Just bumping this up, could really use the help.

[simon1066]

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:

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