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

Yayyy! Perfect, that fixes the menu beautifully.

Thanks so much for helping!

idtags:

http://www.idmedicaltags.com/store/index.php?main_page=product_info&cPath=1&products_id=142

responsive_mobile.css line #409
Change the width from 70% to what you want on the mobile version.
This was for portrait view.

If you need to change for landscape view or tablets, search as mentioned at post #416

Hi,

I'm attempting to use fontawesome and/or halflings as symbols for use on pages/buttons.

Here is a link to my cart (zc155e, template is a clone of Responsive Classic):
https://002mc.justmedical.biz/Product-Test/Product-Test-1-Images

If you look at my search button to right on my top bar, you might see a search symbol before the word search. I say "might" because I'm pretty sure it's not working correctly for all browsers.

I'm pretty sure I'm doing it wrong. All I did was edit /includes/languages/english/MY_TEMPLATE/header.php by defining HEADER_SEARCH_BUTTON as:
' Search'

Then, to the stylesheet, I added:
font-family: FontAwesome;

After banging my head for a while, I tried skimming through this support thread till my head hurt.

It occurs to me that I'm probably not alone in wanting to figure this out, so maybe a bunch of folks would benefit from hearing the answers to the questions I have.

MY QUESTIONS:

1. Font files now exists in /admin/includes/fonts, so is the cart now loading them automatically? Or do I need to somehow call them to wake them up? And if the fonts exist only in the admin area (I couldn't find them in the public folders), will they still work for the store front?
2. Can somebody explain what this glyph system is and how to use it?
3. How can I use a symbol in the text on pages, like in the middle of a product page description or ez page?
4. How can I use a symbol on a button, like the search button on the top of my page?
5. How can I use a symbol in a menu? For instance, look at the word HOME to the left of my top bar. How would I replace that with just a symbol?
6. How can I use a symbol instead of an image on pages like the shopping cart? On my site, if you add something to your cart, you will go to the cart and see an image is used for the refresh button and that little trashcan.
7. SIDE QUESTION: I'm using ckeditor. Every time I try inserting unicode calls they die. Is there anything I can/should do to fix that?

Really explanations aren't terribly necessary (though I'd love to understand this glyph system), because a few simple real life examples could easily be modeled.

Thanks!

@Feznizzle, since your template is already pulling in the Font Awesome CSS, why not use the FA interface defined here: http://fontawesome.io/examples/

You don't need to mess with the font-family or loading that font to your store's file system and it's more intuitive (well, kind of). For example, you could code your HEADER_SEARCH_BUTTON as

'<i class="fa fa-search" aria-hidden="true"></i> Search'

to receive the results you're looking for.

Thanks for the suggestion.

I changed this (in includes/languages/english/mc001/header.php):
define('HEADER_SEARCH_BUTTON',' Search');

To this:
define('HEADER_SEARCH_BUTTON','<i class="fa fa-search" aria-hidden="true"></i> Search');

A weird image then appears, instead of the expected change. Did I do something wrong?

I think I found my problem, but I don't know how to fix it.

This is what I put in the define:
<i class="fa fa-search" aria-hidden="true"></i> Search

I loaded the page and check source, finding this:
<i class="fa fa-search" aria-hidden="true"></i> Search "

Can somebody tell me how to escape those quotes? Or is that not my issue?

hi I try to insert a background image for index and every page. I am using responsive template on zc 1.5.5e
I tried to insert this in stylesheet.css

/*bof basic elements*/
body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background-image: url(../images/my-image-background.jpg);}

obviously I upload image in /images folder.

Please how can I solve it?

Feznizzle:

I think I found my problem, but I don't know how to fix it.

This is what I put in the define:
<i class="fa fa-search" aria-hidden="true"></i> Search

I loaded the page and check source, finding this:
<i class="fa fa-search" aria-hidden="true"></i> Search "

