Creating a New Template

[g2ktcf]

If you were to create a new template, which template would you clone as a base? My assumption is that I would use the Template Clone plugin for creating the new base.

I have the Fluorspar template and I have some tweaks I want to make for that specific template. But I also have seen some competitors shops that seem to be cleaner and I want to experiment with other possibilities.

[lat9]

I'll suggest the "Bootstrap 4" template (https://www.zen-cart.com/downloads.php?do=file&id=2191). It's standards-based and 'fresh'.

[dbltoe]

I'll add the suggestion to clone it, then work on it. Gives you a base to compare when things go bump.

[g2ktcf]

I'll add the suggestion to clone it, then work on it. Gives you a base to compare when things go bump.

I was thinking two stages. One, use Clone tool on Fluorspar to tweak some colors. Stage 2 would be to clone Bootstrap and see what I can break. :)

[dbltoe]

Please note that 90+% of all templates are going to have glitches and problems from the gitgo. Bootstrap is probably the closest to store ready but will need contrast fixes prior to launch.

We (JEANDRET) are working on getting it compliant for a customer. Trying to decide whether to provide it to the community like template_default (mixed colors to show sections affected) or just make the out of box version itself compliant.

We've fixed four on the demo but there are still several. https://wave.webaim.org/report#/http...eandret.com%2F

Don't let that report scare you away. One fix will fix ~80 of those.

One rule of thumb for contrast is in buttons. If you swap the background and foreground on hover, you will maintain contrast. You just need to make sure both of those contrast with the space around the button.

[g2ktcf]

I did get the template clone plugin installed and working. This is a downright LUXURY! Talk about a great tool.


I went to a competitors site and was awed by the clean lines and its brightness. So, I have taken the rather DARK Fluorspar template and replaced all the dark colors in a medium pink fading to white. This pairs well some of the medium dark grays and I get really good contrast. What I really like, is that I can just clone the template a second time, and have alternative themes and I can change at will.

I am still learning how to use Chrome's developer tools to find where all the settings are as well. I have removed quite a bit of the "cluttered" borders around borders in the product grid layout and things are looking so much better. I am close to pushing these changes out to production now! I am literally excited by what I have learned.

Thanks Guys!
Chris

[g2ktcf]

and now a hiccup that I can honestly not understand.

I had all the css changes in my localhost version of my store. So, I figured, I could just copy those css files (I made backups lol) into the template\css directory and all of those changes would be live. Nothing happened. So, I figured this was a cache issue so I did Ctrl F5 to force the page to reload. Same result.

I am scratching my head on this one. I made extensive modifications to three css files but its like I did nothing.

Thoughts?

[swguy]

- Are you sure your uploads actually worked? Download those files again (using FTP) and compare to your localhost copies.
- Is the hoster doing some kind of caching? Do you have caching on your site? Sometimes CNTRL-F5 doesn't work as expected because of other factors. Use right click -> View Page source, then find your css file and load it directly in the browser, then compare it to what you have locallly.

[mc12345678]

Could also again clone on the live site and activate the new clone so that the paths to the files are different and need to be loaded regardless the template. Kind of an overkill almost, but...

[g2ktcf]

- Are you sure your uploads actually worked? Download those files again (using FTP) and compare to your localhost copies.
- Is the hoster doing some kind of caching? Do you have caching on your site? Sometimes CNTRL-F5 doesn't work as expected because of other factors. Use right click -> View Page source, then find your css file and load it directly in the browser, then compare it to what you have locallly.

I was wondering about the site caching. I will check into that. I did notice that file sizes and dates changed in WinSCP. But I did not try downloading to verify them.

The good thing is that I found some other areas that I had to fix. I have all the changes made now and am ready to try again.

Thanks!