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

You apparently have several things munged up. The space you see should be the product description and the black button should be saying More Info.

Things are all out of sequence from the original. As requested in the posting tips, how is your template different from the standard and what mods have you installed?

Quote:

---

Originally Posted by dbltoe

You apparently have several things munged up. The space you see should be the product description and the black button should be saying More Info.

Things are all out of sequence from the original. As requested in the posting tips, how is your template different from the standard and what mods have you installed?

---

Thank you for such a rapid reply. Yes, I have decided to "change" things up a little, like with what the button use to say/show as well as, removing the product info to only show if they click the new button however, other than that, I thought there would be a way to shorten the space between the products now that the description was no longer on that first page.

If you need to see the coding from that page, please feel free to ask me and I will do my best to add it here.

Quote:

---

Originally Posted by Scentuous Aromas

Yes, I have decided to "change" things up a little, like with what the button use to say/show as well as, removing the product info to only show if they click the new button however, other than that, I thought there would be a way to shorten the space between the products now that the description was no longer on that first page.

---

It might just be a good idea to take a look at what the SEs are going to be looking for on your site.

Is it the pretty pictures? No, the SEs are blind and can only see the alt tag.

Is it the site's layout and color scheme? Again, they are blind and only look for poor code or missing data.

Is it the number of products or the link to them? Not really, although they have changed algorithms on user friendly URLs simply because they are over-used.

Is it whether or not you are mobile-friendly? Soon to be the first item looked at for consideration of an e-commerce site.

Currently first (and only becoming second to a responsive template) is content.

You can have everything on your site perfectly meet or exceed all the SEs requirements and it will drastically change for the worse within minutes of your deleting or deferring content about your site or a category/product.

Can you imagine a clothing store with a huge curtain stretching across the store just inside the entrance. No one would know for sure what items were carried. Even with a few pictures on the curtain, you couldn't properly advertise what items are behind the curtain. In your case, I'd rethink the curtain and let the customer see as much of the store as possible. That's what draws them inside once they arrive at your store.

Granted, some will want to quickly get to a product. The "quick trip" is already enabled. However, for the customers that want info (and the SEs) we want to get that to them ASAP.

v1.5.6b PHP7.1 TEST FOLDER

I have finally taken the step to start using the responsive_classic template

