We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.
- This article applies to CS-Cart versions:
Visual representation is generated by template files. All operational CS-Cart Smarty templates are located in the skins directory (NOT in the var/skins_repository directory, where backup copies of templates are stored) of the CS-Cart installation. The directories of the installed color schemes, i.e. "basic", "default_blue", "aquarelle_red", etc. are placed in this directory.
All color schemes contain the directories customer and mail. The files of the customer directory are responsible for the storefront display, whereas the email directory has e-mail templates in it. In addition to these two directories, the basic skin has one more directory (the admin directory), which is responsible for the administration panel.
Templates related to the storefront are located in the skins/SKIN_NAME/customer directory, where SKIN_NAME is the name of the currently active template.
|Storefront skin directory:||CSCART_DIRECTORY/skins/SKIN_NAME/customer/|
|Storefront CSS files:||
|Storefront basic template file:||CSCART_DIRECTORY/skins/SKIN_NAME/customer/index.tpl|
|E-mail template directory:||CSCART_DIRECTORY/skins/SKIN_NAME/mail/|
|E-mail invoice template:||CSCART_DIRECTORY/skins/SKIN_NAME/mail/orders/invoice.tpl|
Two ways to make changes
There are two ways to carry out design modifications in CS-Cart. The first way is to add the necessary modifications to a new file and 'hook' them into CS-Cart, while the second one is to edit directly *.tpl and *.css files.
Let's assume you need to use the following hook:
Its name is order_management:product_info. So you will need to create the folder order_management in the skins/SKIN_NAME/customer/addons/my_changes/hooks directory and add a template with all the necessary changes to this newly created folder. The template will have the name:
product_info.pre.tpl — if the changes must be added before the hook
product_info.post.tpl — if the changes must be added after the hook
product_info.override.tpl — if the changes must override the hook block
After that it is necessary to make sure that the My changes addon is enabled in the CS-Cart admin panel, because only in this case the changes will be applied.
However, when it is required to edit *.tpl files, you can find out exactly what templates you need to modify by using the customization mode (enable the mode in Design->Design mode). Point the mouse at the icon of the necessary area and all the templates responsible for this area will appear in a pop-up box. If you click on a template, it will be opened in a CS-Cart built-in template editor. Also in the editor you will see the template tree (if any) for the selected area.
Storefront design template scheme - gives the general idea of the storefront template scheme
Smarty debug console - explains what Smarty debug console is and what data it provides
Examples of design changes - most frequently asked design changes
HTML basics - gives general knowledge of main HTML tags
CSS basics - shows how you can improve content accessibility by using Cascading Style Sheets (CSS)
Smarty basics - provides basic information about Smarty, web template system written in PHP
|<< Read previous||Read next >>|