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

Quote:

---

Originally Posted by lat9

Find the following section in the template's /jscript/jscript_responsive_framework.php:

Code:

---

$('input#email-address').clone().attr('type','email').insertAfter('input#email-address').prev().remove();
$('input#searchHeader').clone().attr('type','search').insertAfter('input#searchHeader').prev().remove();
$('input#mailChimp').clone().attr('type','email').insertAfter('input#mailChimp').prev().remove();
$('input#login-email-address').clone().attr('type','email').insertAfter('input#login-email-address').prev().remove();
$('input#postcode').clone().attr('type','number').insertAfter('input#postcode').prev().remove();
$('input#telephone').clone().attr('type','tel').insertAfter('input#telephone').prev().remove();
$('input#dob').clone().attr('type','date').insertAfter('input#dob').prev().remove();
$('input#fax').clone().attr('type','tel').insertAfter('input#fax').prev().remove();

---

and comment the block out, adding the highlighted lines:

Code:

---

$('input#email-address').clone().attr('type','email').insertAfter('input#email-address').prev().remove();
$('input#searchHeader').clone().attr('type','search').insertAfter('input#searchHeader').prev().remove();
$('input#mailChimp').clone().attr('type','email').insertAfter('input#mailChimp').prev().remove();
$('input#login-email-address').clone().attr('type','email').insertAfter('input#login-email-address').prev().remove();
<?php
/* ----- Don't force postcode to all numbers -----
$('input#postcode').clone().attr('type','number').insertAfter('input#postcode').prev().remove();
*/
?>
$('input#telephone').clone().attr('type','tel').insertAfter('input#telephone').prev().remove();
$('input#dob').clone().attr('type','date').insertAfter('input#dob').prev().remove();
$('input#fax').clone().attr('type','tel').insertAfter('input#fax').prev().remove();

---

---

Thanks, the commenting out worked but the php bit crashed the site.
seems ok now

next time, I should refresh first:blush:

Quote:

---

Originally Posted by bottyz

Just a quick question...

Is there an easy way to remove the php device detect feature of this template? I find it an unnecessary addition, considering all devices I've tried it on work great with the desktop responsive css. Not sure if there are any benefits to having 3 sets of css stylesheets to edit.

I've had a look and can't seem to find where it is implemented and how to remove it. If someone could help, it would be much appreciated.

---

In html_header.php simply comment-out this section, to bypass the detection. I have not tested what ill side-effects this may cause to you. Use at your own risk:

Code:

---

// ZCAdditions.com, ZCA Responsive Template Default (BOF-addition 1 of 2)if (!class_exists('Mobile_Detect')) {
  include_once(DIR_WS_CLASSES . 'Mobile_Detect.php');
}
  $detect = new Mobile_Detect;
  $isMobile = $detect->isMobile();
  $isTablet = $detect->isTablet();
  if (!isset($layoutType)) $layoutType = ($isMobile ? ($isTablet ? 'tablet' : 'mobile') : 'default');
// ZCAdditions.com, ZCA Responsive Template Default (BOF-addition 1 of 2)

---

I am hoping someone can give me some guidance on setting my header (containing only the menu and search box, but not the logo) as fixed in desktop mode similar to the mobile phone and tablet (portrait) modes but without the blue menu button. I want the ability for users on the products page have access to the menu when they have scrolled down the page and the top menu is no longer visible.I have worked with stylesheet.css, responsive_mobile.css and responsive_tablet.css but am not having any luck and made a mess and thus gave up. My website which is work in progress is http://www.allmart.ca/store and would appreciate any help.

Thanks

Good Morning,
Thanks for a great new Template which is exactly what we were looking for to adapt for handheld devices.
I'm at the very early stages of setting up my cart and have come across a problem which seems to affect mobile versions of the site only (Have no way of trying the Tablet version as yet.
When a new customer trys to register the "Zip/Postcode" field entry refuses to accept alpha characters. It will only allow numerical entry which, of course, is no good AND if you do not fill in the Post/Zip code then you cannot register as a customer. Disaster!

This works as expected on a desktop browser and, if I switch my mobile to desktop mode but, still, this isn't good.

It might be something to do with my setup, I find the "Template Overide" system a little sensitive and, for a proportion of the entire first day of trying to set up some overides I had a blank page only...still don't know what was causing that but suspect it was not having the "common" folder copied across from responsive_classic to my own folder? It does not suggest this is necessary anywhere in the help files and tutorials but, thats a question for another day. For now, can anyone advise me on what couold be wrong?

My (not live) shop is found here:
www.shake-the-tree.com
and if you use a mobile device you will see that you cannot input your post/zip code.

Thanks for any help.

James

Quote:

---

Originally Posted by jpirie

Good Morning,
Thanks for a great new Template which is exactly what we were looking for to adapt for handheld devices.
I'm at the very early stages of setting up my cart and have come across a problem which seems to affect mobile versions of the site only (Have no way of trying the Tablet version as yet.
When a new customer trys to register the "Zip/Postcode" field entry refuses to accept alpha characters. It will only allow numerical entry which, of course, is no good AND if you do not fill in the Post/Zip code then you cannot register as a customer. Disaster!

This works as expected on a desktop browser and, if I switch my mobile to desktop mode but, still, this isn't good.

It might be something to do with my setup, I find the "Template Overide" system a little sensitive and, for a proportion of the entire first day of trying to set up some overides I had a blank page only...still don't know what was causing that but suspect it was not having the "common" folder copied across from responsive_classic to my own folder? It does not suggest this is necessary anywhere in the help files and tutorials but, thats a question for another day. For now, can anyone advise me on what couold be wrong?

My (not live) shop is found here:
www.shake-the-tree.com
and if you use a mobile device you will see that you cannot input your post/zip code.

Thanks for any help.

James

---

Please read back a few posts, and you will find your answer

I'm having a problem with this template that I can't seem to solve.
I can't give you a link because I haven't put it online yet.
The right sidebox is showing in the middle of the page and is not aligning to the top. The left sidebox is fine.
Also, how can I make the center column smaller as I think this may be the problem.
I confess that I'm not versed in css or php but did manage to set up a working website using the simple blue responsive template
www.spminiatures.com
Thanks for any help

Quote:

---

Originally Posted by spminis

I'm having a problem with this template that I can't seem to solve.
I can't give you a link because I haven't put it online yet.
The right sidebox is showing in the middle of the page and is not aligning to the top. The left sidebox is fine.
Also, how can I make the center column smaller as I think this may be the problem.
I confess that I'm not versed in css or php but did manage to set up a working website using the simple blue responsive template
www.spminiatures.com
Thanks for any help

---

You may have a "different" setting for the column widths (left, right, or both) that doesn't match the ones preset in the template. See if your width(s) match the ones preset in yoursiteDotCom/includes/templates/responsive_classic/css/responsive.css.