I have just installed 1.5.6b into a test folder for updating a site via the rebuild method - I am working my way through the aesthetics of the template (albeit I do struggle with .css in stylesheets) but my biggest problem at present is products Column layout - in configuration/product_listing >>> product listing - layout style I have selected columns but products still appear in rows. In one thread in here I noticed that Column Layout Grid should be installed to achieve columns - just want to check to see if this is the case in 1.5.6b (and that it didn't just apply to 1.5.5)

Also not sure if that configuration has been brought across from the v1.5.5f database using Westminster_New which has Column Grid Layout integral in it ??

cheers,
Mike

p.s. in trying to install the plugin I continually got SQL errors so wondered if it was now integral in the template? (will post errors in the appropriate thread if the plugin does indeed need to be installed)

Quote:

---

Originally Posted by shags38

v1.5.6b PHP7.1 TEST FOLDER

I have finally taken the step to start using the responsive_classic template

I have just installed 1.5.6b into a test folder for updating a site via the rebuild method - I am working my way through the aesthetics of the template (albeit I do struggle with .css in stylesheets) but my biggest problem at present is products Column layout - in configuration/product_listing >>> product listing - layout style I have selected columns but products still appear in rows. In one thread in here I noticed that Column Layout Grid should be installed to achieve columns - just want to check to see if this is the case in 1.5.6b (and that it didn't just apply to 1.5.5)

Also not sure if that configuration has been brought across from the v1.5.5f database using Westminster_New which has Column Grid Layout integral in it ??

cheers,
Mike

p.s. in trying to install the plugin I continually got SQL errors so wondered if it was now integral in the template? (will post errors in the appropriate thread if the plugin does indeed need to be installed)

---

OK ...UPDATE ... Columns are now showing - it seems the SQL uploads from the Column Grid Layout did in fact upload (after logging out and logging back in) in spite of this warning I received;

Quote:

---

WARNING: An Error occurred, please refresh the page and try again.If you were entering information, press the BACK button in your browser and re-check the information you had entered to be sure you left no blank fields.

---

I have some layout issues I am working through and if I cannot solve them I will post again.

cheers,
Mike

Only one issue I need help with please - how to align the images in the columns with the title text, prices etc in the columns (centered?) and have the category description text be the same as the home page width? see images -
image 1 is of home page showing page canister & contents of page canister at full width
image 2 is of a category page and alignments are out (page canister width is ok)

cheers,
Mike

Attachment 18476Attachment 18477

Never mind, we figured it out. Thanks for trying to help.

Quote:

---

Originally Posted by shags38

Only one issue I need help with please - how to align the images in the columns with the title text, prices etc in the columns (centered?) and have the category description text be the same as the home page width? see images -
image 1 is of home page showing page canister & contents of page canister at full width
image 2 is of a category page and alignments are out (page canister width is ok)

cheers,
Mike

Attachment 18476Attachment 18477

---

So I managed to sort these things out .... kind of ....

1.5.6b PHP 7.3

REVIEWS are problematical, in my view that is, so I would like some help please.

So as not to double post here is a post within a thread that highlights the issue(s) - I would appreciate it if someone who knows this template could take a look ..
Thread here >> https://www.zen-cart.com/showthread....=1#post1358591
Specific Post here >>> https://www.zen-cart.com/showthread....89#post1358589

Thank you in advance.

cheers,
Mike

I was just wondering if there is any way to change the colors on the responsive template on 1.56a? I have read the posts and nothing seems to really explain how I would do this? I thought by doing it in the stylesheet colors.css that would take care of it, but no matter what I do they won't change. I really didn't want to have to change templates because I already have add ons installed for this template. Any advice would be greatly appreciated.

Quote:

---

Originally Posted by kdevita

I was just wondering if there is any way to change the colors on the responsive template on 1.56a? I have read the posts and nothing seems to really explain how I would do this? I thought by doing it in the stylesheet colors.css that would take care of it, but no matter what I do they won't change. I really didn't want to have to change templates because I already have add ons installed for this template. Any advice would be greatly appreciated.

---

Part of your problem might be a glitch in the files for 1.5.6a. It has been replaced with 1.5.6b for a reason. Lots of little bugs.

As to the responsive_classic, I suggest getting two mods to create a new template as the second step (first being the quick move to 1.5.6b). Color Change and Clone a Template mods allow you to change the way the colors are done and, then, clone the result to a template with your name on it.

Along the way, you will want to make sure the stylesheets are set to the proper permission and know that just changing something in the web toolkit part of a browser will not make the change permanent. File permissions (other than the configure.php files) should be 644 while folders may depend on your system. Generally 755 for folders.

v1.5.6b PHP 7.3 www.dazzlersharmonynecklace.com

Hello - I need some assistance please - I'm having problems with the way my mobile pages render (see images below) - large 'whitespace' area to the left of all pages - home page scrolls right as well as down, other pages do not scroll right, all content is bunched to one side. Left side boxes are activated, none to the right - no sideboxes are showing.

Have changed line 55 in stylesheet.css to .onerow-fluid{width:90% !important;margin:auto;} [was 75%] - changing it back to 75% doesn't change anything.

So not sure what to do now - any help will be appreciated.

cheers,
Mike

home page 1
Attachment 18525

home page 2 scrolled towards right
Attachment 18526

category page
Attachment 18527

same category page scrolled down
Attachment 18528

All sorted - thanks for responses.

Hello

Mobile phone side left pop-up window classification, I hope the default is to directly display the first-level classification, how to modify the code.
As the screenshot below, how to modify the code

Attachment 18552

Quote:

---

Originally Posted by kdevita

I was just wondering if there is any way to change the colors on the responsive template on 1.56a? I have read the posts and nothing seems to really explain how I would do this? I thought by doing it in the stylesheet colors.css that would take care of it, but no matter what I do they won't change. I really didn't want to have to change templates because I already have add ons installed for this template. Any advice would be greatly appreciated.

---

There is a separate stylesheet with all of the template colors, includes/templates/respnosive_classic/css/stylesheet_colors.css. My guess is that you are not clearing your browser cache or refreshing the page. Possibly you are not editing the correct stylesheet.

Thanks,

Anne

This theme is very good, but the product detail page image is not friendly.
Product master map and detail map display method is not conducive to website operation.
I found a few old plugins, but they are only suitable for desktop webpages, not for mobile phones and tablets.
Is there any plugin that can solve this problem? Can beautify the display of the main picture and detail map of the product, while supporting the computer, mobile and tablet.

Attachment 18569

hello
I use responsive_sheffield_blue with zencart and I am very happy with the 2.
just a question.
Is the last version of responsive_sheffield_blue (version 2 - 2015) compatible with the last version of Zencart 1.5.6c.
best regards and thank's for your work

Probably would need some massaging to update code. You could get a better answer in the thread for the template. https://www.zen-cart.com/showthread....Sheffield+Blue

Hello, I am using the latest 1.5.6c version. Responsive classic template I intend to alter. I added cloned template associating it with my second language which is Hebrew (right to left)
Attachment 18657
Right to left language alignment renders good when it comes to desktop view. (I created a file ...css/hebrew_stylesheet.css). However when you switch language in mobile or tablet view you need your left header menu slideout to be on another side of screen. Basically all the header elements to be placed vise versa where they suppose to be so as not to render the way you see on screenshots while the in english side everything works properly.
Attachment 18658
Attachment 18659
I would really appreciate your advise.
Here is live view http://ingars.org/index.php?main_page=index

@Ingar, the styling that controls how that mobile-menu is displayed is /css/jquery.mmenu.all.css, working on conjunction with the responsive_default.css, responsive_mobile.css and responsive_tablet.css files (in the same directory).

Hi:
I have a vanilla 1.5.6c test site and have a problem with the checkout shipping page layout ( Step 2 of 3 ) in Chrome. The order totals are down the middle of the page. ( Vertical not horizontal )

The page renders fine in Firefox and Edge.

I would appreciate any help.

My site is https://poolcuesexpress.com/156ctest

Thanks

yoursite.com/includes/templates/responsive_classic/css/stylesheet.css

on line 65, comment out (or remove) the min-width:0

Code:

---

fieldset{border:0;padding:0.01em 0 0 0;padding-bottom:20px;padding-top:20px;margin:0;/* min-width:0; */margin-bottom:20px;}

---

Thank you.

That got it half way across the page, and horizontal. Any way to get it to match the rest of the page layout?

Closest you can come without taking apart the page code is.....

Stylesheet.css lines to be changed as follows

35 -- /*float:right;*/
231 -- /*width:5.5em;*/

includes/languages/english/checkout_payment.php

Code:

---

Line #16 : define('TEXT_SELECTED_BILLING_DESTINATION', 'Your billing address is shown to the left. The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.');

---

to

Code:

---

Line #16 : define('TEXT_SELECTED_BILLING_DESTINATION', 'Your billing address is shown above. The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.');

---

BTW, you have both the stylesheet_colors.css AND stylesheet_colors_split.css active. With the use of stylesheet_colors_split.css, stylesheet_colors.css should be renamed to something like stylesheet_colors.dth or either removed. Having both those files there will drive you crazy trying to figure out which one is doing the color. Right now, you don't readily see that as both are set to the default colors.

Thanks for your quick reply.

I tried those changes.

I ended up with the following:

In stylesheet.css

Line 59 - commented out display: inline;

Line 231 - commented out width: 5.5em;

Line 65 - reinstalled the min-width: 0;

That seems to get it to display correctly in all 3 browsers. I don't know if removing the display: inline; will affect anything else.

Let me know what you think.

The line 59 change affects at least the main page. Not sure about the others

I tried looking through the thread for a solution but didn't find anything.... I noticed that the "Your Total" portion on page Step 2 of 3 - Payment Information is all crammed together into a thin column while the "Discount coupon" and the "Payment method" are fine.

Code:

---

<h2 id="checkoutPaymentHeadingAddress">Billing Address:</h2>

<div id="checkoutBillto" class="floatingBox back">
<div class="buttonRow forward"><a href="https://my website.com/index.php?main_page=checkout_payment_address"><span class="cssButton normal_button button  button_change_address" onmouseover="this.className='cssButtonHover normal_button button  button_change_address button_change_addressHover'" onmouseout="this.className='cssButton normal_button button  button_change_address'">&nbsp;Change Address&nbsp;</span></a></div>
<address>Milly Hummer<br /> 984 Glass Ave<br /> Glascow, PA    97764<br /> United States</address>
</div>


<div class="floatingBox important forward">Your billing address is shown to the left. The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.</div>
<br class="clearBoth" />


<fieldset id="checkoutOrderTotals">
<legend id="checkoutPaymentHeadingTotal">Your Total</legend>
<div id="otsubtotal">
    <div class="totalBox larger forward">$39.60</div>
    <div class="lineTitle larger forward">Sub-Total:</div>
</div>
<br class="clearBoth" />
<div id="otshipping">
    <div class="totalBox larger forward">$0.00</div>
    <div class="lineTitle larger forward">Shipping Option</div>
</div>
<br class="clearBoth" />
<div id="ottotal">
    <div class="totalBox larger forward">$39.60</div>
    <div class="lineTitle larger forward">Total:</div>
</div>
<br class="clearBoth" />
</fieldset>

---

Thank you,

Shrimp-Gumbo

It's Sunday again.:P

After further review, I like the /*display:inline;*/ method on line 59 the best. While it does effect every form, select, and input; I don't see any significant harm throughout the site.

Left and Right boxes are set up at 140px.... When I make the screen small to phone view it looks almost right but the dollar amounts are not showing in the correct spots.

Quote:

---

Originally Posted by shrimp-gumbo-mmmhhh

Left and Right boxes are set up at 140px.... When I make the screen small to phone view it looks almost right but the dollar amounts are not showing in the correct spots.

---

The sideboxes should not be showing in mobile or tablets in portrait mode. They are set to only show when the screen width is at a certain point.

That's why the responsive_classic has the four separate stylesheets for responsive.

This is the original responsive_template version 1.0 from v1.5.6a it seems like someone would have noticed this issue a long time ago.... is there a newer version out? Thank you!

I gave the side box information because someone previously mentioned something about an issue that sounded similiar but they were told to change the sidebox to a number divisible by 10..... my are so I cannot make that change to get it working.

Once again my problem is that the "Order Total" is sitting between the "billing address" and the billing address message as a very long column going down almost a page. But when I shrink the page it goes to the spot where I would expect it to but the order amounts are in front of the title headings.

Thank you!

Quote:

---

Originally Posted by shrimp-gumbo-mmmhhh

I tried looking through the thread for a solution but didn't find anything.... I noticed that the "Your Total" portion on page Step 2 of 3 - Payment Information is all crammed together into a thin column

---

https://github.com/zencart/zencart/pull/2856

Thank you Scott! Simple <br> fix LOL! Thank you!

Quote:

---

Originally Posted by swguy

https://github.com/zencart/zencart/pull/2856

---

Good fix for desktop. Still needs work for mobile/tablet.

Quote:

---

Originally Posted by dbltoe

Good fix for desktop. Still needs work for mobile/tablet.

---

Didn't see any issue there.

Sort of nit-picking.

Text for billing says "shown to left" when it's above in mobile.

Text for coupon code says "in the box next to" when it's below in mobile.

I'm in the process of upgrading from 1.5.5 to 1.5.6 and getting to grips with the responsive_classic template and am just looking for some clarification.
I understand what the responsive mobile and tablet css files are for, but the responsive_default.css has me bemused as it is only triggered for desktop and yet it also has section within it media sections for Mobile & Tablet?

Can anyone explain why this is the case please ?

Cheers
Brinley

That's like trying to explain why you bought a different car than your neighbor.

Seriously, there are so many variations of screen size regardless of mobile or tablet.

Perhaps the author felt four doors were better than having to crawl into the back seat.:P

It's too much compressing of stylesheets that led us to develop a color change mod.

As you are starting new, I would suggest that you clone the responsive_classic and add the color mod from my sig's second line. It will help in getting the colors you want for your site.

Quote:

---

Originally Posted by Brinley

I'm in the process of upgrading from 1.5.5 to 1.5.6 and getting to grips with the responsive_classic template and am just looking for some clarification.
I understand what the responsive mobile and tablet css files are for, but the responsive_default.css has me bemused as it is only triggered for desktop and yet it also has section within it media sections for Mobile & Tablet?

Can anyone explain why this is the case please ?

Cheers
Brinley

---

I'm pretty sure the author created responsive default CSS so that your site was still responsive and appeared correctly on mobile and tablet devices if mobile detect didn't detect that your customer was using a mobile or tablet device.

It also made it easy for people to create a responsive template using the response of default CSS and adding those changes to the mobile or tablet specific CSS for when hey mobile or tablet device was detected.

Just my opinion not sure what the author was thinking.

Thanks for the responses.

I have cloned the template and will look at the colour (color) mod - then will take a look to see if I can combine the stylesheets as it looks like there is quite a bit of duplication. Time for a little more research.

Cheers
Brinley

Found the CSS read me for the Responsive_classic stylesheets that explains whats what - its located in the css folder within the responsive-classic template

Hope this helps someone else:

Cheers
Brinley

--------------------------------------------------------------------------------------------------------------------

These CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

stylesheet*.css // are always loaded and at least ONE should contain site-wide properties.
language_stylesheet.css // changes to ALL pages, when that language is used
index_home.css // specifically affects the home page only
page_name.css // changes to one page, ie: index.php?main_page=page_name
language_page_name.css // changes to one page, when that language is used
c_??_??.css // changes to all info pages in a category
language_c_??_??.css // changes to all info pages in a category, when that language is used
c_??_??_children.css // changes for all children of the specified parent. Also supports a language prefix.
m_??.css // changes to a manufacturer's listing page
language_m_??.css // changes to a manufacturer's listing page, when that language is used
p_??.css // changes to a product's info page
language_p_??.css // changes to a product's info page, when that language is used
print*.css // printer-friendly global usage site-wide changes for printing-only
page##.css // EZ-Page -- css specific to a numbered EZ-page ... ie: page21.css would be
for EZ-Page number 21 ... ie: for the URL index.php?main_page=page&id=21

These CSS files are sent to the browser after the above files:

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.

The 'stylesheet.css' is expected to load first and should contain the bulk of your CSS selectors. Each file loaded
takes priority over previously loaded file(s). To save loading time, only new selectors or selectors whose properties
you wish to change should be in the optional CSS files. You can have different overrides for the same page, in
different languages, because the two would never be called at the same time.

If someone selected the French language on your site, the 'french_stylesheet.css' would also be loaded. It should
only contain the site-wide changes you want to make to 'stylesheet.css'. For example, change a 'background-image'
for your French customers.

If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want
different 'background-image' & 'background-color' on each of 'page_x' pages. Possibly you do not want a
border around '.plainBox' most of the time, but on a couple of pages you do... and on one of those pages you
want it in black and the other in red.

Possibly you created a NEW tag and did a <span class="newtag"> in your Privacy Statement. It is defined in only one
CSS file, 'german_privacy.css' as '.newtag { text-transform: uppercase }' Because, in Germany, that phrase must be
in all CAPS, but not in other countries.

Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible,
DON'T HACK the core code. Use your CSS files to do the work for you. When the style coding has been removed from
the ZenCart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and
finally learn about CSS... your site will still be up and running.

Additional information is contained in the Zen Cart wiki.

Adapted from ideas presented by
Juxi Zoza
03/15/05

-- Responsive CSS Files --

The 'responsive.css' should NOT be altered, it contains specific selectors that calculate how your site will resize
as the browser window resizes and displays the correct width percentage for smaller browser windows.

The 'responsive_default.css' is the default CSS file that will contain all the sitewide selectors that need
manipulation to display correctly at different browser widths, included are (4) standand CSS media breakpoints:

@media (min-width:0px) and (max-width:480px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
under 480px wide ( mobile devices ).
}

@media (min-width:481px) and (max-width:767px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
larger than 481px wide but under 767px wide ( tablet devices ).
}

@media (min-width:768px) and (max-width:1500px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
larger than 768px wide but under 1500px wide { average desktop }.
}

@media (min-width:1500px) and (max-width:1800px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
larger than 1500px wide but under 1800px wide ( wide-screen desktop ).
}

An easy example using the 'responsive_default.css' media breakpoints, lets say you want to hide the banner images
on browser windows under 480px, simply add the banners selector to the appropriate media query like so:

@media (min-width:0px) and (max-width:480px) {
.banners { display:none; }
}

Now all your banner images are hidden on browser windows under 480px, adding CSS selector manipulations so that
content displays correctly across all broweser widths can get pretty hefty depending on how customized your template
is, so thats where the device specific 'responsive_mobile.css' and 'responsive_tablet.css' come in.

The 'responsive_mobile.css' and 'responsive_tablet.css' are CSS files that will contain all the sitewide selectors
that need manipulation to display correctly on specific devices and are only loaded if a browsers UA is detected,
very similar to the 'responsive_default.css' file but device specific and only contains device specific CSS media
breakpoints to save loading time.

In most cases you should only have to copy the selectors added to the CSS media breakpoints from
the 'responsive_default.css' file to the correct device specific 'responsive_??.css' file.

All the CSS selector manipulation changes made to the 'responsive_default.css' for media breakpoints for browser
windows under 480px wide ( mobile devices ) should be copied over to the 'responsive_mobile.css' file.

And all the CSS selector manipulation changes made to the 'responsive_default.css' for media breakpoints for
browser windows larger than 481px wide but under 767px wide ( tablet devices ) should be copied over to
the 'responsive_tablet.css' file.

The 'responsive_mobile.css' and 'responsive_tablet.css' files use different CSS media breakpoints:

@media only screen and (orientation:landscape) { }
@media only screen and (orientation:portrait) { }

In most cases CSS media breakpoints copied from the 'responsive_default.css' will suffice on both orientations but
in some circumstances you may have to add an extra (margin) to an selectors HTML element in (orientation:landscape)
but not in (orientation:portrait), so they are there for those rare occurrences.

Ok! I think I have a general handle on how the Stylesheets are configured for the responsive classic template but there are a few things that I still find confusing.

Firstly why is the mobile section within the responsive_default not the same as the Responsive_mobile.css? And the same for the Tablet section and responsive_tablet.css?

Also - I am still new to responsive design but I was under the impression you build for Mobile and then add onto it the Desktop and Tablet details which seems logical to me. So can someone explain the benefits of having it structured using stylesheet.css, responsive.css, responsive_default.css, responsive_mobile.css and responsive_tablet.css (I understand the bloating issue for mobile but in my opinion combining mobile into the stylesheet would create the same size file.)

I really do appreciate all the work that has gone into the responsive_classic template but am just looking for some clarification.

Cheers
Brinley

I just upgraded to 1.5.6c

The invoices and packing slip all include the header and logo. How do I get rid of that?

You can find those files in YOUR_ADMIN/invoice.php and YOUR_ADMIN/packingslip.php
These files do not use the template overwrite system.

This looks to be the code you want to remove:

HTML Code:

---

<table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td class="pageHeading"><?php echo nl2br(STORE_NAME_ADDRESS); ?></td>
        <td class="pageHeading" align="right"><?php echo zen_image(DIR_WS_IMAGES . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT); ?></td>
      </tr>
    </table>

---

and likely you want to remove the line too:

HTML Code:

---

<tr>
        <td colspan="2"><?php echo zen_draw_separator(); ?></td>
      </tr>

---

That worked! Thanks!

Hi, Question on specs here.
ZC 1.5.6c, PHP 7.3.10, responsive classic.

Silly me, I had posted in the wrong thread previously:
https://www.zen-cart.com/showthread....27#post1363327

While testing, my partner noticed that when checking out an order, in the initial main_page=shopping_cart screen, there appears to be a drop-down box to change address. I'd never had a separate address before, but she does, and now the issue has come up.
In Chrome, this is simple drop-down, no title or anything, and it confused her.

If one continues by pressing the "Checkout" button and continues to Step 1 of 3 (main_page=checkout_shipping ) there is an explicit "Change Address" button in the style matching the rest of the page.

So I wonder, is the drop-down seen in the shopping cart page a bug? I can try to style it somehow to match the style seen on Step 1 of 3, or simply remove the logic that puts in this code when (I assume) an address book for a customer has more than one address in it.

Any advice or comments most appreciated, I fully understand this is a free (and very useful and appreciated) template, and time is money, etc.
------
I managed to figure this out, not the greatest solution perhaps, but it certainly works for me. Turns out the select address from pulldown section was mixed up horizontally with the currently set address display, so I had to separate them as well as style them properly, as follows.

includes/templates/gernotshop/templates/tpl_modules_shipping_estimator.php

PHP Code:

---

<?php
    // only display addresses if more than 1
      if ($addresses->RecordCount() > 1){
?>
<label class="bold back inputLabel" for="seAddressPulldown"><?php echo CART_SHIPPING_METHOD_ADDRESS; ?></label>
<?php echo zen_draw_pull_down_menu('address_id', $addresses_array, $selected_address, 'onchange="return shipincart_submit();" id="seAddressPulldown"'); ?>
<?php
      }
?>
<br class="clearBoth" />

---

I also found I had to put the first name, last name and street address into the addresses array in my override shipping_estimator.php module file in order to help tell the various addresses apart.

Hope that helps someone.

Hi all,
ZC 1.5.6c with built-in responsive classic, overridden as recommended.
URL: https://www.proteawines.jp/shop/
I've found that I would like to have some sideboxes in single column layout, but cannot figure out the correct approach.

First, the reasons:

For small mobile screens I still want to have the information (and possible extra information) sidebox visible above the footer, rather than only available through the off-screen pull-down/out menu. This is partly for clarity and partly to satisfy regulations that certain links should be available on each page. These sideboxes are in the lower col150 div (below the main col670 div and above the footer), and this entire div is hidden in small mobile screen CSS.

Additionally, I want to have the language selection sidebox available in single column as well, it does not seem to be visible anywhere by default, not even in the pull-down menu. Ideally I would like it at the top of the page. This sidebox is in the upper col150 div (above the main col670 div), and this entire div is hidden in small mobile screen CSS.

So, how to go about this?

I tried to set the sideboxes themselves to unhidden in responsive.css and responsive_default.css, and added the languages sidebox to the list there too. This would work I assume, except for the issue that the containing divs (with class col150) are hidden, so everything inside them too is hidden.

I am happy if I can at least get the languages sidebox into the pull-down menu, but this too I cannot figure out yet how best to do this.

I wonder what approach should be taken to make sideboxes visible that are inside the col150 id? Can I control this using only CSS, or would I need to add some logic to the PHP template files to make a different containing div (e.g., a class col670 one) under certain circumstances?

Obviously I will look further on my own, as well as checking this thread in more detail (Google searches did not help in that regard) but I haven't been able, through inspection, to find any example of including a sidebox in single column mobile mode using this default template.

Any advice or comments most welcome.

After looking at the CSS and template code, and searching more on the forums, I found mention of a plugin that puts languages and currency in the header:
https://www.zen-cart.com/downloads.php?do=file&id=30
Support thread:
https://www.zen-cart.com/showthread....inks-in-Header

Based on that, and my own suspicions, I guess the simplest way forward is to create new divs with id's, write these into the templates/<CUSTOM>/common/tpl_{header,footer}.php as appropriate using logic to only write them when mobile and/or tablet mode is detected, and then control their display with responsive_default.css (make hidden by default), and responsive_{mobile,table}.css (make visible here).

Whether I can merely include the language sidebox there remains to be seen, but I guess not if it contains mention of divs which will be hidden in mobile and/or tablet mode. In that case, I can either change the sidebox code to be more flexible, or simply write the relevant language code into the above header/footer templates.

I could also of course install the plugin mentioned, and use that, if it proves to be a better overall solution.

Hello,
Please advise:
I am trying to reduce spacing between lines: at this site see image below

Attachment 18756

I am using "Inspect" option and change

.wrapperAttribsOptions {margin: 20px 0;} to .wrapperAttribsOptions {margin: -15px 0;}

Attachment 18757

It resolves situation for mobile phone (Attachment 18758)

but destroys formation of Desktop Display: Attachment 18759

I guess there should be separate ccs files for desktop and mobile, but they are not presented in Inspect elements.

What is appropriate direction to solve this?

Check your responsive_classic clone's /css directory. You should see responsive_mobile.css and responsive_tablet.css.

I'm guessing that the change you identified should be put into both the portrait and landscape portions of each of those stylesheets.

Quote:

---

Originally Posted by lat9

Check your responsive_classic clone's /css directory. You should see responsive_mobile.css and responsive_tablet.css.

I'm guessing that the change you identified should be put into both the portrait and landscape portions of each of those stylesheets.

---

It sounds logical, thank you for quick reply.
But than it should be shown in Inspect Element screen files which are responsible for the formatting. Shouldn't it?

Or I misunderstand how Inspect Element works?

Are you saying that .wrapperAttribsOptions {margin: -15px 0;} has to be copied in respective areas of responsive_mobile.css and responsive_tablet.css.?

That's what I'm suggesting, i.e. I think that should work.

As an alternative, you might use the responsive_default.css as the changes are needed more on screen width and not necessarily on screen orientation.

You'll find the responsive_default.css starts with

Code:

---

@media (min-width:0px) and (max-width:480px){

---

then

Code:

---

@media (min-width:481px) and (max-width:767px){

---

then

Code:

---

@media (min-width:768px) and (max-width:1500px) {

---

then

Code:

---

@media (min-width:1500px) and (max-width:1800px) {

---

and finally

Code:

---

@media (min-width:1500px) {

---

Just determine the screen width where you want the change and place it in the proper section.

Also, you might want to consider percentages instead of a fixed width to change the setting.

For instance, let's say a margin is set to 30 px for an item on a screen width of 1500 px. If we were to change that margin to 2%, would it look the same on a 980px screen? It would now be 20 px versus 30px. The advantage is, if you have two side by side divs, setting their width to 50% ensures they will be equal regardless of screen width or orientation.

I hope this doesn't "muddle the puddle", but it's another option to address your situation. Percentages make it easier for a template to be responsive.

Hi All,

I was just checking the mobile version of our web site and have found that the drop-down menu is not working (the 3 blue bars top-left of the screen). I admit to not having checked this for a while so do not know when it stopped, although I recently updraded to 1.5.6c from b and also re-upgraded the database due to a couple of issues. As an addition to the above, eveything below the main header section (i.e. the editable Main Page) is offset to the right-hand side of the screen. The PC version of the site is running perfectly. Any suggestions as to where to look please?

I am using the in-built Responsive Classic template
Zen Version 1.5.6c
My SQL 5.6.44
PHP 7.2.20
www.dracocrafts.co.uk

Michael

Hi Guys , A few questions

I want to remove "units in Stock" . I tried Admin->Catalog->Product Types->Product General->Edit Layout ... "Show Quantity in Stock" and setting it to False. But this hasn't worked. Can I edit in source somewhere ?

Also I tried changed image sizes in the admin with out luck . Can I edit it in source somewhere . For [New Products For January] , [Product Listings] and [New Products].

Thanks in advance !

Quote:

---

Originally Posted by Mikeondraco

Hi All,

I was just checking the mobile version of our web site and have found that the drop-down menu is not working (the 3 blue bars top-left of the screen). I admit to not having checked this for a while so do not know when it stopped, although I recently updraded to 1.5.6c from b and also re-upgraded the database due to a couple of issues. As an addition to the above, eveything below the main header section (i.e. the editable Main Page) is offset to the right-hand side of the screen. The PC version of the site is running perfectly. Any suggestions as to where to look please?

I am using the in-built Responsive Classic template
Zen Version 1.5.6c
My SQL 5.6.44
PHP 7.2.20
www.dracocrafts.co.uk

Michael

---

I guess no suggestions on this then?

Michael

Quote:

---

Originally Posted by Mikeondraco

I guess no suggestions on this then?

Michael

---

On first glance it is working (loading for display) then being overwritten. Likely a java conflict.

Quote:

---

Originally Posted by Hasher

Hi Guys , A few questions

I want to remove "units in Stock" . I tried Admin->Catalog->Product Types->Product General->Edit Layout ... "Show Quantity in Stock" and setting it to False. But this hasn't worked. Can I edit in source somewhere ?

Also I tried changed image sizes in the admin with out luck . Can I edit it in source somewhere . For [New Products For January] , [Product Listings] and [New Products].

Thanks in advance !

---

If that switch isn't working, someone has removed it or there's a connection to it missing in your template files. It works in a bone stock 1.56c and 1.55f on all pages tested.

Also...

New Products Listing Code:
if (PRODUCT_NEW_LIST_QUANTITY != '0' and zen_get_show_product_switch($products_new->fields['products_id'], 'quantity')) {
if ($products_new->fields['products_quantity'] <= 0) {
$display_products_quantity = TEXT_OUT_OF_STOCK . str_repeat('<br />', substr(PRODUCT_NEW_LIST_QUANTITY, 3, 1));
} else {
$display_products_quantity = '<b>' . TEXT_PRODUCTS_QUANTITY . '</b>' . $products_new->fields['products_quantity'] . str_repeat('<br />', substr(PRODUCT_NEW_LIST_QUANTITY, 3, 1));
}
} else {
$display_products_quantity = '';
}

This code is looking at the settings in Admin > Configuration > New Listing > Display Product Quantity AND the switch position in product type layout mentioned above.

Quote:

---

Originally Posted by twitchtoo

On first glance it is working (loading for display) then being overwritten. Likely a java conflict.

---

Thank you for your response. Any suggestions as to where I should look?

I have also noticed that it works correctly on my Samsung tablet in landscape mode. I guess that should point me somewhere...

Michael

Quote:

---

Originally Posted by Mikeondraco

Thank you for your response. Any suggestions as to where I should look?

I have also noticed that it works correctly on my Samsung tablet in landscape mode. I guess that should point me somewhere...

Michael

---

When I use the developer tools in FireFox (right click - inspect element) there is a list of 'failed java' and you can hover over the three bars in mobile view to see what else is running and interfering - live.

McAfee, geopLugin and jQuery may not be playing nice together from what I can see.

Quote:

---

Originally Posted by twitchtoo

When I use the developer tools in FireFox (right click - inspect element) there is a list of 'failed java' and you can hover over the three bars in mobile view to see what else is running and interfering - live.

McAfee, geopLugin and jQuery may not be playing nice together from what I can see.

---

Thanks again, gives me something to go on.

Michael

Ok, sinking here somewhat. I have disabled geopLugin and McAfee, but still have the same problem. Not sure I understand what I am seeing in Firefox developer mode, somewaht beyond me to be honest. I still do not understand why the main page content is shifted to the right-hand side of the screen, which is obviously part of the ame problem I assume. Only happening on mobile screens and some tablet screens.

Michael

Quote:

---

Originally Posted by Mikeondraco

Ok, sinking here somewhat. I have disabled geopLugin and McAfee, but still have the same problem. Not sure I understand what I am seeing in Firefox developer mode, somewaht beyond me to be honest. I still do not understand why the main page content is shifted to the right-hand side of the screen, which is obviously part of the ame problem I assume. Only happening on mobile screens and some tablet screens.

Michael

---

Your jquery.mmenu.min.all.js and jquery.mmenu.fixedelements.min.js are not loading.

The FireFox developer Debugger tab has the view you're looking for.

I compared with 1.55f - http://germanwholesaleparts.ca/ and a bone stock 1.56c install using the responsive template I pm'd you the link.

Something has knocked those out or they aren't available in the java folder for the browser to load.

Quote:

---

Originally Posted by twitchtoo

Your jquery.mmenu.min.all.js and jquery.mmenu.fixedelements.min.js are not loading.

The FireFox developer Debugger tab has the view you're looking for.

I compared with 1.55f - http://germanwholesaleparts.ca/ and a bone stock 1.56c install using the responsive template I pm'd you the link.

Something has knocked those out or they aren't available in the java folder for the browser to load.

---

Ok many many thanks, I will look into this later and try and find what happened to them.

Michael

Hi wanting to know to I can change the template to have the logo.gif at the top of the main page go all the way across the page. I have a lot of dead space there which is unattractive . I have attached a picture to show what I mean.

Thanks in Advance !!Attachment 18779

Quote:

---

Originally Posted by Mikeondraco

Ok many many thanks, I will look into this later and try and find what happened to them.

Michael

---

Morning,

as I said in my PM, the script files were there, but I have re-uploaded them just in case, but the problem still remains.

I have compared both the bone stock site and ours and the coding for the menu is completely different. Ours has, amongst a lot of other differences in the generic code,

<div class="header Fixed">

and no calls to the 2 scripts you mentioned, whereas in the bone stock site the code is:

<div id="mm-blocker" class="mm-slideout"></div>

with calls to the 2 scripts.

I am presuming that this is where my issue lies, but have no idea how it got changed, or how/where to fix it...

Michael

Quote:

---

Originally Posted by Hasher

Hi wanting to know to I can change the template to have the logo.gif at the top of the main page go all the way across the page. I have a lot of dead space there which is unattractive . I have attached a picture to show what I mean.

Thanks in Advance !!Attachment 18779

---

You can edit #logo in your template stylesheet.css to start float:none; margin:1em 0;

And check #logoWrapper formargin:0;padding:0; width: 100%;


Then you may need to change the #tagline to prevent it bumping into the logo font-size:135%;text-align:center;margin:1em 0;


Peek at the CSS at http://germanwholesaleparts.ca/ for white background full width

Or

if you want to fill it with an image- http://matchboxgarden.ca/

Quote:

---

Originally Posted by Mikeondraco

Morning,

as I said in my PM, the script files were there, but I have re-uploaded them just in case, but the problem still remains.

I have compared both the bone stock site and ours and the coding for the menu is completely different. Ours has, amongst a lot of other differences in the generic code,

<div class="header Fixed">

and no calls to the 2 scripts you mentioned, whereas in the bone stock site the code is:

<div id="mm-blocker" class="mm-slideout"></div>

with calls to the 2 scripts.

I am presuming that this is where my issue lies, but have no idea how it got changed, or how/where to fix it...

Michael

---

includes/templates/YOUR_TEMPLATE/common/tpl_header.php

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">

<!--bof navigation display-->
<div id="navMainWrapper" class="group onerow-fluid">
<?php
if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else {
//
}
?>

Quote:

---

Originally Posted by twitchtoo

includes/templates/YOUR_TEMPLATE/common/tpl_header.php

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">

<!--bof navigation display-->
<div id="navMainWrapper" class="group onerow-fluid">
<?php
if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else {
//
}
?>

---

Yup, that's what I have, what should I have? Sory if I am appearing a bit thick here, but I probably am ...

Michael

Quote:

---

Originally Posted by Hasher

Hi wanting to know to I can change the template to have the logo.gif at the top of the main page go all the way across the page. I have a lot of dead space there which is unattractive . I have attached a picture to show what I mean.

Thanks in Advance !!Attachment 18779

---

You're welcome to look at the actions of the logo on https://haredo.com and see if those stylesheet changes are what you are looking for.

We've taken the logo and put it in the Main_Page.

The columns are at the top until the screen width drops to the logo.gif width and, then, drop down to allow the logo to take over the top of the display.

This is one of many options you have. We could be more helpful had you given us some answers to the posting tips.

Quote:

---

Originally Posted by twitchtoo

includes/templates/YOUR_TEMPLATE/common/tpl_header.php

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">

<!--bof navigation display-->
<div id="navMainWrapper" class="group onerow-fluid">
<?php
if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else {
//
}
?>

---

Well I have continued my search for the problem, but with no result. I am unable to locate how or what has actually changed, think it may be time to completely rebuild a new site - probably about time anyway...

Michael

Michael, from the looks of the code, I'd say it's your includes/templates/responsive_classic/common/tpl_main_page.php

Can you please post the contents of that file here? Don't forget to wrap it with code tags.

Quote:

---

Originally Posted by balihr

Michael, from the looks of the code, I'd say it's your includes/templates/responsive_classic/common/tpl_main_page.php

Can you please post the contents of that file here? Don't forget to wrap it with code tags.

---

As requested ... Michael

Code:

---

<?php
/**
 * Common Template - tpl_main_page.php
 *
 * Governs the overall layout of an entire page<br />
 * Normally consisting of a header, left side column. center column. right side column and footer<br />
 * For customizing, this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * - make a directory /templates/my_template/privacy<br />
 * - copy /templates/templates_defaults/common/tpl_main_page.php to /templates/my_template/privacy/tpl_main_page.php<br />
 * <br />
 * to override the global settings and turn off columns un-comment the lines below for the correct column to turn off<br />
 * to turn off the header and/or footer uncomment the lines below<br />
 * Note: header can be disabled in the tpl_header.php<br />
 * Note: footer can be disabled in the tpl_footer.php<br />
 * <br />
 * $flag_disable_header = true;<br />
 * $flag_disable_left = true;<br />
 * $flag_disable_right = true;<br />
 * $flag_disable_footer = true;<br />
 * <br />
 * // example to not display right column on main page when Always Show Categories is OFF<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 * <br />
 * example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_main_page.php 7085 2007-09-22 04:56:31Z ajeh $
 */

// the following IF statement can be duplicated/modified as needed to set additional flags
  if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
    $flag_disable_right = true;
  }


  $header_template = 'tpl_header.php';
  $footer_template = 'tpl_footer.php';
  $left_column_file = 'column_left.php';
  $right_column_file = 'column_right.php';
  $body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<?php
  if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_HEADER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_header = true;
  }
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>
<?php
if (COLUMN_LEFT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_LEFT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_left
  $flag_disable_left = true;
}
if (!isset($flag_disable_left) || !$flag_disable_left) {
?>

 <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<?php
 /**
  * prepares and displays left column sideboxes
  *
  */
?>
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td>
<?php
}
?>
    <td valign="top">
<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

<?php
  if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<!-- bof messagestack alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<?php if ($messageStack->size('main') > 0) echo $messageStack->output('main'); ?>
<!-- eof messagestack alerts -->

<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>

<?php
  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?></td>

<?php
//if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' && $_SESSION['customers_authorization'] != 0)) {
if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_right
  $flag_disable_right = true;
}
if (!isset($flag_disable_right) || !$flag_disable_right) {
?>
<td id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">
<?php
 /**
  * prepares and displays right column sideboxes
  *
  */
?>
<div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div></td>
<?php
}
?>
  </tr>
</table>

<?php
 /**
  * prepares and displays footer output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_FOOTER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_footer = true;
  }
  require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');
?>

</div>
<!--bof- parse time display -->
<?php
  if (DISPLAY_PAGE_PARSE_TIME == 'true') {
?>
<div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>
<?php
  }
?>
<!--eof- parse time display -->
<!--bof- banner #6 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof- banner #6 display -->

<!--BOF cookie control script-->
<?php if (COOKIE_CONTROL_STATUS == 'true'){?>
<?php require($template->get_template_dir('tpl_cookie_control.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_cookie_control.php');?>
<?php } ?>
<!--EOF cookie control script-->

</body>

---

Your scripts are NOT loading, side by side comparison:

http://twitchtoo.com/images/zen_foru...ot_loading.JPG


Either the java initiation is being blocked - in conflict and stopped by the browser or the scripts are not in the correct location or not pointing at the actual location.

Quote:

---

Originally Posted by twitchtoo

Your scripts are NOT loading, side by side comparison:

http://twitchtoo.com/images/zen_foru...ot_loading.JPG


Either the java initiation is being blocked - in conflict and stopped by the browser or the scripts are not in the correct location or not pointing at the actual location.

---

I am not sure how to answer that any differenty to before. If it is browser problem then it is happening on every differing device and browser I have tried, so I doubt that. The scripts are in the correct location, as they always have been and as to pointing at the actual location, I do not understand what that means.

The only things changed in the last 12 months have been a change from .com to .co.uk when I upgraded to GoDday cPanel to benefit from the latest version of PHP, although the .com points to the .co.uk and an update to Zen 1.5.6c wth a re-upgrade of the database as I had a couple of other nigglng issues that that solved.

Michael

Have you checked the domain paths in your configure files are all pointing in the correct locations?

Quote:

---

Originally Posted by twitchtoo

Have you checked the domain paths in your configure files are all pointing in the correct locations?

---

Not recently, but I will check now

Michael

Quote:

---

Originally Posted by Mikeondraco

Not recently, but I will check now

Michael

---

All correct as of the change to .co.uk

Michael

This is loading as javascript first:


<script type="text/javascript">//<![CDATA[ // cookieControl version 5.1 (2012-06-19, RA, leigh)...
Prior to your other scripts.

To see them, right click your homepage and view source - then compare with the same method on http://windowsofinfluence.com/ if you like it remains stock 1.56c


You may have other conflicts.

Quote:

---

Originally Posted by twitchtoo

This is loading as javascript first:


<script type="text/javascript">//<=!=[=C=D=A=T=A=[ // cookieControl version 5.1 (2012-06-19, RA, leigh)...
Prior to your other scripts.

To see them, right click your homepage and view source - then compare with the same method on http://windowsofinfluence.com/ if you like it remains stock 1.56c


You may have other conflicts.

---

Was really hopeful then, completely disabled Cookie Control, but still the same.

Michael

Michael,
you're using Zen Cart 1.5.6c and the contents of the file I asked you to post is from an older version, thus the problems. You should use the file from your Zen Cart version, not an obsolete one.

Here's what you need in that file (I added the Cookie Consent code so you can just copy/paste):

Code:

---

<?php
/**
 * Common Template - tpl_main_page.php
 *
 * Governs the overall layout of an entire page<br />
 * Normally consisting of a header, left side column. center column. right side column and footer<br />
 * For customizing, this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * - make a directory /templates/my_template/privacy<br />
 * - copy /templates/templates_defaults/common/tpl_main_page.php to /templates/my_template/privacy/tpl_main_page.php<br />
 * <br />
 * to override the global settings and turn off columns un-comment the lines below for the correct column to turn off<br />
 * to turn off the header and/or footer uncomment the lines below<br />
 * Note: header can be disabled in the tpl_header.php<br />
 * Note: footer can be disabled in the tpl_footer.php<br />
 * <br />
 * $flag_disable_header = true;<br />
 * $flag_disable_left = true;<br />
 * $flag_disable_right = true;<br />
 * $flag_disable_footer = true;<br />
 * <br />
 * // example to not display right column on main page when Always Show Categories is OFF<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 * <br />
 * example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2018 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: rbarbour zcadditions.com Tue May 8 00:42:18 2018 -0400 Modified in v1.5.6 $
 */

/** bof DESIGNER TESTING ONLY: */
// $messageStack->add('header', 'this is a sample error message', 'error');
// $messageStack->add('header', 'this is a sample caution message', 'caution');
// $messageStack->add('header', 'this is a sample success message', 'success');
// $messageStack->add('main', 'this is a sample error message', 'error');
// $messageStack->add('main', 'this is a sample caution message', 'caution');
// $messageStack->add('main', 'this is a sample success message', 'success');
/** eof DESIGNER TESTING ONLY */



// the following IF statement can be duplicated/modified as needed to set additional flags
if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
  $flag_disable_right = true;
}

// ZCAdditions.com, Responsive Template Default (BOF-addition 1 of 1)
if ($flag_disable_right or COLUMN_RIGHT_STATUS == '0') {
  $box_width_right = preg_replace('/[^0-9]/', '', '0');
  $box_width_right_new = '';
} else {
  $box_width_right = COLUMN_WIDTH_RIGHT;
  $box_width_right = preg_replace('/[^0-9]/', '', $box_width_right);
  $box_width_right_new = 'col' . $box_width_right;
}

if ($flag_disable_left or COLUMN_LEFT_STATUS == '0') {
  $box_width_left = preg_replace('/[^0-9]/', '', '0');
  $box_width_left_new = '';
} else {
  $box_width_left = COLUMN_WIDTH_LEFT;
  $box_width_left = preg_replace('/[^0-9]/', '', $box_width_left);
  $box_width_left_new = 'col' . $box_width_left;
}

$side_columns_total = $box_width_left + $box_width_right;
$center_column = '970'; // This value should not be altered
$center_column_width = $center_column - $side_columns_total;
// ZCAdditions.com, Responsive Template Default (EOF-addition 1 of 1)


$header_template = 'tpl_header.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

<?php
 if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
  echo '<div id="page">';
 } else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
  echo '<div id="page">';
  } else {
//
  }
?>

<?php
  if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_HEADER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_header = true;
  }
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>

