Modifying templates: how to use override?

[Cletus-]

I have read some explanations - e.g. this https://www.zen-cart.com/content.php?78 - about how to use the override system but I couldn't understand it entirely.

First I want to modify colors in this templates
\zencart\includes\templates\responsive_classic (having the colors here: \zencart\includes\templates\responsive_classic\css)
and this one
\zencart\includes\templates\winchester_black (having the colors here: \zencart\includes\templates\winchester_black\css)

Which folders do I have to create and where do I have to copy the css files I want to modify?

[mc12345678]

In a way, both sub-directories are already template overrides. But, before I am admonished for saying that, the responsive_classic is the new "how it is" for a default template.

To not mess up either of those two templates, you would likely want to clone the template(s) to a new directory/path (there is a plugin that helps to do this for you.) and then you would modify the files in the new directory path.

Okay, so you say still haven't told me which path/files. If you didn't copy/clone those folders and just wanted to start modifying the way things look, you would do all of the modifications in either of those two css sub-folders depending on which template you wanted modified. If there is a file that is not in that directory that is overrideable then copy it from template_default to the directory in which you are working. As to which css file to modify, that also depends on multiple factors such as which view of the site is in question (mobile, tablet, desktop, etc...) how big the screen, change things only for a single page or for every page, etc..

Basically, and there is a plugin that shows the overrideable directories, the suggestion is to not modify files that are likely/expected to be provided in the same path/structure on the next upgrade/install. This way the new file system can be injected "over" the old and there would/should be an operational view of the store. Any changes made to then be identifiable or compared against the original files to validate continued operation.

[Cletus-]

Thank you very much!

the responsive_classic is the new "how it is" for a default template.

Sorry, I cannot understand, what does it mean?

To not mess up either of those two templates, you would likely want to clone the template(s) to a new directory/path (there is a plugin that helps to do this for you.) and then you would modify the files in the new directory path.

So it sounds like you cannot just copy a template folder, e.g. "responsive_classic" or "winchester_black" and rename it to "responsive_classic_2" or "winchester_black_2" in the templates folder: \includes\templates\responsive_classic_2. So simply clone the entire template folders does not appear to work, that's why one should use that plugin.

If there is a file that is not in that directory that is overrideable...

And which files are overrideable or not shows that plugin or, I assume, it works for folders only.

....then copy it from template_default to the directory in which you are working.

So for example to \includes\templates\responsive_classic_2, respectively to a sub folder.

As to which css file to modify, that also depends on multiple factors such as which view of the site is in question (mobile, tablet, desktop, etc...) how big the screen, change things only for a single page or for every page, etc..

I would try to get a consistent design / look, so I would change for example the colors of all pages effecting all devices, e.g. the same background color for every device.

..."how big the screen"...

I would have supposed a responsive template automatically adapts the display to the different devices. So there would be no need to change anything regarding the size of the screen.

And after each update you have to check the (possibly) updated (template) files if they contain new code / functions which one would have to copy to the modified (css / template) files?

the suggestion is to not modify files that are likely/expected to be provided in the same path/structure on the next upgrade/install.

So not modify the files which might / will be overwritten when updating the next time.

This way the new file system can be injected "over" the old and there would/should be an operational view of the store.

Sorry, what does "operational view" mean? A (unsightly) look of the shop caused by missing / overwritten css files or so by the latest / an update?

It turns out again being much more complicated as I had expected.

Many thanks, again

[Website Rob]

I have read some explanations - e.g. this https://www.zen-cart.com/content.php?78 - about how to use the override system but I couldn't understand it entirely.

First I want to modify colors in this templates
\zencart\includes\templates\responsive_classic (having the colors here: \zencart\includes\templates\responsive_classic\css)
and this one
\zencart\includes\templates\winchester_black (having the colors here: \zencart\includes\templates\winchester_black\css)

Which folders do I have to create and where do I have to copy the css files I want to modify?

Not sure why you think you have to create anything? If you want to modify colours in a template you already provided the path to the necessary files. BTW, you realize you can only use one Template at time, right?

Two modules that will help you sort out the overrides are:

https://www.zen-cart.com/downloads.php?do=file&id=1393
Zen Cart Overrides Cheatsheet

https://www.zen-cart.com/downloads.php?do=file&id=2087
Clone a Template

You will also need to use a Browser like Firefox or Chrome which have built-in tools to help one see where and how code is affected within a page.

[mc12345678]

Thank you very much!


Sorry, I cannot understand, what does it mean?


So it sounds like you cannot just copy a template folder, e.g. "responsive_classic" or "winchester_black" and rename it to "responsive_classic_2" or "winchester_black_2" in the templates folder: \includes\templates\responsive_classic_2. So simply clone the entire template folders does not appear to work, that's why one should use that plugin.


And which files are overrideable or not shows that plugin or, I assume, it works for folders only.


So for example to \includes\templates\responsive_classic_2, respectively to a sub folder.


I would try to get a consistent design / look, so I would change for example the colors of all pages effecting all devices, e.g. the same background color for every device.


I would have supposed a responsive template automatically adapts the display to the different devices. So there would be no need to change anything regarding the size of the screen.

And after each update you have to check the (possibly) updated (template) files if they contain new code / functions which one would have to copy to the modified (css / template) files?


So not modify the files which might / will be overwritten when updating the next time.


Sorry, what does "operational view" mean? A (unsightly) look of the shop caused by missing / overwritten css files or so by the latest / an update?

It turns out again being much more complicated as I had expected.

Many thanks, again

