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

ZenCart v1.5.5e
About_us page
dbio 1.3.0
MainImageReplacer-v1.0
Image_Handler4_v4.3.2

Can this be fixed? --> Yes, no, maybe?

Attachment 17198

Quote:

---

Originally Posted by IATIA

ZenCart v1.5.5e
About_us page
dbio 1.3.0
MainImageReplacer-v1.0
Image_Handler4_v4.3.2

Can this be fixed? --> Yes, no, maybe?

Attachment 17198

---

Looks like CSS problem.
Please send your site url so we could "play" with it :)

@IATIA, it looks like if you edit line 320 of your stylesheet.css and remove the

Code:

---

margin-left: -74%;

---

... you'll wind up with what you want.

Sorry. Did not see that you allready gave your url...

You can add in your stylesheet.css margin-top: 50px

Code:

---

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {margin-top: 50px;text-align:center;}

---

But check carefully if the other elements also require this margin.
If not, make a new line for the other elements.

Also check the problem in mobiles and tablets as they have another CSS files.

Quote:

---

Originally Posted by lat9

@IATIA, it looks like if you edit line 320 of your stylesheet.css and remove the

Code:

---

margin-left: -74%;

---

... you'll wind up with what you want.

---

That did it. Thanks!

Thanks to all.

When testing I have the "Blue" tab bar & the "Black" footer bar shown on desktop & tablet. They do not show on Mobile. How do I get both to show on Mobile? If they are turn off is there a reason? I can live without the Blue tab bar but must have the Black footer bar to show on Mobile.

I have a long Tag Line text. If screen size is reduced to where text wraps there is not enough vertical space between text. I assume this can be change in the css file. Could someone explain where & how?

Having a horrible time trying to track down an issue that i'm having with font awsome. This one is driving me nut as i've spent tons of hours trying to track it down. here is a link that displays issue

http://www.babciaspierogi.com/store/...&products_id=1

all my buttons are showing the "diamond ? ", but the header glyphs are showing fine on mobile, its mostly the main content buttons ?? i have installed css3 buttons, but have disabled them to make sure they weren't the issue and the broken glyphs are still showing up. i'm using the responsive classic template and v1.5.5b of zen cart.

any help would be appreciated.

Your database language probably doesn't match the language listed in the configure files. If the config files show utf8, you'll need to convert the database to match.

https://www.zen-cart.com/content.php...8859-1-to-utf8