<div id="contentMainWrapper">

<?php
if (COLUMN_LEFT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_LEFT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_left
  $flag_disable_left = true;
}
if (!$flag_disable_left) {
?>
  <div class="<?php echo $box_width_left_new; ?>">
<?php
 /**
  * prepares and displays left column sideboxes
  *
  */
  require(DIR_WS_MODULES . zen_get_module_directory('column_left.php'));
?>
  </div>

<?php
}
?>

  <div class="<?php echo 'col' . $center_column_width; ?>">

<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

<?php
  if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
    if ($banner->RecordCount() > 0) {
?>
    <div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<!-- bof upload alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<!-- eof upload alerts -->

<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code);
?>

<?php
  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>
    <div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
  </div>


<?php
//if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' && $_SESSION['customers_authorization'] != 0)) {
if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_right
  $flag_disable_right = true;
}
if (!isset($flag_disable_right) || !$flag_disable_right) {
?>
  <div class="<?php echo $box_width_right_new; ?>">
<?php
 /**
  * prepares and displays right column sideboxes
  *
  */
 require(DIR_WS_MODULES . zen_get_module_directory('column_right.php'));
?>
  </div>

<?php
}
?>

</div>

<?php
 /**
  * prepares and displays footer output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_FOOTER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_footer = true;
  }
  require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');
?>

</div>
<!--bof- parse time display -->
<?php
  if (DISPLAY_PAGE_PARSE_TIME == 'true') {
?>
<div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>
<?php
  }
?>
<!--eof- parse time display -->
<!--bof- banner #6 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof- banner #6 display -->

<!--BOF cookie control script-->
<?php if (COOKIE_CONTROL_STATUS == 'true'){?>
    <?php require($template->get_template_dir('tpl_cookie_control.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_cookie_control.php');?>
<?php } ?>
<!--EOF cookie control script-->

 <?php
if  ($detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
  echo '</div>';
} else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
  echo '</div>';
} else {
  //
}
?>


<?php if  ($detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
  require($template->get_template_dir('tpl_modules_mobile_menu.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_mobile_menu.php');
} else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
  require($template->get_template_dir('tpl_modules_mobile_menu.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_mobile_menu.php');
} else if ( $_SESSION['layoutType'] == 'full' ) {
  //
} else {
  //
}
?>

<?php /* add any end-of-page code via an observer class */
  $zco_notifier->notify('NOTIFY_FOOTER_END', $current_page);