Historically the classic template had minimal modifications in *all* of the template override folders. There are some specifically in the includes/templates folders but there are many template override folders/areas for each template. So, now there is a responsive template that is built in, but in order to support its functionality more files require modification than the older classic template. Therefore the statement of "how it is". The functionality added to the site is basically dependent on those additional files not just an addition to the existing template_default related files.

You can "just" copy a template override folder, but you have to do it in every location where that template overrides a file. It is possible to do manually, but the plugin makes it more automated/easier. It doesn't support making that type of copy from one store to another, but it does make it easier within a given store. There are some other changes needed when manually making the copy, but I thought that was covered in the link you provided in your OP.

The overrideable files/folders are shown in a separate "plugin" (set of files downloadable from the plugins area but are intended to be viewed at your local computer as a sort of "help" file.) called something like template override cheatsheet. I would not expect that the plugin would provide that same level of "discussion".

For color changes only, I would suspect that all displays of the template would likely use a single source; however, it is always possible to modify any aspect of the displayed information to suit a specific need. As such and perhaps responsive templates are not understood, but generally speaking the css files contain screen resolution break points. For screens with a resolution X, the following css is to be different than the "standard". This resolution is to what I referred as screen size. Well, now, or more recently the responsive design concept has been taking into account the type of device and as part of that loading different css files. So, there runs the possibility that a change made to the tablet file with resolution less than 1024 x 786 may not show under the mobile file with the same resolution. There comes the "art" of css and the front side development of a site. Then even within a single file, different devices of the same type may render the display differently. Again a factor to consider based on the needs/expectations of the site operator, the current technology, and the ability to detect/control that display.

Regarding the end of questions. It seems as if you understand, work on files in a template override directory (where such possibility exists), the files being overridden are generally expected to be present in the next version of ZC and the team seems to painstakingly keep it that way to make upgrading and interoperability easier, when doing the next upgrade, review changes made to the underlying/overridden files (and associated files as well) to determine what if anything needs to be modified to "restore" the site back to its former glory but including the new functionality/improved security. This last part is one of many specific reasons that a site should be developed and modified outside of the live site with the improvements applied in a controlled stable manner.

Yes, there are many steps involved, but the goal is to maintain a productive site, do the best that can be done to make future upgrades easy as possible, possibly identify areas of the code that could use improvement to make it that much better and to make any such improvements portable to others/other sites wanting that same functionality.

Can a single minor change be made to one of the existing files so as not to go through that process of duplicating the template file(s)? Sure, but should continue to consider, how many such small changes can be made before the overall changes are more significant? :) That's where planning and maintenance come in to play.

[mc12345678]

Not sure why you think you have to create anything? If you want to modify colours in a template you already provided the path to the necessary files. BTW, you realize you can only use one Template at time, right?

Two modules that will help you sort out the overrides are:

https://www.zen-cart.com/downloads.php?do=file&id=1393
Zen Cart Overrides Cheatsheet

https://www.zen-cart.com/downloads.php?do=file&id=2087
Clone a Template

You will also need to use a Browser like Firefox or Chrome which have built-in tools to help one see where and how code is affected within a page.

True a single user/customer can only see one template at a time, the question of the two templates could be applicable to two totally distinct sites, one could also use the multisite plugin (end up with two different sites) or add the ability for a user/session to have different templates in play. Then of course being a site in development (known from other recent postings), likely working out whatever template view(s) are to end up in the production site.

As to making a copy, it's more of a good practice to leave what works alone and make changes to an independent location. Lots of ways to do that. But by having some form of previously accessible/functional view one can compare the two and maybe track down the source of the problem.

[Cletus-]

Many thanks.

Not sure why you think you have to create anything?

Ah sorry, because mc12345678 told me to do, if I understood it correctly.

BTW, you realize you can only use one Template at time, right?

Yes yes, I do, absolutely.

Many thanks for the links. Yes, the Cheatsheet shows / explains in an htm file, like a help file, which folders can be overridden. And with Clone a Template I just can clone an entire template and then just activate that copied template in the admin area.

You will also need to use a Browser like Firefox or Chrome which have built-in tools to help one see where and how code is affected within a page.

Yes, thank you, I have them already in use with those tools.

It appears as if a template (e.g. "winchester_black") might override files / data of another template (e.g. "responsive_classic") in the same Zen Cart. If so, can / should I install different templates like "responsive_classic" and "winchester_black" at the same time so that I can switch between them? Or should I rather install two ZCs each with another template of them?

Yes, that seems to be right, a single source / css file (for Winchester) for each or the most displays according to the file names:
zen_colorbox.css
stylesheet_responsive_tabs.css
stylesheet_flex.css
stylesheet.css
responsive_tablet.css
responsive_mobile.css
responsive_default.css
responsive.css
index_home.css

OK, modifying positions, screen displays, resolutions and such seems to be more difficult. I guess, I rather should avoid touching anything else than the colors to not to mess up Zen Cart completely.

So when I modify a website / Zen Cart outside of the life website on XAMPP and I want to update the live site with the modifications I made is there a risk that modifications / changes done by customers, visitors (accounts, etc.) on the live site are overwritten?

Thank you very much again.

[Website Rob]

So when I modify a website / Zen Cart outside of the life website on XAMPP and I want to update the live site with the modifications I made is there a risk that modifications / changes done by customers, visitors (accounts, etc.) on the live site are overwritten

Not sure what you are asking? Customers, visitors can only affect the database as it records what was done. That's OK and the way you want it to work.

[Cletus-]

Not sure what you are asking?

Sorry for this.

visitors can only affect the database as it records what was done.

May be such and other entries might be overwritten when updating the live site with the XAMPP site, but obviously it cannot.

Many thanks