Design guide

If you decide to change the store outlook by yourself you should edit “*.css” and “*.tpl” files. All operational CS-Cart Smarty templates are located in 'skins' directory (not in SKINS_REPOSITORY directory, there is backup copy of templates stored) of your CS-Cart installation. There are subdirectories with installed color schemes, i.e. "default_blue", "aquarelle_red", etc. There are 3 sub-directories for each type of users and a directory with mail templates in it. I.e. templates related to customer front-end are located in 'skins/CUSTOMER_SKIN_NAME/customer' directory, where CUSTOMER_SKIN_NAME is the name of the skin that is active in the front-end now. You can specify the name of the skin on “Skin selector” page in the back-end. Từ khóa: Changing store outlook,template scheme

6. Customization CS-Cart shopping cart software allows you to change the store outlook by yourself in accordance with your taste having some knowledge in HTML-language only. It is possible due to the reason of using of Cascading Style Sheets and Smarty Template Engine. This chapter is aimed to help you in case of the changing design by yourself. Also you can find HTML, CSS and Smarty basics there. 6.1 Changing template design 6.1.1 Storefront design template scheme 6.1.2 Smarty debug console 6.1.3 Design changing example 6.2 HTML basics 6.3 CSS basics 6.4 Smarty basics 6.1 Changing store outlook If you decide to change the store outlook by yourself you should edit “*.css” and “*.tpl” files. All operational CS-Cart Smarty templates are located in 'skins' directory (not in SKINS_REPOSITORY directory, there is backup copy of templates stored) of your CS-Cart installation. There are subdirectories with installed color schemes, i.e. "default_blue", "aquarelle_red", etc. There are 3 sub-directories for each type of users and a directory with mail templates in it. I.e. templates related to customer front-end are located in 'skins/CUSTOMER_SKIN_NAME/customer' directory, where CUSTOMER_SKIN_NAME is the name of the skin that is active in the front-end now. You can specify the name of the skin on “Skin selector” page in the back-end. • Customer storefront interface directory: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/ Customer storefront interface CSS file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/styles.css Customer storefront interface main template file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/index.tpl For more information about storefront interface template files see the chapter Customization –>changing Store outlook->Storefront design template scheme. • E-mail template directory: your_shop_directory/skins/CUSTOMER_SKIN_NAME/mail/ The only file that should be edited is invoice mail template: your_shop_directory/skins/CUSTOMER_SKIN_NAME/mail/orders/invoice.tpl But if you are satisfied with its content you should change the logo image only: your_shop_directory/skins/CUSTOMER_SKIN_NAME/mail/images/invoice_logo.gi f You can add information about your company that will be used in e-mails using the following path Administration->Settings->Company. 6.1.1 Storefront design template scheme For better understanding of the template scheme you should know that every structural element of the graphical interface is defined by its own template file. Different elements of the interface can consist of the other elements, thus the total template scheme becomes tree-like. The general template file in this structure is ‘index.tpl’ (this file is the first in the bifurcation), which includes two other template files: top.tpl – template file of the top of the site, ‘main.tpl’ – template file of the central part of the site, ‘bottom.tpl’ – template file of the bottom of the site. index.tpl: Template files ‘top.tpl’ and ‘main.tpl’ also include other templates, as it schematically shown in the Figures 111 and 112. Figure 111. Top.tpl elements … <table cellpadding="0" cellspacing="0" width="100%" style="height:100%" border="0"> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" width="100%" border="0"> <tr> <td>{include file="top.tpl"}</td> </tr> <tr> <td>{include file="main.tpl"}</td> </tr> </table> </td> </tr> <tr> <td valign="bottom">{include file="bottom.tpl"}</td> </tr> </table> … Figure 112 Main.tpl elements You can use the Smarty template debugging console while editing the template files. Smarty template debugging console clearly demonstrates the tree of the processed template files (for more information see the chapter Customization->Changing store Outlook->Smarty template debugging console). Also you can use the Template Editor - a powerful tool which is included into the CS-Cart Shopping Cart Software (for more information see the chapter Administration->Look and Feel->Template Editor). . 6.1.2 Smarty template debugging console The Smarty template debugging console is a tool which helps users to change the store outlook by editing the template files (Figure 113). You can enable the template debugging console by ticking off the ‘Template debugging console’ checkbox (Administration->Settings-> General). The Smarty template debugging console includes the following parameters: - “included template and config files (load time in seconds)”; This section includes the information about the processed template files. Using this section you can better orient yourself in the template structure. Also load time will about files which are needed the optimization. - assigned template variables; This section is displayed the Smarty variables assigned by user. - assigned config file variables (outer template scope). This section displays predefined Smarty variables. For more information about Smarty template engine see the chapter Customization-> Smarty basics. 6.1.3 Design changing examples Let’s take a look at some simple examples of changing template files helping to change your store outlook. Example 1. You need to put your shop logo (‘your_shop_logo.gif’ (263x88)) instead of the CS-Cart logo: 1. Copy ‘your_shop_logo.gif’ file into the following directory: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/images 2. Open in the template editor the following file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/top.tpl 3. Change the following string: ‘top.tpl’ before: ‘top.tpl’ after: Example 2. You need to change the design of the top of the site as it is shown in Figure 113. … <img src=”{$images_dir}/cscart_logo.gif" width="263" height="88" border="0" alt="{$settings.Company.company_name"> … … <img src="{$images_dir}/your_shop_logo.gif " width="263" height="88" border="0" alt="{$settings.Company.company_name"> … Figure 113. Example of design changing of the top of the site 1. Open in the template editor the following file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/top.tpl 2. Change the order of the top elements: firstly menu bar, which is defined by the file ‘top_menu.tpl’, must be displayed. So, the changing of the elements order could be schematically represented as follows: ‘top.tpl’ before: ‘top.tpl’ after: Example 3. You need to change the style of all links on the site (links must have the orange color (#f27a00) instead of blue (#296dc1)). 1. Open in template editor the following file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/style.css 2. Change the style of all links by changing the following expressions: ‘styles.css’ before: <table> … </table> {include file="top_menu.tpl"} {include file="top_menu.tpl"} <table> … </table> ‘styles.css’ after: Example 4. You need to change the icon in the ‘Categories’ box header as it’s shown in Figure 114. Figure 114. Changing box icon example 1. Copy ‘your_icon.gif’ file to the following directory: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/images … a:link { color: #296dc1; text-decoration: none; } a:visited { color: #296dc1; text-decoration: none; } a:hover { color: #f27a00; text-decoration: underline; } a:active { color: #296dc1; text-decoration: none; } … … a:link { color: #f27a00; text-decoration: none; } a:visited { color: #f27a00; text-decoration: none; } a:hover { color: #296dc1s; text-decoration: underline; } a:active { color: #f27a00; text-decoration: none; } … 2. Open in the template editor the following file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/side_boxes/categ ories.tpl 3. Change the following expressions: ‘categories.tpl’ before: ‘categories.tpl’ after: Example 5. You need to set the site background to black color and site font to white color. 1. Open in the template editor the following file: your_shop_directory/skins/CUSTOMER_SKIN_NAME/customer/style.css 2. Change the following expressions: ‘styles.css’ before: ‘styles.css’ after: … {include file="common_templates/sidebox.tpl" title=$lang.categories content= $smarty.capture.sidebox icon="sidebox_icon_catalog.gif" sidebox_body_class="sidebox-body- white"} … {include file="common_templates/sidebox.tpl" title=$lang.categories content= $smarty.capture.sidebox icon="your_icon.gif" sidebox_body_class="sidebox-body-white"} … body,th,td,tt,p,div,span { color: #000000; font-family: tahoma, verdana, arial, sans-serif; font-size: 11px; } … body { background-color: #fbfbfb; } … … body,th,td,tt,p,div,span { color: #ffffff; font-family: tahoma, verdana, arial, sans-serif; font-size: 11px; } … body { background-color: #000000; } … 6.1 HTML basics HTML is a markup language. In general HTML is a set of instructions for a browser on how to display a document. A single instruction is called tag. HTML tag consists of the name and attributes. Each tag is enclosed in angle brackets (“<” and “>”). For example, <head> or <title>. Tag attributes define various properties for the tag. For example, the <img> tag takes a src attribute to provide the location of the image and an alt attribute to give the alternate text for those not loading images: An element has three parts: a start tag, content, and an end tag. The end tag includes a "/" after the "<". For example, the title element has a start tag, <title>, and an end tag, </title>. The start and end tags surround the content of the title element: Any HTML document starts with <html> and ends with </html>. Let’s consider the structure of an HTML document: The html element contains two elements: head and body. The head element contains information about the HTML document and it is not displayed in browser. It can contain the following elements: • <title></title> - element gives the document's title (displaying as a browser window title); • <meta></meta> - element provides metadata such as a document's keywords, description, and author. This information is used by search engines. • <link> - element defines document relationships. Any number of <link> elements may be contained in the head of a document. For example, In this case document styles will be loaded from the external style sheet file styles.css. • <style> - the style element embeds a style sheet in the document. Any number of <style> elements may be contained in the head of a document. <img src="cscart_logo.gif" alt="Copyright 2004-2005 CS-Cart. com"> <title>CS-Cart Shopping Cart Software</title> <html> <head> <title> CS-Cart Shopping Cart Software</title> <meta>Efficient solution for your e-business</meta> … </head> <body> … </body> </html> <link rel=stylesheet href=” /skins/CUSTOMER_SKIN_NAME/customer/styles.css” type=”text/css”> The body element contains the document content, which will be displayed in browser. It can contain the following elements: • <h1></h1> - heading of the document (you can change heading font size from h1 (the biggest) to h6 (the smallest)). • <i></i> - tag suggests that text be rendered as italic text. • <b></b> - tag suggests that text be rendered as bold text. • <u></u> - tag suggests that text be rendered as underlined text. • <q></q> - element is used for short, inline quotations. • <p> - element defines a paragraph. The closing tag for p is optional. • <br> - element forces a break in the current line of a text. • <table></table> - this element defines a table for multi-dimensional data arranged in rows and columns. For example, <table border=”1”> <tr> <td>Header 1</td> <td>Header 2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table> The table will be displayed in browser in the following way: Header 1 Header 2 1 2 <tr></tr> - the tr element defines a table row. <td></td> - the td element defines a data cell in a table. • <ul></ul> - element defines an unordered list. For example, As a result the browser will display the following list: • First list item • Second list item • Third list item <li> - the element defines the actual items of the list. • <ol></ol> - element defines an ordered list. <ul> <li>First list item <li>Second list item <li>Third list item </ul>