?>
</body>

---

Thank You So Much! That has solved it. For reference, and for anyone else who may suffer this, that outdated file is the one that comes with Cookie Control 1.4, which obviousy has not been updated for 1.5.6.

Michael :D

Quote:

---

Originally Posted by Mikeondraco

Thank You So Much! That has solved it. For reference, and for anyone else who may suffer this, that outdated file is the one that comes with Cookie Control 1.4, which obviousy has not been updated for 1.5.6.

Michael :D

---

Re-reading that I realise my own error, the supplied file is not for uploading, but for use as an example of the coding to be added to the existing file - DOH!

Hi

Have recently updated to 156c.

Am using my old templates live for now, but upon testing (vanilla) classic responsive template and on a mobile device, on the Checkout Shipping Default screen the menu appears to be broken - ie after the footer at the bottom of the page I get the menu contents, eg -


Home
Contact Us
Log Out
My Account
Shopping Cart
Checkout
Categories


Is this just me ?

Quote:

---

Originally Posted by royaldave

Hi

Have recently updated to 156c.

Am using my old templates live for now, but upon testing (vanilla) classic responsive template and on a mobile device, on the Checkout Shipping Default screen the menu appears to be broken - ie after the footer at the bottom of the page I get the menu contents, eg -


Home
Contact Us
Log Out
My Account
Shopping Cart
Checkout
Categories