thanks for the help, unfortunately everything was set to utf8 :( , so thats not the issue ? i kinda played with that idea a bit already.

I can remove the offending characters by omitting text in the inspect mode. That tells me the offending code is hard-coded in a file somewhere. It was probably entered before everything was upgraded to utf8.

Try using the Developer's toolkit to search for Return to the Product List. That should give you some idea as to where the file is located.

Quote:

---

Originally Posted by zskiman

Having a horrible time trying to track down an issue that i'm having with font awsome. This one is driving me nut as i've spent tons of hours trying to track it down. here is a link that displays issue

http://www.babciaspierogi.com/store/...&products_id=1

all my buttons are showing the "diamond ? ", but the header glyphs are showing fine on mobile, its mostly the main content buttons ?? i have installed css3 buttons, but have disabled them to make sure they weren't the issue and the broken glyphs are still showing up. i'm using the responsive classic template and v1.5.5b of zen cart.

any help would be appreciated.

---

Just a shot in the dark. Are you using Firefox? If so you might try resetting Firefox back to original (no add-in). Seems I remember having the same issue and it turned out to be some setting in the browser.

Hi.

I'm new to the forum but have been using Zencart for a few years with v151. I have enough knowledge to tweak things around the edges but can't get to the root of this problem. I've just upgraded to v155e and the Picaflor Azul Responsive Classic template. I'm having an issue with the layout of the mobile menu and can't find any help for this specific problem on the forum or elsewhere. If you could help I'd be very grateful.

Details:
Current ZC version 1.5.5e
Server Apache PHP 7.0.24
MySQL version 10.1.28-MariaDB
Website URL: www.welovefabric.co.uk

The problem:

My products are stored in the following category structure:

-All Fabrics
-Fabric Shop
-Cotton Fabric
-(products)
-Polyester Fabric
-(products)
-Fat Quarters
-(products)
- ...etc...
-Lace Shop
-(products)

So one main category with no products, and two sub-categories which include the products.

The menu structure shows correctly on the desktop version of the site. I don't want to see the "All Fabrics" category and "Categories with 0 Products Status" is set to "0". On a mobile screen, the menu initially does not show the categories, but a row of half-height is in the position with "2>" on the right side, partially overlapped by the "All products..." row. The "2>" is clickable but it's easy to hit "All products..." instead.

Can the menu start expanded? What's going wrong?

Images can be found here: https://drive.google.com/open?id=0By...3BKcUlKN2ZHMWs
I was unable to upload images to the forum as the uploader didn't work...

Many thanks for your help.
Andy.

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.

in either firefox or chrome, hit F12.
In chrome, look for what looks like a mobile phone an tablet in the upper-left corner of the tool areaa.
In firefox, hit F12 and look to the far right of the toolbar to a mobile phone icon.

To get more close mobile/tablet view on a sedktop add to your url /index.php?main_page=index&layoutType=mobile
so the url will be like: http://www.yourdomain.co.il/index.ph...outType=mobile
That was for mobile view.
For tablet view change the "type=mobile" to "type=tablet"
and do not forget to make shift+F5 refresh.
When need to go back to Desktop view type "type=dekstop" as sample above.

@megashopper
You can play in the file /includes/templates/responsive_classic /templates/tpl_modules_mobile_menu.php
There you can change the "things" you do not like to show on mobiles.
For example around line #33 to hide "categories" I added <!-- and --> to cancel this line:

Code:

---

<!-- <li><span><?php echo BOX_HEADING_CATEGORIES; ?></span> -->

---

Thank you for the reply to all.

Attachment 17362

I uploaded file where I am trying to see reference to responsive_mobile.css file.

I am thinking that mobile appearance should be in mobile template.

But I can not find any mention of it at all.

Does it mean that I can not change for an example size of the box independent on PC and mobile?

Or I am looking in wrong place?

Is the /includes/templates/responsive_classic /templates/tpl_modules_mobile_menu.php place to do it?

Can you send your url ?

Quote:

---

Originally Posted by gunni

Can you send your url ?

---

http://www.idmedicaltags.com/store/i...roducts_id=142

Yayyy! Perfect, that fixes the menu beautifully.

Thanks so much for helping!

Quote:

---

Originally Posted by idtags

http://www.idmedicaltags.com/store/i...roducts_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/Produc...-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:
'&#xf002; 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>&nbsp;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','&#xf002; Search');

To this:
define('HEADER_SEARCH_BUTTON','<i class="fa fa-search" aria-hidden="true"></i>&nbsp;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>&nbsp;Search

I loaded the page and check source, finding this:
<i class=&quot;fa fa-search&quot; aria-hidden=&quot;true&quot;></i>&nbsp;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

PHP Code:

---

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

Quote:

---

Originally Posted by 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>&nbsp;Search

I loaded the page and check source, finding this:
<i class=&quot;fa fa-search&quot; aria-hidden=&quot;true&quot;></i>&nbsp;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?

Quote:

---

Originally Posted by 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/

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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....ne-HELP-PLEASE!

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

Quote:

---

Originally Posted by 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....ne-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.

Quote:

---

Originally Posted by 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

PHP Code:

---

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

Quote:

---

Originally Posted by 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 17533

And for "i-Phone 6S" footer is missing: Attachment 17534

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?

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by idtags

I probably am not clear with definitions.

So, for Tablet "Apple Air" I have Footer shown like this: Attachment 17533

And for "i-Phone 6S" footer is missing: Attachment 17534

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

PHP Code:

---

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

Quote:

---

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:

Quote:

---

Originally Posted by idtags

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:

---

Remove or change the display: none;

You could display: block or inline-block... but none will also turn the block off.

Thank you, your recent suggestion brought Footer in Mobile template to life!

For others, to recap the actions, to make footer visible in mobile template do following:

1. In file /includes/templates/your_responsive_template/css/responsive_mobile.css

change the line:

#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:hidden;}

to line:

#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:block;visibility:visible;}

Snapshot of line position in december 2017 Attachment 17544

Result of actual change: Attachment 17545

In the classic template the attributes of a product and the "add to cart" button come after or below the product description. But in most responsive templates, attributes and add to cart are in the upper right corner, and the description is below all this. Is there some way to position attributes and add to cart (which is usually in a box) below or after the product description?

includes/templates/responsive_classic/templates/tpl_productinfo_display.php is fairly well compartmentalized and defined with <!--bof through <!--eof for each section. You can experiment with those by moving them to different areas of the file.

Keep in mind that many features on this page are stylesheet-controlled and, as such, may look completely different in mobile or tablet mode after your adjustments.

Thanks for the pointer - I will see what happens from here!

Quote:

---

Originally Posted by sdelaney

In the classic template the attributes of a product and the "add to cart" button come after or below the product description. But in most responsive templates, attributes and add to cart are in the upper right corner, and the description is below all this. Is there some way to position attributes and add to cart (which is usually in a box) below or after the product description?

---

You may run into this:
includes/modules/YOUR_TEMPLATE/product_listing.php

PHP Code:

---

<div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>' 


---

Notice the location within the $lc_text output line

PHP Code:

---

        $lc_text = '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id'] > 0) ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>'; 