Can somebody tell me how to escape those quotes? Or is that not my issue?
What program are you using to edit that language file?

lat9:

What program are you using to edit that language file?

Textwrangler

Because you asked, I reloaded the file as utf8 and resaved. No dif. Then I did the same thing via cpanel file manager, same thing.

Also, in a dif staging area, I reverted file sets way back before I started modding. This is basically just zc155e, plus Responsive Classic (not a clone). When I alter the define, same thing occurs:
https://001mc.justmedical.biz/

Feznizzle:

Textwrangler
I just remembered (duh) that the Search button is being used as a submit-type button, so the suggestion that I made won't be viable. That's where the CSS3 Button plugin came into being.

lat9:

I just remembered (duh) that the Search button is being used as a submit-type button, so the suggestion that I made won't be viable. That's where the CSS3 Button plugin came into being.

I thought CSS3 Button predated zc155 and much of your mods functionality had been incorporated directly into zc155 (font support, etc).

I wish I could figure out which pieces of the button mod need to be added into 155 to get the mod working.

One interesting thing I've discovered is that the language file itself (includes/languages/english/MY_TEMPLATE/header.php) is being sanitized so that html cannot be used inside defines.

I grew impatient waiting for someone to respond over here, so I started another thread. The sanitation thing is discussed there:
https://www.zen-cart.com/showthread.php?223072-Trying-to-us-html-in-a-define-HELP-PLEASE!

It's possible that if the sanitation can be bypassed, the mod could work. And/or it might not even be needed?

Feznizzle:

I thought CSS3 Button predated zc155 and much of your mods functionality had been incorporated directly into zc155 (font support, etc).

I wish I could figure out which pieces of the button mod need to be added into 155 to get the mod working.

One interesting thing I've discovered is that the language file itself (includes/languages/english/MY_TEMPLATE/header.php) is being sanitized so that html cannot be used inside defines.

I grew impatient waiting for someone to respond over here, so I started another thread. The sanitation thing is discussed there:
https://www.zen-cart.com/showthread.php?223072-Trying-to-us-html-in-a-define-HELP-PLEASE!

It's possible that if the sanitation can be bypassed, the mod could work. And/or it might not even be needed?
Please send me a PM with your direct email address and I'll package up the CSS3 Buttons glyph-related changes required for the ZC 1.5.6 version of /includes/functions/html_output.php and send that to you directly.

giuly:

hi I try to insert a background image for index and every page. I am using responsive template on zc 1.5.5e
I tried to insert this in stylesheet.css

/bof basic elements/
body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background-image: url(../images/my-image-background.jpg);}

> 
> obviously I upload image in /images folder.
> 
> Please how can I solve it?You might want to change background-image to background.

Hello,

I have **footer **with EZ-Pages links in Desktop and Tablet templates but not in Mobile.

Please, advise where is code or admin to control On/OFF .

Thank you.

idtags:

Hello,

I have **footer **with EZ-Pages links in Desktop and Tablet templates but not in Mobile.

Please, advise where is code or admin to control On/OFF .

Thank you.
For mobile/tablet views, those footer links have been moved to the "Important Links" section of the mobile-menu (the bottom-most link).

I probably am not clear with definitions.

So, for Tablet "Apple Air" I have Footer shown like this: [Attachment no longer available]

And for "i-Phone 6S" footer is missing: [Attachment no longer available]

Link to responsive template is **here**

We consider that we have footer on Tablet (iPad), but do not have it on Mobile phones.

Are we wrong?

Question is how to add footer to mobile Phone?

lat9:

For mobile/tablet views, those footer links have been moved to the "Important Links" section of the mobile-menu (the bottom-most link).

This is Ok too, but how to make it visible on the bottom?

Thank you for your time in advance.

@idtags
Responsive Classic template (built in to Zen Cart v1.5.5) does not have footer for mobiles.
All the "footer" menu that you see on desktop / ipads goes inside "Important Links" as @Lat9 said.
Example: https://greenpillow.co.il