Is this just me ?

---

OK, I'm using Order Delivery Date plugin and I've worked out its the presence of jscript_a-mootools.js that's causing this break....

index.php?main_page=index&layoutType=tablet

The above link opens the display effect on what device

I would love to use font-awesome icons in place of some text on CSS buttons. I tried searching this thread and the whole forum but am having trouble finding any mention of this so apologies if this has been discussed somewhere.

I thought maybe I could simply replace the button text in the language file with the html code for the FA icon, but when I tried that, for some reason, some kind of default looking image replaced my CSS button.

Has anyone tried this successfully? Thanks for any advice or pointers!

This is an interesting idea, but I'm not certain icons convey information as effectively as text labels. Perhaps "in addition to?"

Also have you mapped the buttons to icons to see where the gaps are?

Quote:

---

Originally Posted by jiji2018

index.php?main_page=index&layoutType=tablet

The above link opens the display effect on what device

---

You probably want to read this thread ( CSS3 Buttons [support thread]), and use this addon by lat9

Another question about this template that I haven't found in searching. How are the menu items determined that appear on the mobile menu (the one that pops up when you click/press the "hamburger" icon in mobile view)? I'm trying to customize this for a client because there are a lot of pages that they don't want in that pop-up menu. Is this set in Define Pages? EZ-pages? somewhere else? I can't find any setting that seems to effect this.

