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

I would like to change the colour of the blue drop down menu on the mobile version of responsive_classic. It's the three horizontal "hamburger" lines. Normally, I'd just use Inspect Element in my computer's web browser to hunt it down, but can't do this in a standard mobile browser. Can someone point me to the css file that controls the colour?

Thanks

wilorc:

I would like to change the colour of the blue drop down menu on the mobile version of responsive_classic. It's the three horizontal "hamburger" lines. Normally, I'd just use Inspect Element in my computer's web browser to hunt it down, but can't do this in a standard mobile browser. Can someone point me to the css file that controls the colour?

Thanks

You'll want to change:
includes/templates/YOUR_TEMPLATE/common/**tpl_header.php
**both occurrences line 46 and 48
** <i class="fa fa-bars"></i>

**You could change it to:
<i class="fa fa-chevron-left"></i>

Then change the colour:includes/templates/YOUR_TEMPLATE/css/**jquery.mmenu.all.css
**line 1572
change this:
.header .fa-bars{font-size:225%;}

to this:
.header .fa-chevron-left{
font-size: 225%;
margin: .1em;
color: #941818;
}

This will give you independent control of the colour - separate from the menu text/link/hover colours.

You will have a *red *looking *left *pointing chevron :)

Font Awesome Icons shows a rather large selection to view and test, just be sure to mind the font-size to fit your menu bar.

twitchtoo:

You'll want to change:
includes/templates/YOUR_TEMPLATE/common/**tpl_header.php
**both occurrences line 46 and 48
** <i class="fa fa-bars"></i>

**You could change it to:
<i class="fa fa-chevron-left"></i>

Then change the colour:includes/templates/YOUR_TEMPLATE/css/**jquery.mmenu.all.css
**line 1572
change this:
.header .fa-bars{font-size:225%;}

to this:
.header .fa-chevron-left{
font-size: 225%;
margin: .1em;
color: #941818;
}

This will give you independent control of the colour - separate from the menu text/link/hover colours.

You will have a *red *looking *left *pointing chevron :)

Font Awesome Icons shows a rather large selection to view and test, just be sure to mind the font-size to fit your menu bar.

Thank you so much. That worked perfectly :smile:

Does anyone have a copy of the 'tpl_header.php' file, i have over written it and need the default coding for it that i could paste in. Would be much appreciated, thanks.

JakeLawless:

Does anyone have a copy of the 'tpl_header.php' file, i have over written it and need the default coding for it that i could paste in. Would be much appreciated, thanks.

Best thing to do is download and unzip the Zencart 1.5.5f release software, where you'll find it and all the other files, plus will be useful to keep in case needed again.

Anyone know how to center the 'logo' at the top of the page i ant figure it out?

Also on my CCTV Page why at the bottom do my side boxes go to the left side when they're right side on the main page? Thanks

Site is - http://www.mas-uk.com/cctv-merseyside-1/

JakeLawless:

Anyone know how to center the 'logo' at the top of the page i ant figure it out?

Also on my CCTV Page why at the bottom do my side boxes go to the left side when they're right side on the main page? Thanks

Site is - http://www.mas-uk.com/cctv-merseyside-1/
To my eyes, it looks like the "logo" is centered ... it's just that the image fades in from the left.

I don't understand the 2nd question. I clicked the CCTV "category link" and don't see any sidebox difference between that and the main page. Perhaps if you posted a screenshot (with a pointer) to illustrate what you see ...

JakeLawless:

Anyone know how to center the 'logo' at the top of the page i ant figure it out?

Are you asking about how to centre on standard (desktop) display?

JakeLawless:

Anyone know how to center the 'logo' at the top of the page i ant figure it out?

Also on my CCTV Page why at the bottom do my side boxes go to the left side when they're right side on the main page? Thanks

Site is - http://www.mas-uk.com/cctv-merseyside-1/

You may need to prescribe a width for the element concerned before applying margin:auto; in css.

dw08gm:

You may need to prescribe a width for the element concerned before applying margin:auto; in css.

I centred my logo for desktop display with the following:

In file includes/templates/YOUR_TEMPLATE/css/stylesheet.css line 128 after the #logo element

.centred {text-align:center;}

In file includes/templates/YOUR_TEMPLATE/common/tpl_header.php line 167 change

<div id="logo">

To be

<div id="logo" class="centred">

zc1.5.5f, clone responsive_classic. Site is new build in progress to replace older template. url in my sig file.

Has anyone figured out how to get Currencies selection to work in mobile, either in the side menu or header? I see posting from summer 2016 pointing to /includes/templates/YOUR_CUSTOM_responsive_classic_FOLDERNAME/templates/tpl_modules_mobile_menu.php, and I can see where a code insert would likely go, but haven't a clue what to copy in there.

Hello dears

is there a online demo of the new responsive template distributed with 1.5.5f ?

thanks

I'm currently using it on my demo site, with the default coloring.

Akasashasha:

Hello dears

is there a online demo of the new responsive template distributed with 1.5.5f ?

thanks

thanks a lot ...

Hello team,

When I use I-phone in horizontal position text looks acceptable:

But in vertical position it is squeezed:

Is this functionality of template for mobile phone and user would intuitively rotate the device, or there is a way to fit everything in both cases?

Thank you for reply in advance.

Set your mouse on the squeezed text, right click then click on "inspect". Then play around with the css settings that show up to improve your display.

marton_1:

Set your mouse on the squeezed text, right click then click on "inspect". Then play around with the css settings that show up to improve your display.

So, say I have mouse on Line 1:

Should I make change in CSS file and then look in browser, or it can be somehow modified "on fly" while inspecting elements?

My intend is to align the text (Line 1, Line 2,...) to the left. Then I always will have maximum space.

Is there anything you can point on image?

idtags:

So, say I have mouse on Line 1:

Should I make change in CSS file and then look in browser, or it can be somehow modified "on fly" while inspecting elements?

My intend is to align the text (Line 1, Line 2,...) to the left. Then I always will have maximum space.

Is there anything you can point on image?

Just right click anywhere on the squeezed text, and then on "inspect"

A new window will pop up, on the right of the window you will see the css.

You can make changes here on the fly.
When you have a display that is OK then update the css file itself, you should see displayed which css file to update and which file line to change.

That is how it works in Chrome; I assume other browsers work the same way.

Your image is not so clear so it is hard to say where to change

try adding
float: left;
under
text-align:left;
in the part labelled responsive_mobile......

Thank you this is working!