Hi,
Sorry for delay in responding.
I followed one of the Tutorials on the Zencart web pages.
My expectation would be that, if I wish to edit a part of the existing template, i.e. the responsive template, I would locate the fiel that I wish/need to edit, create a new folder in the same path as the original file with the name of my new template "custom" in the example I followed, edit the file and save it n my new folder. Then, my understanding is that this is an Overide page which will be used for the information I have changed after which all other information comes from the original template.
This hasn't been my expereince however and I find that, if I wish to use the Responsive Template I have to copy quite a lot of the original files from this template folder to my new template folder before it will work at all.
I think, eventually, I solved this particular blank page issue by copying ALL the info from the Responsive template folder to my new template folder and deleted the folders one at a time until the blank page re-appeared. I think it was the "common" folder that was required.
I suppose, at this point, that the instructions I followed were a little outdated but, it's also possible that I misread them.

Thanks for the response.

Onward to new problems now.

James

Quote:

---

Originally Posted by Design75

Please read back a few posts, and you will find your answer

---

I apologise for this...I honestly did search with every term I could think of to find an answer, I am aware of how annoying it is when people appear not to read previous comments but...in this instance I drew a blank with every search term I used...and I specifically searched this thread also :)
Anywau, I found it and fixed it and...well, I'm sure there will be other stuff.

Many thanks for your patience.

James

Quote:

---

Originally Posted by jpirie

Hi,
Sorry for delay in responding.
I followed one of the Tutorials on the Zencart web pages.
My expectation would be that, if I wish to edit a part of the existing template, i.e. the responsive template, I would locate the fiel that I wish/need to edit, create a new folder in the same path as the original file with the name of my new template "custom" in the example I followed, edit the file and save it n my new folder. Then, my understanding is that this is an Overide page which will be used for the information I have changed after which all other information comes from the original template.
This hasn't been my expereince however and I find that, if I wish to use the Responsive Template I have to copy quite a lot of the original files from this template folder to my new template folder before it will work at all.
I think, eventually, I solved this particular blank page issue by copying ALL the info from the Responsive template folder to my new template folder and deleted the folders one at a time until the blank page re-appeared. I think it was the "common" folder that was required.
I suppose, at this point, that the instructions I followed were a little outdated but, it's also possible that I misread them.

Thanks for the response.

Onward to new problems now.

James

---

Sorry people, forgot to quote what I was responding to...Can't edit the post so am replying with the quote that should have been...if you see what I mean ;)

-------Responding to this quote----------


When you receive that whitescreen, there's a myDEBUG*.log file created in your store's /logs folder that identifies the details of the issue.
See: http://www.zen-cart.com/content.php?124-blank-page

I'm not sure what you're referencing when you say "I have followed the instructions for customising my own template to the letter." ... which instructions are those?

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

Hi Anne

I really like the new responsive template, thank you. I would like to add some a-hover to the categories and info menu on left side of pc version and am a little confused about which style sheet and what element I should start with. Can you point me in the right direction?
Site is at http://orders.leinbachs.com/
Thanks in advance

Quote:

---

Originally Posted by dbltoe

You may have a "different" setting for the column widths (left, right, or both) that doesn't match the ones preset in the template. See if your width(s) match the ones preset in yoursiteDotCom/includes/templates/responsive_classic/css/responsive.css.

---