Thanks in advance!

Quote:

---

Originally Posted by earmsby

I would love to use font-awesome icons in place of some text on CSS buttons. I tried searching this thread and the whole forum but am having trouble finding any mention of this so apologies if this has been discussed somewhere.

I thought maybe I could simply replace the button text in the language file with the html code for the FA icon, but when I tried that, for some reason, some kind of default looking image replaced my CSS button.

Has anyone tried this successfully? Thanks for any advice or pointers!

---

I do this on my site buttons.. if the css button is inside of a form you use one format and if its outside you use another format...CSS buttons are the alt tag and not the image..
includes/languages/english/YOUR_TEMPLATE/button_names.php
inside of forms would be..

Code:

---

define('BUTTON_UNSUBSCRIBE', ' Unsubscribe');
define('BUTTON_UPDATE_ALT', ' Update');
define('IMAGE_DELETE', ' Remove');
define('BUTTON_WRITE_REVIEW_ALT', '  Write Review');
define('BUTTON_CANCEL_REVIEW_ALT', '  Cancel');
define('ICON_UPDATE_ALT', '  Update Cart');
define('BUTTON_LOOKUP_ALT', ' Lookup');

---

outside of forms..

Code:

---

define('BUTTON_CREATE_ACCOUNT_ALT', '<i class="fa fa-user-plus"></i>  Sign Up');
define('BUTTON_LOG_OFF_ALT', '<i class="fa fa-star"></i>  Log Off');
define('BUTTON_ADD_ADDRESS_ALT', '<i class="fa fa-pencil-square-o"></i>  Add Address');
define('BUTTON_BACK_ALT', '<i class="fa fa-undo"></i> Back');
define('BUTTON_BUY_NOW_ALT', '<i class="fa fa-star"></i>  Buy Now');
define('BUTTON_CANCEL_ALT', '<i class="fa fa-star"></i>  Cancel');
define('BUTTON_CHANGE_ADDRESS_ALT', '<i class="fa fa-star"></i>  Change Address');