---

This caused a lot of grief trying to control the product description location between mobile/tablet/desktop using CSS.

MOVING the product_description code block to a neutral location THEN modifying the CSS will maintain coding sanity ;)

Just be sure you don't add it into a site feature that may get shut off or ignored in the code flow. An example, if you add it to the products_model $lc_text output and turn off Display Product Model in admin... you'll hide both the model and the description.

I have an issue in regards to the layout of the Attributes within my product listing.

Basically I would just like them to be in line, can anyone help please?

Thank you in advance

A link to the site will help others help you, @Shillam! Welcome to the Zen Cart community!

www.print-shack.co.uk Thank you in advance

@Shillam, using FireFox, I pressed the F12 key to bring up the "Developer Tools" and used the Inspector tab to navigate through the HTML to find the cart-box and the productsAttributes div.

You need those option-names to "line up", so they need to have a specific width. You can edit your stylesheet.css file, adding to the bottom:

Code:

---

h4.optionName { width: 15em; }

---

to set that specific width.

Before you get too much further, I suggest using the Clone a Template plugin to (er) clone your current copy of the responsive_classic template so that your changes are easier to manage on any site upgrade.

You can also spiffy it up a little more by making it

Code:

---

h4.optionName, .wrapperAttribsOptions select { width: 15em; }
input#attrib-4-0 {width:14.3em;}

---

You can adjust from there to make it more to your liking.

BUT.... You may also want to consider adding some Please Select a ... to your Option Values. Using "Please Select a Size" for the hoodie, "Please Select a Colour" for the hoodie and design, and using a requirement for text in the Custom Name can keep the customer from accidentally ordering something they did not want.

You would add each as an option value to the option name and, when adding to the item in the Attributes Controller, mark each Please Select as "Used for Display Purposes Only" and "Default Attribute to be Marked Selected." Yellow and Gold would now show up in the listing rather than an X.

For the text, you would use the "Attribute Required for Text" selection WITHOUT the yellow or gold. You can add some text asking your customer to enter N/A if they do not want a Custom Name.

Thank you for that, however I have looked everywhere and tried editing different things and it still won't work - ARGHHHHHHHHHHH

Did you add it the END of your stylesheet.css? That's where it needs to go as lat9 pointed out.

Make sure you clear your cache after the change so you can really see if it took.

There's also going to need to be an adjustment for when your screen is more than 1500 pixels in width.

That would be in the responsive_default.css in lines 380 thru 412

I have an issue with Responsive Classic that appeared today and can't figure out why. All of a sudden the right column has moved to the bottom of the middle section of my site (osdparts.com). Have current zen cart installed and using chrome. The fonts on the "what's new" and "specials" sections seem to be really big too and weren't before. Is there a common thing that causes that to happen? The only thing I did today was adding some new products to the site. Turned all products added off and still have the issue. Tried searching for a previous thread for info on the issue with no luck.

Quote:

---

Originally Posted by osdmarine

I have an issue with Responsive Classic that appeared today and can't figure out why. All of a sudden the right column has moved to the bottom of the middle section of my site (osdparts.com). Have current zen cart installed and using chrome. The fonts on the "what's new" and "specials" sections seem to be really big too and weren't before. Is there a common thing that causes that to happen? The only thing I did today was adding some new products to the site. Turned all products added off and still have the issue. Tried searching for a previous thread for info on the issue with no luck.

---

Any chance there is some stray bracket or colon within the product text, description, model, etc that could have been interpreted by the browser as markup code? This usually happens when there is a minor break in the HTML start/end tags.

