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

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?

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!

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

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

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.

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

    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.

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.

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

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

earmsby:

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

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 ```
<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](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use)  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.

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

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

or

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

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

K1979:

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
> ```
.button_search{font-family: "FontAwesome";}

or

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

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:

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

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:

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

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_estore/index.php?main_page=index&cPath=1_13

earmsby:

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:

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

> 
> 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:
> ```
[B]input#submit1[/B].[B]cssButtonHover[/B].[B]button_add_selected[/B].[B]button_add_selectedHover[/B]{
    [B]padding[/B]: 5[B]px [/B]5[B]px[/B]; [B]!important[/B];
}

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_estore/index.php?main_page=index&cPath=1_13

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

This ";" causes a problem.

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

It will work.

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

And this might be OK.

If you use Google Chrome, DevTools will help you to find which CSS class you need to override.

I posted a reply but it doesn't seem to be updated, so I post again.

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

This ";" causes a problem.

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

It will work.

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

And it may be OK.

If you use Google Chrome, DEVtools will help you to find which css class you need to override.

K1979:

I posted a reply but it doesn't seem to be updated, so I post again.

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

> This ";" causes a problem.

Thank you! (Boy do I feel like an idiot - I should have spotted that issue)

FYI responsive has issues with hamburger not appearing in desktop chrome, ff, edge and IE while inspecting elements in responsive design mode.

Nobody ever notice this?