---

if the button is showing a default charter, then the wrong format was used.

Quote:

---

Originally Posted by earmsby

I would love to use font-awesome icons in place of some text on CSS buttons. I tried searching this thread and the whole forum but am having trouble finding any mention of this so apologies if this has been discussed somewhere.

I thought maybe I could simply replace the button text in the language file with the html code for the FA icon, but when I tried that, for some reason, some kind of default looking image replaced my CSS button.

Has anyone tried this successfully? Thanks for any advice or pointers!

---

It may be because of html_output.php files.

includes/functions/html_output.php line283

Code:

---

    if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters);

---

I changed this 30 to 40 and it works.

Quote:

---

Originally Posted by swguy

This is an interesting idea, but I'm not certain icons convey information as effectively as text labels. Perhaps "in addition to?"

Also have you mapped the buttons to icons to see where the gaps are?

---

Thanks for this. I take your point, but my feeling is that at this point, a button with a magnifying glass icon next to a field that says "search" is pretty much universally understood to mean "search" and takes up less space than the spelled out word (which is basically repeated as the placeholder text in the search field itself) in a mobile layout. For buttons that have more complex meanings, I wouldn't necessarily swap for FA icons.

I'm not entirely sure what you meant by "Also have you mapped the buttons to icons to see where the gaps are?" Could you expand on that?