Quote:

---

Originally Posted by twitchtoo

Any chance there is some stray bracket or colon within the product text, description, model, etc that could have been interpreted by the browser as markup code? This usually happens when there is a minor break in the HTML start/end tags.

---

Found it! Turns out somehow my main page got messed with and some lines added changing the table that's on the home page. I didn't do it so strange sometimes pages get html added with me doing nothing to them.

Quote:

---

Originally Posted by osdmarine

Found it! Turns out somehow my main page got messed with and some lines added changing the table that's on the home page. I didn't do it so strange sometimes pages get html added with me doing nothing to them.

---

HTML does NOT self-generate. You need to contact your host and see if they can find when this change was made in their logs to see if you might have been hacked.
Meanwhile, it's probably not a bad idea to follow http://www.zen-cart.com/wiki/index.p...ing_From_Hacks just to make sure no one's messing with you.

Hi, im having a fresh install of v1.5.5f using template responsive classic.

I changed the background color, but want to give the sideboxes an other background color, i can't find where to do that. Anyone who can help me ?

The stylesheet for this template is a little confusing. I suggest you do the following.

Investigate two mods.

First, look at the Color Change Mod. It allows the break-out of colors for easier editing.

Second, Clone a Template by lat9. You can use this to clone the template into your own. This gives you something to fall back on if you mess something up.

I suggest the following sequence.

Install the Color mod, Clone it to your own template, and edit your own template.

hello.. i want to add contact us to the header but i put it in places i think it should go and nothing

I used this info but using this template you will see what happened
https://www.zen-cart.com/content.php...der-and-footer
i know the info maybe a little outdated but i added to three different places and still no contact us

my site is http://herasonlinemarket.com
thank you ahead of time.

Quote:

---

Originally Posted by noppie

hello.. i want to add contact us to the header but i put it in places i think it should go and nothing

I used this info but using this template you will see what happened
https://www.zen-cart.com/content.php...der-and-footer
i know the info maybe a little outdated but i added to three different places and still no contact us

my site is http://herasonlinemarket.com
thank you ahead of time.

---

Do you mean the tagline like here where the telephone number appears ?

