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

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.

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. (https://www.discountprintingservice.com) Can anybody help me out?

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. (https://www.discountprintingservice.com) Can anybody help me out?

<html> <table> <tr><a href="mailto:[email protected]">[email protected]</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

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

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.

marton_1:

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

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?

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.

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]</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?](https://www.zen-cart.com/showthread.php?227772-How-do-I-add-these-elements-to-my-header)

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```
/* 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.

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```
/* 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?

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.

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.

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]</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

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```
/* 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](https://docs.zen-cart.com/user/new_user_topics/change_header_logo/) as the modern browsers do not like anything but numerical information on either the store or admin logo sizes.  The docs should say ```
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 ```
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.