Thanks!

Thanks for this. I will give it a try.

Quote:

---

Originally Posted by davewest

I do this on my site buttons.. if the css button is inside of a form you use one format and if its outside you use another format...CSS buttons are the alt tag and not the image..
includes/languages/english/YOUR_TEMPLATE/button_names.php
inside of forms would be..

Code:

---

define('BUTTON_UNSUBSCRIBE', ' Unsubscribe');
define('BUTTON_UPDATE_ALT', ' Update');
define('IMAGE_DELETE', ' Remove');
define('BUTTON_WRITE_REVIEW_ALT', '  Write Review');
define('BUTTON_CANCEL_REVIEW_ALT', '  Cancel');
define('ICON_UPDATE_ALT', '  Update Cart');
define('BUTTON_LOOKUP_ALT', ' Lookup');

---

---

Thanks for this. I've given it a try and it sort of works. I tried doing this:

PHP Code:

---

define('BUTTON_SEARCH_ALT', ' Search Now'); 


---

The button text says "search now" but the icon is just a square instead of a magnifying glass. The unicode for the icon I'm using is shown as f002 and I (perhaps mistakenly) thought I should add the "&#x" before that. Maybe the issue is that I'm including font-awesome library correctly in the header (although I do see FA icons in the mobile view).

Will do a little more experimenting and see if I can figure it out.

Quote:

---

Originally Posted by earmsby

Thanks for this. I've given it a try and it sort of works. I tried doing this:

PHP Code:

---

define('BUTTON_SEARCH_ALT', ' Search Now'); 


---

The button text says "search now" but the icon is just a square instead of a magnifying glass. The unicode for the icon I'm using is shown as f002 and I (perhaps mistakenly) thought I should add the "&#x" before that. Maybe the issue is that I'm including font-awesome library correctly in the header (although I do see FA icons in the mobile view).

Will do a little more experimenting and see if I can figure it out.

---

By bad... I assumed you understood the font.. &#xf002 is font awesome code and used instead of the html class

Code:

---

<i class="fa fa-search"></i>

---

I would suggest downloading the font list to follow along. The font/icons can be sized to your needs, font awesome doc's as a note, the magnifying icon doesn't mean search to me... I use 5 different ones and none is for searching... all has to do with size.. which is how I use it.

Code:

---

define('BUTTON_SEARCH_ALT', ' Search Now');

---

Try this CSS.
Change the class name if you want to apply to other buttons.

for Font Awesome 4

Code:

---

.button_search{font-family: "FontAwesome";}

---

or

Code:

---

.button_search{font-family: "Font Awesome 5 Free";}

---

https://fontawesome.com/how-to-use/o...seudo-elements

Quote:

---

Originally Posted by K1979

Code:

---

define('BUTTON_SEARCH_ALT', ' Search Now');

---

Try this CSS.
Change the class name if you want to apply to other buttons.

for Font Awesome 4

Code:

---

.button_search{font-family: "FontAwesome";}

---

or

Code:

---

.button_search{font-family: "Font Awesome 5 Free";}

---

---

OK... so, responsive classic is loading version 4.7.0 through CDN so font-family: "FontAwesome" would be correct. Version 5 has 4 font-family so locking yourself to the one may not workout. where as 4 only has the one. One thing I didn't ask, if this is a local install for development, and no local setup was done for font awesome, then font would not be available for testing. If the CDN is called or a local install, the font is available for use..

Quote:

---

Originally Posted by swguy

https://github.com/zencart/zencart/pull/2856

---

Thank you!

I'm back with another issue I'm trying to resolve. Lot's of things I like about this template but am finding customizing it to be surprisingly tricky due all the different stylesheets and ways that javascript changes elements. Anyway, on to my current question/problem:

I'm working on resizing a few things in the heading of the product listing (on the desktop view only at this stage). The button for "Add Selected to Cart" was much too big and extended off to the right beyond the right edge of the containing div (note: it goes off the right right when the screen is narrowed a bit. It might not do that if you have a bigger screen resolution but I am on a fairly small sized laptop). It has a lot of padding that seemed a bit extreme to me (30px right and left). I was easily able to add a new css rule to my custom css to decrease that.

But on hover, the button pops back up to the huge size. I can see that this is due to the css in stylesheet_css_buttons.css:

Code:

---

input.submit_button:hover {border:none !important;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}
input.cssButtonHover {border:none;cursor: pointer;border:none;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}


---

I don't want to completely change this across the board. I'd like to target just this particular button which is causing the problem. My understanding is that you can override an !important rule by creating another rule with !important and greater specificity. So I added a style:

Code:

---

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px; !important;
}

---

But when the page renders, my custom style is still overridden by the original rule in stylesheet_css_buttons.css. I've tried multiple different ways to target the button in the hover state and override the !important rule but nothing seems to work.

I checked that my custom stylesheet loads later than stylesheet_css_buttons.css in the header and it appears to do so. Been banging my head on this for quite a while now.

Here's a link to the page I'm describing: http://subitomusic.com/testing_estor...dex&cPath=1_13