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

[picaflor-azul]

This is a support thread for the Responsive Classic template built-in to Zen Cart v1.5.5

Anne

[Webskipper]

HI Anne:

I really like the 155 Responsive Classic template because I use the Winchester Responsive on another site for now until it is upgraded to 155.

Aside from customizing colors I have a couple requests.

I would like to streamline the Header and Search side box to match the Winchester, including the Cart Total on both the mobile and desktop templates.

For the mobile, I will just use the Header Search.

See the attached pics. Where would I find the code and can I simply copy/paste from the Winchester code?

I would also like to use css buttons on the mobile side because the buttons are too small to read.

Which choice do I use to prevent a double search box on the mobile. Thanks!

[robbie269]

If I add sideboxes how do I get them to change in the mobile version like the standard ones do?

[rbarbour]

The side-boxes for specific devices in v1.5.5 Responsive Classic are controlled by CSS.

Open these 3 files:
/includes/templates/responsive_classic/css/responsive_default.css
/includes/templates/responsive_classic/css/responsive_mobile.css
/includes/templates/responsive_classic/css/responsive_tablet.css

The responsive_default.css file manipulates the side-boxes for all devices if a UA (User-Agent) is not detected.

The responsive_mobile.css & responsive_tablet.css files manipulates the side-boxes for specific devices if a UA (User-Agent) is detected

Each file will have code that starts with:

/*bof side-boxes*/
/* ADD { display:none;visibility:hidden; } to Hide Side-Box */
/* LEAVE BLANK {  } to Show Side-Box */

Take a look at the CSS and how the stock side-boxes are handled.

If I add sideboxes how do I get them to change in the mobile version like the standard ones do?

[robbie269]

Thank you. Worked perfectly! Simple when you know where to look...

The side-boxes for specific devices in v1.5.5 Responsive Classic are controlled by CSS.

Open these 3 files:
/includes/templates/responsive_classic/css/responsive_default.css
/includes/templates/responsive_classic/css/responsive_mobile.css
/includes/templates/responsive_classic/css/responsive_tablet.css

The responsive_default.css file manipulates the side-boxes for all devices if a UA (User-Agent) is not detected.

The responsive_mobile.css & responsive_tablet.css files manipulates the side-boxes for specific devices if a UA (User-Agent) is detected

Each file will have code that starts with:

/*bof side-boxes*/
/* ADD { display:none;visibility:hidden; } to Hide Side-Box */
/* LEAVE BLANK {  } to Show Side-Box */

Take a look at the CSS and how the stock side-boxes are handled.

[athena]

Just installed 1.5.5 and trying to work the style sheet for responsive classic. I just need the logo to center. Spent all afternoon with trial and error and no luck. Any insights appreciated. Edited this to reflect some fixes i found but still the logo needs centering.

[lat9]

Issue: State Dropdown not displaying properly

Solution: See this (https://www.zen-cart.com/showthread....s-other-fields) posting, with solution provided.

[idtags]

Hello group!

I could figure out how to use "Inspect" tool on Computer Browser and find what line to adjust on stylesheet_colors_split.css file.
So this makes it good only on PC's.

Please suggest what tools or techniques to use in order to find which line to modify in responsive_mobile.css and responsive_tablet.css ?

Thank you in advance.

[buildingblocks]

The side-boxes for specific devices in v1.5.5 Responsive Classic are controlled by CSS.

Open these 3 files:
/includes/templates/responsive_classic/css/responsive_default.css
/includes/templates/responsive_classic/css/responsive_mobile.css
/includes/templates/responsive_classic/css/responsive_tablet.css

The responsive_default.css file manipulates the side-boxes for all devices if a UA (User-Agent) is not detected.

The responsive_mobile.css & responsive_tablet.css files manipulates the side-boxes for specific devices if a UA (User-Agent) is detected

Each file will have code that starts with:

/*bof side-boxes*/
/* ADD { display:none;visibility:hidden; } to Hide Side-Box */
/* LEAVE BLANK {  } to Show Side-Box */

Take a look at the CSS and how the stock side-boxes are handled.

Hi

I have tried this method in order to get the categories sidebox to display in mobile view. In desktop responsive view it works but it's not working in mobile view. Firebug shows me for the #categories sidebox there's an inline style with display: none; visibility: hidden;.

<div style="display: none; visibility: hidden;" id="categories" class="leftBoxContainer">

Am I missing something?

thanks

[rbarbour]

To maximize user experience on mobile devices, jQuery was added to hide all side-boxes regardless of CSS.

open:
/includes/templates/responsive_classic/jscript/jscript_responsive_framework.php

should be line 37:

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

change to:

$('#categories').css({  });

Hi

I have tried this method in order to get the categories sidebox to display in mobile view. In desktop responsive view it works but it's not working in mobile view. Firebug shows me for the #categories sidebox there's an inline style with display: none; visibility: hidden;.

<div style="display: none; visibility: hidden;" id="categories" class="leftBoxContainer">

Am I missing something?

thanks