? on Customizing Responsive-Classic template v1.5.5f

[byakudan]

I have upgraded from v1.5.1 to v1.5.5f. My site is on a Linux server and I have upgraded PHP from v5.6 to v7.0. Site does not use any plug-ins.

My old store used the Classic template with overrides in a custom template called NST. Now I want to use the Responsive-classic template with overrides in NST.

Under Admin/Tools/Templates there are now three choices: Classic, Responsive-classic, and NST. It only allows ONE choice of template. If I choose NST because of the overrides, how does the site know I want to use Responsive-classic as my base template, rather than Classic?

What are my options to set this up? Most of my NST changes are in the CSS, but not all. I also have some custom pages (not EZ-pages) that I had set up in NST to parallel the regular information page structures. They were linked under the “Information” box.

Do I need to copy ALL of the Responsive-Classic directories/files into the appropriate NST directories, and then just change the ones I need, and set the template choice to NST? Am I missing something obvious? I have tried searching the forum but cannot find anything addressing this issue.

I have not dealt with this software since 2013, and am having to relearn how it all works, so please be detailed and specific in your response instructions. Thanks!

[mc12345678]

Generally speaking, yes only one template can be active for a given user/instance at one time. With regards to having your changes applied AND to have it responsive, there are two options generally suggested.

One is to use the DIY responsive template plugin to incorporate responsive elements into your template, the other is to basically take the responsive classic template, clone it, and then modify the desired elements. (something akin to one of the methods you identified.)

The thing is that unfortunately the responsive classic template css design was not generated to easily modify the template. Therefore others have put in a lot of work to provide a plugin for the classic responsive template that splits out a lot of the elements and makes them easier to modify. Again, would suggest cloning the responsive template, applying that plugin and then incorporating the changes you made for NST...

Now, how it all fits together? Well there are a few FAQS about the template override system, but generally speaking all templates provide what they want to be displayed/executed, and where they don't, basically the template_default or base module folder's file is used. (there is yet another "plugin" addressing the template override system to download and view from your personal computer) therefore, there are things/elements from your NST folder(s) that you will want to incorporate in order to have things in the same look as you did before... some things may just not be necessary...

[dbltoe]

The safest of all methods based on a new install of ZC

1. clone responsive_classic to "test"
2. add change color mod to "test"
3. clone "test" to "store"
4. proceed to adjust

This gives you several backup/compare points. You can always delete the unused "test" when complete.

Also saw another suggestion which can help as well. Haven't tested yet if a combined mobile, tablet, non-mobile of css calls is a problem.

The suggestion was to use stylesheet_zcustom.css for all changes to the other stylesheets. Since it should always be loaded last, it should make your changes without touching the other stylesheet files. Sounds like a great way to keep track of changes.

Again, have not tested the use of responsive changes in stylesheet_zcustom.css, but works great with other changes.

[byakudan]

Thank you, mc12345678 and dbltoe! This is exactly the information I was looking for! I have downloaded and installed Clone-a-Template and Responsive Color Changes 155 (the color change mod), and created a test-clone of the Responsive-classic template. I will experiment with the color scheme, and work on making my other mods manually in the cloned template. I also cloned my old NST to a new name so I will have those files for reference as I work.

Thank you also to the authors of those two plug-ins - they have saved me many hours of frustration.

Might I suggest that the various Zen-Cart "How to Upgrade/Install" tutorials be updated with this information concerning the need to clone the Responsive-classic template in order to make modifications? That might have saved me a few hours of aggravation!

[Cherilynn]

Hi, I am using this template and I am new at this. I am trying to put a header on the site but I can not figure out how to do it also I need to figure out how to add the favicon. Can someone please help. Thank you

http://celticstarsbooksandgifts.com

[dbltoe]

@Cherilynn

Welcome to the forum.

Could you elaborate on what you are envisioning in this "header"? Zen Cart has an html header built in and its contents are controlled in the admin menus.

Favicon is discussed at https://www.zen-cart.com/content.php?94-using-favicon. We recommend iconifier.net to generate the favicons in today's responsive world.

A helpful note. Although the BEST source of Zen Cart info, the forum does not possess the best search capability. Recommend you use Google. Type in a word or phrase you are looking for and add Zen Cart on the end. That will get you to the info much quicker.

[Cherilynn]

Thank you for your response. I want to add a header_bg across the top of the site. The one that I have now is 1200 x 300 but I can always resize it. It might not be so hard for me to figure out if using the original template but with this one I can't find anything. I spent 8 hours looking and nothing. Thank you for the Favicon info going to work on that now.

[dbltoe]

Thank you for your response. I want to add a header_bg across the top of the site. The one that I have now is 1200 x 300 but I can always resize it. It might not be so hard for me to figure out if using the original template but with this one I can't find anything. I spent 8 hours looking and nothing. Thank you for the Favicon info going to work on that now.

Zen Cart works with wrappers. The wrapper encloses a specific area of each page. On the home page, there is a mainWrapper which covers the entire page. Nested inside that are several other wrappers.

Most browsers have built-in troubleshooting capabilities that can be reached by clicking F12. Some, you right-click on the screen and select inspect. Either way, this should show you the various wrappers that are used in Zen Cart. Most likely, you will be using the headerWrapper.

You may find it a bit confusing in the beginning, but experimenting with several methods will be a valuable experience.

[Cherilynn]

Zen Cart works with wrappers. The wrapper encloses a specific area of each page. On the home page, there is a mainWrapper which covers the entire page. Nested inside that are several other wrappers.

Most browsers have built-in troubleshooting capabilities that can be reached by clicking F12. Some, you right-click on the screen and select inspect. Either way, this should show you the various wrappers that are used in Zen Cart. Most likely, you will be using the headerWrapper.

You may find it a bit confusing in the beginning, but experimenting with several methods will be a valuable experience.

It's driving me nuts to say the least. I have been using inspect but every time I find it and change it nothing happens. so I am going to see if I can find someone to do it for me or find another template that is easier for me to work with. I think spending 15 hours trying to do it is enough.

[twitchtoo]

It's driving me nuts to say the least. I have been using inspect but every time I find it and change it nothing happens. so I am going to see if I can find someone to do it for me or find another template that is easier for me to work with. I think spending 15 hours trying to do it is enough.

Backgrounds, logos, headers, colours...
https://www.puddlesofpaint.com/shop/

Logos and lots of white space like this...
http://twitchtoo.com/tR_codeSHOP/

Similar plain but coloured...
http://sheldrakeautomotive.com/shop/

These all run 1.55f desktop/mobile with minimal changes to the stock Responsive_Classic CSS files on each to accomplish each look.

For visual header changes:
includes/templates/YOUR_TEMPLATE/css/stylesheet.css
includes/templates/YOUR_TEMPLATE/css/stylesheet_colors.css

includes/templates/YOUR_TEMPLATE/css/responsive.css
includes/templates/YOUR_TEMPLATE/css/responsive_default.css
includes/templates/YOUR_TEMPLATE/css/responsive_mobile.css
includes/templates/YOUR_TEMPLATE/css/responsive_tablet.css


For structural header changes:
includes/templates/YOUR_TEMPLATE/common/html_header.php
includes/templates/YOUR_TEMPLATE/common/tpl_header.php


Mobile menu:
includes/templates/YOUR_TEMPLATE/templates/tpl_modules_mobile_menu.php


Help is here :)