[QUOTE=gunni;1341267]Do you mean the tagline like here where the telephone number appears ?[/QUOT
thank you for responding..
i would like to have the contact on the other side of where it says log in .. on the pink line...
thank you

left side should be done in stylesheet.css #tagline {text-align:left}
If you want the tagline to be at the same line of the search line, you should do it in the php file.

Quote:

---

Originally Posted by gunni

left side should be done in stylesheet.css #tagline {text-align:left}
If you want the tagline to be at the same line of the search line, you should do it in the php file.

---

yes I know that.. I have been using zen cart for years.. but took a long break.. and i just got to learn the different parts of the header file in the commons folder..
i think this is the way it goes..

there are three navmain
the first one is for moblie phones
the second is for tablets and
the third part is for web ... correct?

If you mean for the css files so here it is:
responsive.css // is loaded on every page except the popup_image and popup_image_additional pages and
contain site-wide selectors that control the responsive HTML elements.
responsive_default.css // is loaded on by default where a mobile or tablet UA is NOT detected.
responsive_mobile.css // is loaded on mobile devices where a mobile UA is detected, it replaces the 'responsive_default.css' file.
responsive_tablet.css // is loaded on tablet devices where a tablet UA is detected, it replaces the 'responsive_default.css' file.

no ,,, i understand css files.. I already changed them.. I made the pink line on my header pink from dark grey... and smaller.. and I made the box title smaller also and purple.

i just want to ADD contact us in my header on the pink line...
i am in the tpl_header.php under the commons file.. the answer is there somewhere I am taking it apart using the blue fish editor program..

Quote:

---

Originally Posted by noppie

no ,,, i understand css files.. I already changed them.. I made the pink line on my header pink from dark grey... and smaller.. and I made the box title smaller also and purple.

i just want to ADD contact us in my header on the pink line...
i am in the tpl_header.php under the commons file.. the answer is there somewhere I am taking it apart using the blue fish editor program..

---

Line 128 - 133 in includes/templates/YOUR_RESPONSIVE_TEMPLATE/common/tpl_header.php:

PHP Code:

---

<?php  } else { ?>
<div id="navMain">
  <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>

---

add this line:
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>

like this:

PHP Code:

---

<?php  } else { ?>
<div id="navMain">
  <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>

---

The contact us link will now show on desktop. It should already be in the 'responsive' mobile and tablet menu through /templates/tpl_modules_mobile_menu.php loading through the "menu" i class="fafa...

thank you so much.. I figured it out on my own but thank you so much.. if someone else needs it is here now. and I have a hard time explaining things. thank you again.

I do not by any means mean to change topics on a thread, but it is responsive classic related. Please move it if necessary.

When I did the upgrade to my cart from 1.5.5e to f, the way in which my logo displayed went from what it is supposed to be to displaying very small.

This is what I did:

I went into the file located a "/includes/templates/responsive_classic/common/tpl_header.php ". I removed from line 167 “, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT”. This allowed the logo to actually display correctly (the correct size) again.

My main question:

Is this actually the most correct way to address the logo size or is this basically incorrect and there is a more correct way to do this?

Many thanks in advance for your time and answer.

Quote:

---

Originally Posted by amart79196

I do not by any means mean to change topics on a thread, but it is responsive classic related. Please move it if necessary.

When I did the upgrade to my cart from 1.5.5e to f, the way in which my logo displayed went from what it is supposed to be to displaying very small.

This is what I did:

I went into the file located a "/includes/templates/responsive_classic/common/tpl_header.php ". I removed from line 167 “, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT”. This allowed the logo to actually display correctly (the correct size) again.

My main question:

Is this actually the most correct way to address the logo size or is this basically incorrect and there is a more correct way to do this?

Many thanks in advance for your time and answer.

---

It's for exactly these kinds of upgrade-issues that Clone a Template was created. I'd suggest downloading that plugin to make a clone of the responsive_classic template that you can customize for your site's use.

That way, when the next Zen-Cart version is released, an upgrade won't overwrite any changes (like above) that you've made.

BTW, rather than removing those definitions from the header-image's display, you can make a template-specific copy of /includes/languages/english/header.php (copying to /includes/languages/english/YOUR_TEMPLATE/header.php) and then edit those two constants to reflect the size of your header-image.

Yep, those two items were added to 155f to fix a long-time problem with the logo not properly responding to the size set forth in the header.

Would it then be safe to say that if I was to put back what I took out of the file in "tpl_header.php" and make an adjustment instead to the "header.php" file, would that be a "more correct" way of resizing the logo size?

Any time you can avoid munging core files and simply change a setting in a file, that's the better way to go.

I hate to sound stupid, but, what file would you be considering a core file? Sorry, a bit new here.

Technically not core in this case but, core is generally considered any file that is not able to be easily overridden by the override system. For instance, the tpl_header.php file that you changed is an override of the Template Default version. In order to override the responsive_classic version, you would need to clone responsive_classic to something like MY_TEMPLATE. Then, when an upgrade is done, you don't lose any changes you made to the files as you have them in your personalized override template.

lat9 has an excellent chart that shows where you can use overrides to protect changes from overwrite on upgrade. Any time you can avoid changing a file by changing a setting, it's a good thing. Take a look at the chart and see if it makes a little more sense.

Hope i'm not off subject but with my 1.5.5 I have an issue. when I click on a category from the category list I get a 404 page even though the category is populated with products

You need to answer the posting tips and we can be of more help but, 404 generally means something is missing. Any debug files in your /logs directory?

I want to change the background ..see attached

Attachment 17683

When I make changes to stylesheet_colors.css file, changes dont reflect in the website. Where I am doing it wrong?

Usman

Quote:

---

Originally Posted by mani

I want to change the background ..see attached

Attachment 17683

When I make changes to stylesheet_colors.css file, changes dont reflect in the website. Where I am doing it wrong?

Usman

---

You could add this to your .css:
#mainWrapper {background-image: url(../images/YOUR_IMAGE.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}

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

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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/

Quote:

---

Originally Posted by 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 ...

Quote:

---

Originally Posted by 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?

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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

HTML Code:

---

.centred {text-align:center;}

---

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

HTML Code:

---

<div id="logo">

---

To be

HTML Code:

---

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

Quote:

---

Originally Posted by 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:

Attachment 17745

But in vertical position it is squeezed:

Attachment 17746

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.

Quote:

---

Originally Posted by 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:

Attachment 17747

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?

Quote:

---

Originally Posted by idtags

So, say I have mouse on Line 1:

Attachment 17747

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!