New Skin Best Practices

I want to take the 2.x Electro skin and modify it with different css styles, images, etc. What is the best practice for making these changes so that future updates don’t override my design changes?



I can’t seem to find a “standard” recommended by CS-Cart support, so your input would be helpful.

Create a copy of the folder /electro/ in the /skins_repository/ folder and rename it “mydomain”.



Edit the manifest.ini file and put the name of your new theme in it, save it.



Now when you go to upgrade and overwrite all the files on your system, the folder called /skin_repository/mydomain will still exist.



You will have to edit the manifest.ini file again so your skin shows up in the admin drop down for skins, but none of your tpl/css/image files will have changed.



When you enter the admin backend and choose your “mydomain” skin it will write a copy of all files to /skins/mydomain/ and your template is back to where it was.



Be aware however that from version to version tpls/css etc may have changed in electro and your original copy of it may not full work 100%.

Have a look here:



[url]http://docs.cs-cart.com/design-layout/common.php?dispatch=docs/view&node_name=design-changes[/url]



Bye.

[quote name=‘indy0077’]Have a look here:



[url]http://docs.cs-cart.com/design-layout/common.php?dispatch=docs/view&node_name=design-changes[/url]



Bye.[/QUOTE]



Since it’s not practical to hook template and css changes per se, how would you recommend I go about modifying the electro template? Would you recommend I make a new copy of it as was recommended or just modify the default Electro template and leave the name the same?

[quote name=‘knoxbury’]Since it’s not practical to hook template and css changes per se, how would you recommend I go about modifying the electro template? Would you recommend I make a new copy of it as was recommended or just modify the default Electro template and leave the name the same?[/quote]



Yes, make it like the ETInteractive said. About hooks, the hooks are not there to “hook” the template, but for core files when they need to be modified.

[quote name=‘indy0077’]Yes, make it like the ETInteractive said. About hooks, the hooks are not there to “hook” the template, but for core files when they need to be modified.[/QUOTE]



But the link you sent seems to say the opposite of what ETInteractive said. Your link says to use the skins directory NOT the skins_repository directory.

[quote name=‘knoxbury’]But the link you sent seems to say the opposite of what ETInteractive said. Your link says to use the skins directory NOT the skins_repository directory.[/quote]



You have to understand what is “skin directory” and “skins_repository” for.


  1. “skin directory” serves the final (generated) template
  2. “skins_repository” serves the template install files



    I think so…

[quote name=‘indy0077’]Yes, make it like the ETInteractive said. About hooks, the hooks are not there to “hook” the template, but for core files when they need to be modified.[/QUOTE]

This is absolutely incorrect. There are both code hooks and template hooks - for instance, this one from /skins/YOURSKIN/customer/bottom.tpl:

```php {hook name=“index:bottom”}

{$lang.copyright} © {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}. {$lang.powered_by} {$lang.copyright_shopping_cart}


{/hook} ```
You could substitute your own layout for this section by creating the file /skins/TOURSKIN/customer/addons/my_changes/hooks/index/bottom.override.tpl.

Bob

[quote name=‘indy0077’]You have to understand what is “skin directory” and “skins_repository” for.


  1. “skin directory” serves the final (generated) template
  2. “skins_repository” serves the template install files



    I think so…[/QUOTE]



    That still doesn’t help explain why ETInteractive said to use the repository directory and your link says NOT to use the repository directory.

In order to see your template modifications, you need to make changes in the skins directory.



I would start using ET’s method just to be consistent with the way other skins work. One other tip, once you get the working skin to where you like it, you can copy it over to the skins repository so you have a backup should you decide to tinker some more.



Bob

[quote name=‘jobosales’]This is absolutely incorrect. There are both code hooks and template hooks - for instance, this one from /skins/YOURSKIN/customer/bottom.tpl:

```php {hook name=“index:bottom”}

{$lang.copyright} © {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}. {$lang.powered_by} {$lang.copyright_shopping_cart}


{/hook} ```You could substitute your own layout for this section by creating the file /skins/TOURSKIN/customer/addons/my_changes/hooks/index/bottom.override.tpl.

Bob[/quote]

Yes you'r right but I meant others:
If he makes a "copy" of a template and renames it to anything else and modified the copy, then doesn't need any hooks. If the new template need a modification of a file that isn't her template directory, then should be used a hook.

Right?

I can’t seem to get a simple answer on exactly how I should go about changing the electro template. I guess CS-Cart doesn’t have a standard?!



Is there anyone else that can help clarify this for me?

Looks pretty self explanatory from my post. not sure what isn’t clear?

Uh, maybe because other people said something different. I still don’t know if I should use hooks or change the files directly, I don’t know if I should use the skins_repository or skins folder, I still don’t know if my changes will be overwritten if I edit the files directly, etc.

Any file that exists in a default folder can get overwritten.



ie /electro/styles.css



if you make a new folder called /knoxbury/ and copy files, none of those will be touched.



you can do either skins_respository or skins, as long as its a different folder name.

understood on that . . . but I still don’t know whether to use hooks or not use hooks.

Same idea…in the past , upgrades have broken hooks as well as tpl files. either way you will have to take the changes done on electro and apply them on knoxbury skins if and when you upgrade.



I cant say which one is more work because you never know what CS will change.

I thought the whole idea of hooks was so that template changes were NOT overwritten.

It’s probably the right way to go, but something can and will always “break”

Hello people,



This looks like a very good thread.



I am studying how to make adjustments in CSS and html from the store, but I had worked in a costumer skin in september 09 (I don’t remember the version, maybe 2.05… less than 2.08).



I modified a lot of things, specially images and colours.



I haven’t understood what you are talking about HOOK. What does it mean?





In spite of all, I did this:



1st: copied the directory called “electro” from the OLD store (in the server) to my computer.

After this, I renamed the archieve “minifest.ini” like ETInteractive suggest. I called it “cia skin”

After this, I uploaded all data (directory ciaskin) to the skins/ directory in the NEW VERSION store (2.0.11).



When I tryed to see this option (cia skin) in the ADMINISTRATION PANEL, It was not there.




2nd: I uploaded the directory “ciaskin”(old store) to the “var/skins_repository” (new store) and it appeared in the ADMINISTRATION PANEL like you can see in the image, in attach.







All translation I had in the COSTUMER PAGE (index.php), it has not came with the skin or the TRANSLATION data, when I export in the old version and import in new version.



Categories haven’t came, too. I will need to insert all them, again.





I think there is a way to IMPORT everything, but I don’t know how yet. I am studying docs. Maybe in a few time I will help more.





Tks!

ciaskin.jpg