Thank you, that did the trick.
My next problem (I take 'em one at a time), is with the product listing pages. The top columns are ok (model #, price, etc are listed horizontally) but the product listings are listed vertically. The model #, description and price are listed under the image instead of across in a row under the headings.

Thanks again!
Carol

That is the productDetailList box that appears in five different template files. Found in the yoursiteDOTcom/includes/templates/yourTemplate/templates/something_info_display.php files.
You'll probably find it in the file between "bof productDetailsList" and "eof productDetailsList."
Adjust away. That's the beauty of open source.

Thank you for your prompt response. I will do that

Carol

if I want to use MobiZenCart by ultimate_zc do I have to delete all responsive files in Responsive Classic before installing MobiZenCart?

cheers,
Mike

Quote:

---

Originally Posted by shags38

if I want to use MobiZenCart by ultimate_zc do I have to delete all responsive files in Responsive Classic before installing MobiZenCart?

cheers,
Mike

---

Don't do that - it's a separate template.

I just upgraded to V. 1.5.5. Here is a very dum question: what is the responsive_classic template for? Is it for mobile compatible? Do I need to change the folder name to the responsive_**** to match my self-set template name?

Quote:

---

Originally Posted by lina0962

I just upgraded to V. 1.5.5. Here is a very dum question: what is the responsive_classic template for? Is it for mobile compatible?

---

responsive_classic is a mobile-friendly template. You can use it if you wish.
Or you can use your own template as long as it's been upgraded to be compatible with v155.

Quote:

---

Originally Posted by lina0962

Do I need to change the folder name to the responsive_**** to match my self-set template name?

---

You are welcome to make a copy of responsive_classic if you wish. Be mindful that there are several other places where override foldernames would need to be copied as well (such as in /includes/languages and subdirectories, and /includes/modules, etc)

The easiest method for retaining and modifying the responsive_classic is to use lat9s Clone a Template mod. Clone Responive_Classic to whatever name you want then, modify the new template whatever way you need. You will then have the Responsive_Classic as something to fall back on.
You might want to look at the link in my sig for a quick way to modify the template.

Hi All,
I am having a small issue with my meta tag titles on my individual products page. The titles appear on all my main pages, including my category pages but if a specific product is selected, it's pages title is blank. The meta tag keywords and description do appear on all pages including my individual product pages and have confirmed that the titles are not empty in my database. My website is http://allmart.ca/store, which is almost ready to go live.
Thanks in advance for any help.

@allmart, what additional customizations have you applied to your product pages? What you describe is not "standard" responsive_classic behavior.

Thanks for the very prompt reply. I have made a few change changes but mostly with css. I used Clone A Template, and just tried changing my template to the original without success. I have just noticed that when I select the larger image, the page does show the title.

Quote:

---

Originally Posted by allmart

Thanks for the very prompt reply. I have made a few change changes but mostly with css. I used Clone A Template, and just tried changing my template to the original without success. I have just noticed that when I select the larger image, the page does show the title.

---

I'm not sure what "without success" means, but I've cloned the responsive_classic template on a test-site and I don't experience your issue.

Sorry, without success meant that the title was blank for the individual product page.

Have you set product-specific meta-tags in the products' configuration or are you using the default Zen-Cart meta-tag handling?

lat9,

Sorry for wasting your time ... I thought I was getting good at this but just confirmed that I'm a DOPE. Had the Title Tag display set to NO.

Thanks for your help!!!

Quote:

---

Originally Posted by allmart

lat9,

Sorry for wasting your time ... I thought I was getting good at this but just confirmed that I'm a DOPE. Had the Title Tag display set to NO.

Thanks for your help!!!

---

It's never a waste of time! Thanks for reporting back what the issue was.

Hi,
I ma usinf 1.5.5.a
I am looking for a little change in the responsive classic template behaviour.
What I want to achieve is to create a if clause in the define_main_page.php that would change what shown in home when a tablet or smartphone is rotated 90°
Is it possible? Which would be the if clause?
Thanks for your help.
ciao from Italy
enzo

Quote:

---

Originally Posted by enzo-ita

Hi,
I ma usinf 1.5.5.a
I am looking for a little change in the responsive classic template behaviour.
What I want to achieve is to create a if clause in the define_main_page.php that would change what shown in home when a tablet or smartphone is rotated 90°
Is it possible? Which would be the if clause?
Thanks for your help.
ciao from Italy
enzo

---

You will need to create something like a define_main_pageL.php and a define_main_pageP.php for the differences when in mobile.
You would then need to modify both the responsive_mobile.css and responsive_tablet.css. There you can tell the system which define_main_page to display under which circumstance.

I am currently test Zen Cart 1.5.5a. It is a fresh installation. The template has not been changed.
As soon as the navigation display (page 1,2,3,...) in the product listing is shown, it overlaps with the "Add selected to cart"-button and the headline for the product list. The navigation block is also to be indented to the left.
I would like to remove the overlapping, but do not want to break the responsive design.
Attachment 16737

I am helping someone with their site. The FREE SHIPPING ON DOMESTIC ORDERS OVER $50 above main center column shows very scrunched and boxy when in mobile view. Is there any way we can resize this for just mobile view or even turn it off? They have this hard coded into tpl_header.php which works fine on desktop but not for mobile view. I removed the styles they had directly in the html for the header and moved it over to the stylesheets but the mobile end is giving us a real issue. This is a custom version of 1.5.5 responsive default template that the person did
http://gypsyrosalie.com

Quote:

---

Originally Posted by todoonada

I am currently test Zen Cart 1.5.5a. It is a fresh installation. The template has not been changed.
As soon as the navigation display (page 1,2,3,...) in the product listing is shown, it overlaps with the "Add selected to cart"-button and the headline for the product list. The navigation block is also to be indented to the left.
I would like to remove the overlapping, but do not want to break the responsive design.
Attachment 16737

---

You might want to first clone the responsive_classic with lat9's Clone a Template. Then you'll have a copy you can play with and one to fall back on.
Next, take a look at the demo at http://netzencommerce.com/index.php?...index&cPath=22. Check to see if this is a fix for you. If so, you can use the mod in my sig to accomplish that look. We incorporated several "adjustments" into the color changing Mod.

BTW, the current mod has the wrong color template for the instructions. Version 1.1a is available now at http://netzencommerce.com/downloads/...anges-1.1a.zip. New version submitted for Plugins and available soon.

Thank you! It looks fine now.

I'm using Zen-Cart 1.5.5 with the Responsive Classic template. I'm wondering if there's a slideshow that works with this template, as well as this version of Zen-Cart? Thank you. I suppose there's a discussion about this somewhere but I can't find it.

Quote:

---

Originally Posted by daffy

I'm using Zen-Cart 1.5.5 with the Responsive Classic template. I'm wondering if there's a slideshow that works with this template, as well as this version of Zen-Cart? Thank you. I suppose there's a discussion about this somewhere but I can't find it.

---

Sometimes the search function of this forum can be "finicky" to say the least. Try a google search for zen cart slideshow. Lots of hits.

clean install of ZC 1.55
installed addons: column layout grid 2.3.1, 155a color changes 1.1

new zencart user here, have been through the process of setting up store a couple times in the past few years but never committing and actually populating the store and using it. finally changing that. have the desktop views mostly taken care of and how I'd like them but having trouble sorting out what should be a really easy problem with the mobile layout.

as it is now when viewing the mobile layout it stretches to an obscene size of grey space to the side, and both the home / login header links overlap logo image, the top left slideout menu is also overlapped and hidden over the top of the logo image. somewhere in my css sheets changing colors the pull down menu color has also been made black - and thus invisible.

I've played around with web developer tools to view responsive views as well as a few android phones and no matter what I can not get anything to look / function better.

Ideally when the store is pulled up from a mobile store I'd like the following to on the very top:

[############main logo######################]
Left side mobile-menu slideout.######right side login / home
[ small editable introduction blurb#search box to search store ]
[#######default main product category listing#########]
[#############item 1 from category#############]
[#############item 2 from category#############]

I've tried searching for every combination of search terms I can think of 10 times over on the forums and have made zero progress on this. as of now i'd take anything so long as you can view the menu on mobile. as it is now people are generally stuck in the default category on front page (another small problem is where would I define the mobile menu text/link colors just for the mobile layout? (its highly unreadable)

http://headfirstrecords.com/store/

any/all help appreciated and I can follow directions with no worries.

riveraXVX,
It appears that you have fallen into what I call "the newbie trap". I'll explain my reasoning.
Zen Cart 1.5.5b is "ready to sell" right out of the box. One might not like the colors. I would prefer the add to cart button to appear after the description and don't think the logo should appear on mobile phones (usually so large that they throw the "good stuff" below the fold). But, one can load the cart, add products, and start selling almost immediately. Shipping and Payment adjustments are really all that's needed to sell.
The newbie trap rears it's ugly head when we decide that we need to "fix/adjust" the cart before selling. Simple adjustments morph into multiple changes into major revisions with still no cart ready to sell. Not only that, it often winds up with so many "workarounds" that it's almost impossible to recover from. Something that is controlled through the admin gets "fixed" in a file then turned off in the css,...
Looking at your stylesheets, there are few that you have not modified extensively. Although not listed in your post, you have some version of image handler installed that may be causing problems if it is not the current version.
You have errors associated with the images showing on the home page in that an extra class is added to the code. You can use W3C Validator to check those.
You've also overwritten the responsive_classic template with all your changes. It would have been better to use lat9's clone a template prior to making changes. You could clone the responsive_classic to headfirst and make you changes there.
It appears you are not up and selling elsewhere while you get this going. Here are my suggestions for having something online quickly:

1. Start by getting the original responsive_classic template back into the store.
2. Check the functionality of the store. Can you sell product from there? Do you still have errors on the home page with the images? Is Image Handler still creating a problem?
3. Fix any functionality that is not working.
4. If the functionality is working, go to https://www.zen-cart.com/downloads.php?do=file&id=2087 and download the clone mod. Create a clone of the responsive_classic. Call it something like headfirst.
5. Use the headfirst template to insert the 1.5.5 color changes mod. The latest changes are at https://www.zen-cart.com/downloads.php?do=file&id=2088.
6. Make page changes gradually and check ALL functionality before heading to something else.
7. If you run into problems, be sure to post in a thread that most closely fits where you were having the problem. If no thread exists, create a new one. Once you move away from the responsive_classic template, the questions are best answered elsewhere.

It looks to me like you took a shotgun and fired at a gnat. Time to regroup, rebuild the target, and forge on.

Quote:

---

Originally Posted by dbltoe

riveraXVX,
It appears that you have fallen into what I call "the newbie trap". I'll explain my reasoning.
Zen Cart 1.5.5b is "ready to sell" right out of the box. One might not like the colors. I would prefer the add to cart button to appear after the description and don't think the logo should appear on mobile phones (usually so large that they throw the "good stuff" below the fold). But, one can load the cart, add products, and start selling almost immediately. Shipping and Payment adjustments are really all that's needed to sell.
The newbie trap rears it's ugly head when we decide that we need to "fix/adjust" the cart before selling. Simple adjustments morph into multiple changes into major revisions with still no cart ready to sell. Not only that, it often winds up with so many "workarounds" that it's almost impossible to recover from. Something that is controlled through the admin gets "fixed" in a file then turned off in the css,...
Looking at your stylesheets, there are few that you have not modified extensively. Although not listed in your post, you have some version of image handler installed that may be causing problems if it is not the current version.
You have errors associated with the images showing on the home page in that an extra class is added to the code. You can use W3C Validator to check those.
You've also overwritten the responsive_classic template with all your changes. It would have been better to use lat9's clone a template prior to making changes. You could clone the responsive_classic to headfirst and make you changes there.
It appears you are not up and selling elsewhere while you get this going. Here are my suggestions for having something online quickly:

1. Start by getting the original responsive_classic template back into the store.
2. Check the functionality of the store. Can you sell product from there? Do you still have errors on the home page with the images? Is Image Handler still creating a problem?
3. Fix any functionality that is not working.
4. If the functionality is working, go to https://www.zen-cart.com/downloads.php?do=file&id=2087 and download the clone mod. Create a clone of the responsive_classic. Call it something like headfirst.
5. Use the headfirst template to insert the 1.5.5 color changes mod. The latest changes are at https://www.zen-cart.com/downloads.php?do=file&id=2088.
6. Make page changes gradually and check ALL functionality before heading to something else.
7. If you run into problems, be sure to post in a thread that most closely fits where you were having the problem. If no thread exists, create a new one. Once you move away from the responsive_classic template, the questions are best answered elsewhere.

It looks to me like you took a shotgun and fired at a gnat. Time to regroup, rebuild the target, and forge on.

---

I appreciate the steps, my previous clean install I used the lat9 clone mod and for some reason had difficulties working properly so ended up abandoning it all and starting over and worked straight off the classic template the next go around. I was able to work through most of my issues since my last post. but yeah I jumped the gun a....bit to say the least haha

I'll probably end up having to start back over another time to do it cleanly and properly in a way that updates won't ruin it ;x back to the drawing board!

The site I am working on was upgraded to 1.5.5. When trying to have the Home and Login Links not show in mobile view it also deletes it from the desktop. Any ideas how we can fix this issue? The other issue is also with mobile view. The search box in the mobile menu is showing up with the input box to the far right and the submit button centered underneath. We want the input box also centered. have tried reworking in the css but nothing seems to change it. I am sure it is something I am just simply missing.
Thanks for any help.
The site is located at http://gypsyrosalie.com

Quote:

---

Originally Posted by ravynw34

The site I am working on was upgraded to 1.5.5. When trying to have the Home and Login Links not show in mobile view it also deletes it from the desktop. Any ideas how we can fix this issue? The other issue is also with mobile view. The search box in the mobile menu is showing up with the input box to the far right and the submit button centered underneath. We want the input box also centered. have tried reworking in the css but nothing seems to change it. I am sure it is something I am just simply missing.
Thanks for any help.
The site is located at http://gypsyrosalie.com

---

In creating your custom template, you've gone too far. Don't know if you used the included responsive template and added css in strange places or what is causing the problems but you might want to look at my answer in post #238.
There are stylesheets that control responsive, responsive_default, mobile, and tablet as well as the stylesheet.css for the desktop. The responsive stylesheets (4 in all) control the look away from the desktop view. A browser like chrome or firefox with added developer tools will let you know which stylesheet needs to be "adjusted"

Hi dbltoe,
I actually didn't upgrade or customize the site. That is where the problem is coming into play. Not sure where the person who did the site prior was heading but its a mess behind the scenes. I will take a look at your reference post and see if I can come up with some temp fixes. I have already suggested starting a new template from scratch. My best guess is that they didn't know what they were doing when they customized the site. Things that should be in the responsive styles are not there. some are hard coded into the header, etc.
I absolutely appreciate your tips on this. Thanks a bunch.

Quote:

---

Originally Posted by webskipper

I want to add more contrast and just kill the pill buttons all together.

I like the buttons of the desktop site better.

---

It has been a while since you asked about this - but I had the same issue to which I have found a solution.

The display only affects the buttons that are using an input tag. Where as buttons utilising a span, render the css correctly.
Researching this, I found Apple have a built in function in safari to style the input button according to 'Apple standard'. :blink:

To fix this add the follow property to the stylesheet_css_buttons.css file in your css directory of your template.

Code:

---

input.submit_button { -webkit-appearance: none; }

---

Ok I must be really stupid and can't seem to find the answer.
I just created a new site using v1.5.5b
Using the classic template with "Custom" directories for changes working ok
When I try to create the "Custom" directory for the Responsive template nothing seems to work at all.
Is there documentation that explains how the custom changes works with Responsive?

Thanks in advance

Quote:

---

Originally Posted by munizjm

When I try to create the "Custom" directory for the Responsive template nothing seems to work at all.
Is there documentation that explains how the custom changes works with Responsive?

---

1.5.5b comes with three template options. Classic, Responsive_Classic, and Template_Default. My recommendation is that you add lat9s Clone a Template mod to your site, clone the Responsive_Classic to whatever name you want to use for your "Custom" template. Assign the new template to your site in the Tools menu. Then, use your new template to make changes to your site's look.

Thanks!

Is there documentation that explains how to make changes to the various areas of the responsive template?

I have turned off the Categories Box - Show Products New Link in Admin>Layout Settings
but it still shows up. Is there anywhere else that this might have a trigger?
All the others have turned off but the New Products is still there.

When I go to the "My Account" page and want to change an address, all fields already have the data from my former address in the text fields. The only exception is the drop down for the state (not country). It shows the default "Please make your selection".

I think the code for this can be found in includes/modules/pages/address_book_process/jscript_addr_pulldowns.php line 34 and 35 in Zen Cart v1.5.5b-11022016:
// if we had a value before reset, set it again
if (SelectedZone != "") theForm.elements["zone_id"].value = SelectedZone;

It seems this code is not executed because before, on line 32, PHP-code is called:
// build dynamic list of countries/zones for pulldown
<?php echo zen_js_zone_list('SelectedCountry', 'theForm', 'zone_id'); ?>

Does anyone have a fix for this?

I'm going bonkers. I can't show you the page because it's currently local.

I'm trying to get the responsive classic ver 1.5.5b to work. The main problem I'm having is on the product listing page. The heading looks good - Image, item, items #, price are horizontal but the products that are listed have the information vertically. The item, item #, price are listed UNDER the item rather than horizontally across the page. Truth be told, I'm finding the responsive coding to be much more complicated than the non responsive and I can't figure this out. When I change the template to classic, the listings line up correctly.
Please help. Thanks!

Quote:

---

Originally Posted by spminis

I'm going bonkers. I can't show you the page because it's currently local.

I'm trying to get the responsive classic ver 1.5.5b to work. The main problem I'm having is on the product listing page. The heading looks good - Image, item, items #, price are horizontal but the products that are listed have the information vertically. The item, item #, price are listed UNDER the item rather than horizontally across the page. Truth be told, I'm finding the responsive coding to be much more complicated than the non responsive and I can't figure this out. When I change the template to classic, the listings line up correctly.
Please help. Thanks!

---

I decided to upload the test site and this is the page that's giving me agita. The product info is not lining up with the table header
http://spminiatures.com/storetest/in...ex&cPath=41_47

Thanks

Hi Anne,

I am currently rebuilding our site using 1.5.5b and your built-in responsive template. Everything is going well, but I would like to change the font for the HEADER_SALES_TEXT tag (Draco Crafts Online). I have searched around a bit, but cannot find where to do this, although I dare say it is probably obvious.

I would be obliged if you can point me in the right direction please

Thanks ... Michael

www.dracocrafts.com/other_sites/dcnewshop/

If you use Chrome browser you can right-click on the area you are concerned about and "inspect" the code for that portion of the page. This helps me find the appropriate CSS that I need to change.

Looks to me as if the div ID for that line is named: tagline . You are looking for just "tagline" and not "taglineWrapper" . You can insert a font change on stylesheet.css , that's where I found "tagline"

Hope that helps.

Thank you, will take a look, pretty obvious really :cool:

Michael

I was building everything fine and all of a sudden it now appears as a mobile site on my desktop. Why would this occur?!?

westseedfarm daught calm

Hi All,

by default the Order Staus options are:

Pending [1]
Processing [2]
Delivered [3]
Update [4]

is it possible to change one, or add one, saying Shipped ? I have searched around but have mot found where the options are defined ?

Michael

Go to your admin/localization/order status... You can "insert" shipped. I found it much less confusing to my customers.

That simple !! lol - I was searching through all the files :blink:

Many thanks, less confusing for our customers too.

Michael

Quote:

---

Originally Posted by Mikeondraco

Hi All,

by default the Order Staus options are:

Pending [1]
Processing [2]
Delivered [3]
Update [4]

is it possible to change one, or add one, saying Shipped ? I have searched around but have mot found where the options are defined ?

Michael

---

Quote:

---

Originally Posted by VDecalS

Go to your admin/localization/order status... You can "insert" shipped. I found it much less confusing to my customers.

---

Quote:

---

Originally Posted by Mikeondraco

That simple !! lol - I was searching through all the files :blink:

Many thanks, less confusing for our customers too.

Michael

---

... and the "Delivered" status essentially means "Shipped". If you're not using "Delivered" for some other purpose, you could just rename it, instead of adding additional statuses.

(There's a meaning to the numerical values assigned too, such as "Update" actually means "Update and reset the Download Counts on all downloadable items in this order".)

... but these points are all unrelated to the topic of this discussion thread, which is a specific template.

I had a problem that the search box was not showing up at the top of the page in the mobile view in the NavMainwrapper. Then I found that this is a feature not a problem, this function is blocked in responsive_mobile.css ca. line 21 so that was easy to change.

Also in the mobile view the links to "Home" and "login" are floating at the top right of the page; is this also a feature or something I need to change?
Link here.

Ok a bit of help pointing me in the right direction please. I have built my new site on (now) 1.5.5d using the built-in Responsive_Classic template. I have transitioned my new site to the correct place and gone live, having ugraded the database and amended the config files accordingly. Everything works fine excepting for the responsive page for mobiles, desktop and tablet (landscape orientation) are fine. If I look on a mobile (or tablet in portrait) the page changes to reflect the screen size (almost perfectly, a layout issue with me I suspect) and I get the Menu select blue bars appear on the header bar, but when I click on them nothing happens. I remember during my initial days of testing with a dummy database this did work and the category list appeared on the left, sliding the main page to the right, but no longer.

So what have I done, or not done ?

TIA ... Michael

www.dracocrafts.com

@Mikeondraco, try renaming the stylesheet-old.css file to something likestylesheet.css~. All files with a .css extension are loaded from the /css folder!

Quote:

---

Originally Posted by lat9

@Mikeondraco, try renaming the stylesheet-old.css file to something likestylesheet.css~. All files with a .css extension are loaded from the /css folder!

---

Thanks, I will try that, but of course the one I changed during the build is named as stylesheet.css, the only hing I changed in it (I think) was a text size somewhere, but will see.

I may be back......

Quote:

---

Originally Posted by Mikeondraco

Thanks, I will try that, but of course the one I changed during the build is named as stylesheet.css, the only hing I changed in it (I think) was a text size somewhere, but will see.

I may be back......

---

Yup as I remembered, all I changed on that sylesheet was the font size for the category tabs on the home screen. Changed back to the original stylesheet and still the same problem ?

I have deleted the -old one as well, reading your comment as I think that is what you may have meant

You seem to be missing the mobile-menu modules from the template; they're what creates that mobile view. Do you have any debug-logs generated?

Quote:

---

Originally Posted by lat9

You seem to be missing the mobile-menu modules from the template; they're what creates that mobile view. Do you have any debug-logs generated?

---

No logs generated. I have just uploaded all the 'includes/templates/responsive_classis/css' files again in their entirity from my 1.5.5d download this morning, to ensure they are all virgin files. Still the same.

Are these the files you are referring to or something else?

The files in the template's /common and /jscript directories provide that menu handling (in addition to a couple of files in the /templates directory). I'd start by comparing your /common directory's files to those provided in the base Zen Cart distribution.

Quote:

---

Originally Posted by lat9

The files in the template's /common and /jscript directories provide that menu handling (in addition to a couple of files in the /templates directory). I'd start by comparing your /common directory's files to those provided in the base Zen Cart distribution.

---

Many, many thanks. I have no idea what I had done, as I do not recall working on any of those files, but I just downloaded them again from 1.5.5d and all is working as it should

Thanks again for you time and patience .. Michael

Michael, I'm glad you got the issue sorted out!

I am satisfied with how the menu looks for my website on mobile, but dislilke how it looks on desktop. It just shows all of the categories on the left side like it was a mobIs there any way I could change the way categories appear so that when I hover over the main categories it shows all of my subcategories? I want it to be similar to burpee seeds website. I want the categories at the top for desktop and on the side for mobile.

Quote:

---

Originally Posted by DrByte

... and the "Delivered" status essentially means "Shipped". If you're not using "Delivered" for some other purpose, you could just rename it, instead of adding additional statuses.

(There's a meaning to the numerical values assigned too, such as "Update" actually means "Update and reset the Download Counts on all downloadable items in this order".)

... but these points are all unrelated to the topic of this discussion thread, which is a specific template.

---

Thanks for your detailed reply, I sorted my issue out by inserting another status. The reason (here in the UK anyway) for wanting to differentiate between Shipped and Delivered is essentially a language use I guess, but when we say shipped we mean despatched into whichever post/courier sytem is chosen, whereas Delivered means that the customer has it. Semantics I know, but we are a bit odd over here :wacko:

and another question.....

Having read through the entire thread, some interesting stuff here, I can find no mention of this. Can I add Facebook and Twitter link icons (I know, sad :blink:) to the main black header bar ? If so, will this be shown on all devices ?

If this is not possible, or recommended, can I add them elsewhere. They were a default in the flexible footer of my previous 1.5.4 Winchester_Black template incarnation ?

TIA ..... Michael

Also, whilst I am here, although I have got used to the changed listing view from columns to rows and rather like it, why is it, that if I select column display in 'admin/configuration/product listing - layout style' to columns the template ignores me, i.e. I cannot select column display at all ?

Michael
www.dracocrafts.com

Quote:

---

Originally Posted by Mikeondraco

Also, whilst I am here, although I have got used to the changed listing view from columns to rows and rather like it, why is it, that if I select column display in 'admin/configuration/product listing - layout style' to columns the template ignores me, i.e. I cannot select column display at all ?

Michael
www.dracocrafts.com

---

That setting was (I'm guessing) left-over from your Winchester Black template; it's not part of the Zen Cart base distribution.

Quote:

---

Originally Posted by lat9

That setting was (I'm guessing) left-over from your Winchester Black template; it's not part of the Zen Cart base distribution.

---

Hmmmm, OK, but this is a vanilla installation, albeit using the upgraded database from my previous store ?

Michael

Just wondering, is there a full list somewhere of all the HTML 5 Elements/Tags added to responsive classic?

Quote:

---

Originally Posted by Mikeondraco

Hmmmm, OK, but this is a vanilla installation, albeit using the upgraded database from my previous store ?

Michael

---

Right, so the Winchester Black template's installation added that field to your "old" configuration and your upgraded database didn't know that it isn't going to be used anywhere (anymore).

Quote:

---

Originally Posted by lat9

Right, so the Winchester Black template's installation added that field to your "old" configuration and your upgraded database didn't know that it isn't going to be used anywhere (anymore).

---

Thanks for that, in the database then, No issues, as I said, I quite like the row listing anyway and the plan was not just to upgrade the Cart, but redesign the site anyway - not a bad thing to do every year or two in my book :smile:

Any thoughts on my previous question concerning the Facebook, Twitter, etc. links ?

Michael

Quote:

---

Originally Posted by Mikeondraco

and another question.....

Having read through the entire thread, some interesting stuff here, I can find no mention of this. Can I add Facebook and Twitter link icons (I know, sad :blink:) to the main black header bar ? If so, will this be shown on all devices ?

If this is not possible, or recommended, can I add them elsewhere. They were a default in the flexible footer of my previous 1.5.4 Winchester_Black template incarnation ?

TIA ..... Michael

---

Michael, since the responsive_classic template's processing also pulls in the Font Awesome support, you could use those fa glyphs for Facebook and Twitter (linking to your accounts) to your store's desktop header (/common/tpl_header.php) and to the mobile menu (/templates/tpl_modules_mobile_menu.php).

Quote:

---

Originally Posted by lat9

Michael, since the responsive_classic template's processing also pulls in the Font Awesome support, you could use those fa glyphs for Facebook and Twitter (linking to your accounts) to your store's desktop header (/common/tpl_header.php) and to the mobile menu (/templates/tpl_modules_mobile_menu.php).

---

Thank you again :smile:

Quote:

---

Originally Posted by Nick1973

Just wondering, is there a full list somewhere of all the HTML 5 Elements/Tags added to responsive classic?

---

Do you mean a list of every place where HTML tags like <input type="phone"> or <section> etc are used? Please explain why that would be useful.

Yes, and it would be useful as I have built my own responsive template and would like to add in the HTML 5 tags where possible otherwise it means starting from scratch again. Basically so i can edit what I have built and bring it up to date with HTML 5 Compliance.

Quote:

---

Originally Posted by Nick1973

Yes, and it would be useful as I have built my own responsive template and would like to add in the HTML 5 tags where possible otherwise it means starting from scratch again. Basically so i can edit what I have built and bring it up to date with HTML 5 Compliance.

---

Better to use PHP defines. In this way people can add additional languages along with many other features. Hard-coding HTML tags into these templates is what novices do and what contributes to future headaches of template users. Also, Google is applying many stringent "rules" to how HTML is now rendered, with the focus on AMP. Hardcoded "conventional" HTML will contribute to a template that is unlikely to be future-proof.

If you want to see how proper, responsive templates are built, then go examine those from picaflor azul.

I would advise all my customers to AVOID going near a template that uses archaic methods to render HTML.

LOL....thanks for the sarcastic reply Schoolboy. There was absolutely no need for that. I can assure you I am not a novice and the template I have built is fully responsive. My problem is that I had started it when Zen Cart released the Responsive Classic Template and it was too difficult to go back. Zen Cart previously relied on HTML 4 until recently, you should know that! I'm not talking about Hard Coding HTML into anything, I am basically asking for a list of what was added to the previous HTML 4 Templates in order to bring them up to HTML 5 Standards. Which of course means using PHP to code them in. In all honesty I'm not a great fan of the picaflor azul templates for all sorts of reasons, which is a personal choice. I find they often don't work quite as well as they should and particularly from a design and layout perspective. So I don't think there is anything wrong with writing my own template to suit my requirements.

Quote:

---

Originally Posted by Nick1973

Yes, and it would be useful as I have built my own responsive template and would like to add in the HTML 5 tags where possible otherwise it means starting from scratch again. Basically so i can edit what I have built and bring it up to date with HTML 5 Compliance.

---

You should run your template/code, or from anyone else for that matter, through a code validator to see if any incorrect coding is present. Adding HTML code where you think it is needed is part of what coding is all about.

Yep, and that is one of the things I will be doing Rob. However that is going totally away from my question. Which was, Just wondering, is there a full list somewhere of all the HTML 5 Elements/Tags added to responsive classic? It would be good to have basically as a cross reference.

Quote:

---

Originally Posted by schoolboy

Better to use PHP defines. In this way people can add additional languages along with many other features. Hard-coding HTML tags into these templates is what novices do and what contributes to future headaches of template users. Also, Google is applying many stringent "rules" to how HTML is now rendered, with the focus on AMP. Hardcoded "conventional" HTML will contribute to a template that is unlikely to be future-proof.

If you want to see how proper, responsive templates are built, then go examine those from picaflor azul.

I would advise all my customers to AVOID going near a template that uses archaic methods to render HTML.

---

Some interesting comments you made. I would not recommend picaflor azul templates as an example of good coding. I was also unaware that Google is now trying to be the Code Police and enforce their version of code review on people.

As to the comments "Hard-coding HTML tags" & "Hard coded conventional HTML", what is conventional HTML and if not hard coded, how does one insert HTML code? After all, HTML is Document Structure and without there is no web page.

Quote:

---

Originally Posted by Nick1973

Yep, and that is one of the things I will be doing Rob. However that is going totally away from my question. Which was, Just wondering, is there a full list somewhere of all the HTML 5 Elements/Tags added to responsive classic? It would be good to have basically as a cross reference.

---

Although it might be good for reference it would be more work than it's worth. I have never seen an HTML Style Guide provided with any template I've seen, free or paid-for. Common coding methods deal with code blocks, that is what to focus on. Coding in blocks and making them modular is the way to go; no matter what language is being used.

do you think i should stick with it for now then and not bother?

i wasn't asking for a style guide by the way, just the html 5 elements that was added into the code to bring mine in line with html 5. it doesn't matter too much, i can add basic html 5 elements if i wish though.

Quote:

---

Originally Posted by Nick1973

In all honesty I'm not a great fan of the picaflor azul templates for all sorts of reasons, which is a personal choice. I find they often don't work quite as well as they should and particularly from a design and layout perspective. So I don't think there is anything wrong with writing my own template to suit my requirements.

---

There's a lot I dislike about the "style" choices picaflor have made which is embedded into practically all their templates. But "style" features are very easy to remove and/or reshape. First thing I do with any template I get is to remove features that don't play well in the desktop/mobile "crossover". Mobile compliance is now more important than Desktop compliance, but template authors still seem to build for desktop, then bolt on bits that help it render on mobile.

It is believed that by 2020, almost 90% of interactive/transactional activity will happen on mobile devices - certainly in B2C environments, which is where most website owners using opensource platforms are active. Hence Google pushing the AMP protocol. Sites that are heavy in JS and CSS are already struggling to get to Google's preferred target of under 2 seconds for pagespeed.

Also, the way people use websites (especially for making purchases) has changed dramatically in recent years. With Google now increasingly capable of presenting search results which more and more accurately reflect what someone is looking for, people like to get straight to the page where they see on offer, exactly what they are looking for. So when they land on that page, the faster, simpler and easier it is to use, the more likely they are to not only stay-on-page, but also to expand their visit while they are there. They have no time for irritating banners, popups, slide-outs, and all these other techniques that remain popular with site owners (and developers - who are usually not very good at marketing and selling, and who know little about stuff like UX).

Templates should therefore achieve the following:

1. Be designed for mobile use, first and foremost.
2. Avoid using features that rely heavily on css and js.
3. Incorporate semantic data-markup, so search engines can more accurately determine the nature AND INTENT of page content.
4. Be clean and simple, with the main feature of any rendered page being largely what the visitor is expecting it to be.

Since we simplified all our websites (and those we continue to support for other customers)we have seen:

1. Bounce rate drop to BELOW 2% on almost all sites. No site has a bounce rate over 5%.
2. Time-On-Site (average) move to 6 minutes from 2 minutes.
3. Since 2013, a 450% increase in return visits. (And corresponding repeat/new orders).
4. Average pageviews (per session) increase from 7 to 22.
5. Order value increases of between 40% and 60% (depending on the site and products being sold).

So... to us... it's not really about the template as much as it is about making things cleaner, faster, easier and more focused, for the end user. That is our only benchmark for whether the technology is "good" or "indadequate".

We try lots of templates (both in their original form and customised) and if they don't first achieve a pageload speed of 2.5 seconds or less across a series of tests, we toss them out. Then, those we keep must achieve under 2 seconds. We use pingdom and gtmetrix as our main testing platforms for this purpose - not Google, who has "ulterior motives" in reporting "underperformance".

Quote:

---

Originally Posted by Nick1973

i wasn't asking for a style guide by the way, just the html 5 elements that was added into the code to bring mine in line with html 5. it doesn't matter too much, i can add basic html 5 elements if i wish though.

---

Whether it is called a; Style Guide, Documentation, Overview, etc., they all refer to some specifics of what is being used--which is what you were asking about. The thing is to "know" HTML5 so you can spot inconsistencies or errors whenever you see them and/or add code where you see fit.

As to what template you should "stick with" or use, it should be according to your needs. If it is correctly coded and you can use it start with it, then adapting it to your needs is a lot easier.

Quote:

---

Originally Posted by Nick1973

Quote:

---

Originally Posted by DrByte

Quote:

---

Originally Posted by Nick1973

Just wondering, is there a full list somewhere of all the HTML 5 Elements/Tags added to responsive classic?

---

Do you mean a list of every place where HTML tags like <input type="phone"> or <section> etc are used? Please explain why that would be useful.

---

Yes, and it would be useful as I have built my own responsive template and would like to add in the HTML 5 tags where possible otherwise it means starting from scratch again. Basically so i can edit what I have built and bring it up to date with HTML 5 Compliance.

---

Quote:

---

Originally Posted by Nick1973

I am basically asking for a list of what was added to the previous HTML 4 Templates in order to bring them up to HTML 5 Standards.

---

Quote:

---

Originally Posted by Nick1973

my question. Which was, Just wondering, is there a full list somewhere of all the HTML 5 Elements/Tags added to responsive classic? It would be good to have basically as a cross reference.

---

Simple answer is: no, there's no list of instructions on how to build responsive_classic from scratch.

But you're asking 3 different questions here:
1. "list of all HTML 5 elements/tags" (which is ambiguous as it's unclear what a list of tags would look like or be, or how it would be used)
2. "add in HTML 5 tags to my template" (again, ambiguous)
3. "a list of what was added to the previous HTML 4 Templates in order to bring them up to HTML 5"

Question #3 makes a lot more sense, but really isn't answered by #1 or #2. There isn't a list of "things added" because it's more about "things changed".

But here's the answer to your question:
Since it's finally more clear what your end goal is (update your own template to match the HTML5 template that comes default with Zen Cart), you can get a clear visual indicator of exactly what was changed, and decide whether to incorporate each change into your own template, by:
a - unzip a copy of v1.5.4
b - unzip a copy of v1.5.5 in a separate directory
c - use a text-compare tool like WinMerge or AraxisMerge or BeyondCompare to compare the template_default folders between both sites
This will give you a complete thorough list of all the changes made to bring things up to HTML5
(And if you do a 3-way compare you can slap your template alongside and literally click to copy things across where you identify changes that need to be brought into your own template files.)
There are a few files in /includes/modules and /includes/languages that were also touched, so a similar compare there is prudent.

And then if you want to take it a step further and see what's different between template_default and responsive_classic, you can simply compare those two template directories inside your v1.5.5 directory. Then also look for all the "override folders" where there's a "responsive_classic" subdirectory, and note what's been customized in there ... in the /includes/modules and /includes/languages/ areas.

The visual list will be far more useful than a text file listing a bunch of random html elements out of context.


And, frankly, this visual compare is exactly what you should do every time there's an upgrade anyway, if you want your customized template to be compatible.


If you're interested in the month's work I did to review and implement the changes, you can see all my code commits during that timeframe here:
https://github.com/zencart/zencart/c...81e6d0e62f9148

Ok no worries Dr Byte. I'll do what you said then as that basically gives me an answer. And I'm sorry for not sounding more clear. The cart was built on 1.5.4 so I do need to upgrade it anyway. It's taken me over a year to get it to the stage it is at, basically because I am dealing with clients and do not have much time to work on my own work. And that is also why it has fallen behind a little. I gathered it would be easier to continue on 1.5.4 and then deal with upgrades afterwards. I think Website Rob and Schoolboy went totally off track, but then perhaps they didn't understand what I was asking. In answer to Schoolboy regarding page speed though, my template is CSS driven and the only graphics such as PNG's and Jpegs are literally product images and the logo. I haven't tested page speed but I'd have thought as it relies heavily on CSS to render buttons, gradients, backgrounds, etc etc (note: no graphics such as PNG's or JPEGS applied into CSS) it would be pretty quick. And of course anyway, page speed is dependent on the end users internet connection. Google might well be going down that route now, but as broadband gets faster for everyone then people want more graphics and video which takes up more bandwidth so while I understand your point regarding mobile and page speed, you only have to look around at other platforms to see how heavily they make use of graphics etc...so it would not surprise me if google changes their mind. Certainly alot people I speak to have a tendency to use their mobiles for browsing on the go, and make purchases from their Laptop or Desktop PC. Partly because of security and also because certainly for some items a mobile screen simply isn't big enough to view a product in detail. I'm not saying I'm ignorant to mobile users, but while it is a trend at the moment, it doesn't mean to say the trend will last.

Anyway I didn't come on here to be told what is right and wrong, for which we could go on forever arguing about who has the most knowledge and talking about the weather etc, I came on to ask a question, for which Dr Byte appears to have answered and for that I am greatful for.

Quote:

---

Originally Posted by Website Rob

I was also unaware that Google is now trying to be the Code Police and enforce their version of code review on people.

---

Google do a lot of things that I am less than happy with but they bring the majority of visitirs to my site so I find it pragmatic to do what keeps them happy :)

Quote:

---

Originally Posted by schoolboy

Hence Google pushing the AMP protocol. Sites that are heavy in JS and CSS are already struggling to get to Google's preferred target of under 2 seconds for pagespeed.

---

I am currently on V155d and I find the performance is good; I tested my main pages with pingdom again today and they all show up in 1.5 or 1.7 seconds.
To be honest I could do more to optimise image sizes but not sure how much improvement this would bring :)

I am using v155d Responsive classic.

I just had a problem in the mobile view (tablet and desktop OK). Some of the small icons show up as full screen width which is quite ugly, examples are the free shipping icon in the product listing or the waste bin (delete) in the shopping cart.
I could fix this by adding a class to each image icon using "class =" and setting the class size in responsive mobile css.
Probably an impossible question to answer but any idea why this happened?

Quote:

---

Originally Posted by marton_1

I am using v155d Responsive classic.

I just had a problem in the mobile view (tablet and desktop OK). Some of the small icons show up as full screen width which is quite ugly, examples are the free shipping icon in the product listing or the waste bin (delete) in the shopping cart.
I could fix this by adding a class to each image icon using "class =" and setting the class size in responsive mobile css.
Probably an impossible question to answer but any idea why this happened?

---

The recommendation is that images are sized appropriately, and then the size is declared in the <img src> tag.

So... if you have an image called "logo.jpg" 150px wide X 50px high. then it needs to be declared at that height and width:

HTML Code:

---

<img src="images/logo.jpg" width="150" height="50" />

---

Google (and many others) do not like images to be RE-SIZED by the tag declarations. They like the declarations to be in-sync with the images actual dimensions.

Also, it's better to use images that can be compressed using a good image editor (adobe photoshop, for example). PNG images cannot be compressed, whereas JPG and GIF can.

I avoid PNG for this reason, and I avoid GIF as it can make images look "bitmapped" - and I use JPG images exclusively, all worked using Adobe Creative Suite (mostly Photoshop).

When you have your image at the dimensional size you need (150px X 50px), compress it down to as small a file-size that you can before it starts to look "smudgy". If you keep to JPG formats, you will be able to achieve very good compression.

Quote:

---

Originally Posted by schoolboy

The recommendation is that images are sized appropriately, and then the size is declared in the <img src> tag.

So... if you have an image called "logo.jpg" 150px wide X 50px high. then it needs to be declared at that height and width:

HTML Code:

---

<img src="images/logo.jpg" width="150" height="50" />

---

Google (and many others) do not like images to be RE-SIZED by the tag declarations. They like the declarations to be in-sync with the images actual dimensions.

---

Thanks for your answer, for example, my free shipping icon is like this

HTML Code:

---

<img src="always-free-shipping.gif" alt="Always Free Shipping" title=" Always Free Shipping " width="94" height="54">

---

Why it shows up full screen in the mobile view I have no idea.

Quote:

---

Originally Posted by marton_1

Thanks for your answer, for example, my free shipping icon is like this

HTML Code:

---

<img src="always-free-shipping.gif" alt="Always Free Shipping" title=" Always Free Shipping " width="94" height="54">

---

Why it shows up full screen in the mobile view I have no idea.

---

INSPECT the actual image... what is its REAL size? The HTML <img> tag is telling it to show at 94 x 54 - but it could be 94000000 X 54000000 in reality.

The ACTUAL size of the image must match the DECLARED size.