Sheffield Blue 2.0 has a special footer that Anne put in her template and it does appears on mobiles.
Example: https://flowersoaps.co.il/

So if you want to show footer for Responsive Classic template, check the footer plugin that Anne added.

idtags:

I probably am not clear with definitions.

So, for Tablet "Apple Air" I have Footer shown like this: [Attachment no longer available]

And for "i-Phone 6S" footer is missing: [Attachment no longer available]

Link to responsive template is **here**

We consider that we have footer on Tablet (iPad), but do not have it on Mobile phones.

Are we wrong?

Question is how to add footer to mobile Phone?

This is Ok too, but how to make it visible on the bottom?

Thank you for your time in advance.

It's shut off in CSS - look in your responsive and mobile .css for navSupp or **navSuppWrapper ** and change this {display:none;visibility:hidden;} to view.

You can model the existing footer menu or make a new one like this:

Add this to your_template/tpl_footer.php

<!-- bof Twitch Footer Navigation for 155e -->

<!-- footer structure here using divs to manage each button with db OR independantly with CSS as it should be -->
<div id="twiFooterNav">

<div id="footerHomeButton" class="twiFooterNavButtons"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></div>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
<?php } ?>
<div id="footerLeaveButton" class="twiFooterNavButtons"><?php echo '<a href="http://twitchtoo.com/">'; ?><?php echo 'Exit Code Shop'; ?></a></div>
<div id="footerBackToTopButton" class="twiFooterNavButtons"><a href="#top">Back to Top</a></div>
<!-- Twitch hide back to top icon <div id="footerBackToTopButton" class="twiFooterNavButtons"><a href="#top"><i class="fa fa-arrow-circle-up" title="Back to Top"></i></a></div> -->
<div id="footerContactButton" class="twiFooterNavButtons"><?php echo '<a href="' . zen_href_link(FILENAME_CONTACT_US, '', 'SSL') . '">' . BOX_INFORMATION_CONTACT . '</a>'; ?></a></div>
</div> <!-- twifooterNav ends -->

<!-- eof Twitch Footer Navigation for 155e -->

Add this to your css stylesheet:
/* Twitch Footer Navigation for 155e */
#twiFooterNav {margin: 0; padding: 0; width: 100%; background: #D7D6CC; display:table; }
.twiFooterNavButtons {font-size: 1rem;display:table-cell;vertical-align: middle;}
.twiFooterNavButtons a:link {text-decoration: none;padding: 1em 1em; display:inline-block;color: #444;}
.twiFooterNavButtons a:visited {text-decoration: none;padding: 1em 1em; display:inline-block;color: #444;}
.twiFooterNavButtons a:hover {background:#444; color: white;}

Here I've stopped using the HTML/CSS - UL LI that is a mess in the stock template, this provides more control for future updates and maintains responsive layouts without the use of the Mobile/Tablet/Desktop/Other control switch... it just works :)

It's shut off in CSS - look in your responsive and mobile .css for navSupp or navSuppWrapper and change this {display:none;visibility:hidden;} to view.

You can model the existing footer menu...

I looked in my responsive.css there is nothing like navSupp or navSuppWrapper.

I changed "hidden" in responsive_mobile.css to "visible" in two occurrences:

/bof basic/
legend{line-height:25px;}
.mhide{display:none;}
#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:visible;}
h2{line-height:22px;}
input[type=password], select, input[type=number], input[type=tel], input[type=email]{width:80%;margin-left:20px;}
input[type=text]{width:80%;margin-left:15px;}

and

/bof basic/
legend{line-height:25px;}
.mhide{display:none;}
#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:visible;}
h2{line-height:22px;}
#cartAdd input[type=text]{width:11% !important;}
input[type=password], select, input[type=tel], input[type=text], input[type=email]{width:85% !important;}

Footer did not show on mobile template.

I stopped at this point. :cool: