X-Cart forums

[balinor]

Template editing overview

X-Cart uses Smarty templates to display all of the pages in X-Cart. Each template controls a different part of the site, so there is no central file to edit to change the look of your site. I will list the major templates in the next section, along with what they control. You can also use Webmaster Mode to show you which template is which. You can read more about Webmaster Mode in the manual.

The templates themselves are made up of HTML/CSS and Smarty. Dreamweaver has a plug-in that recognizes Smarty tags, which may help you: http://smartydwt.klitsche.org/

You need to be very careful when editing templates, as you can easily break the Smarty tags. Some pieces of a template only display when a certain condition is met. For example you may see a statement like this:

{if $usertype eq "C"}
a
{else}
b
{/if}

That essentially tells the browser to display 'a' if the usertype is C, or a Customer. Otherwise, it will display b. There are literally hundreds of these types of statements mixed in the templates. Soon you will get to know what each of them means. Good thread here on {if} statements: http://forum.x-cart.com/viewtopic.php?t=12234

Template Guide

Below are the major templates in X-Cart along what what each controls. All of them are located in your skin1 directory, and I'll group them by the folder they are in, starting with the root folder:

• auth.tpl - this is the side menu login box. Shared between admin and customer side
• authbox.tpl - this is the side menu login box for logged in customers. Shared between admin and customer side
• bottom.tpl - this is the 'footer' of the site. It contains the Powered by (poweredby.tpl) and 'copyright' text (copyright.tpl). The style of this row is controlled by the .bottom class in skin1.css
• copyright.tpl - the copyright year and store name in the footer
• currency.tpl - this controls the format of the currency. If you want to change the location of the symbol, this is the place to do it
• dialog.tpl - this is the main 'wrapper' of all content in the main window of X-Cart. It is essentially a table that contains a row for the title and a row for the content. It also has a border around it. By default, the title has a graphic background. This template is shared by the admin and customer sides, so again you may want to write an {if} statement to show a different version for each. The style of the border, title and box are controlled by the Dialogbox, DialogBorder and DialogTitle classes in skin1.css.
• dialog_message.tpl - this is that little confirmation dialog box that pops up at the top of the main window, mainly in admin.
• head.tpl - this is the 'header' row. By default, it contains the logo, tabs (which are in customer/top_menu.tpl), the search box (in customer/search.tpl) and language selector (if you have multiple languages). The admin side version of this file is head_admin.tpl
• help.tpl - this is the side menu help box containing links to the help pages. It also contains the code that automatically adds a link when you add a new embedded static page
• location.tpl - contains the code for the breadcrumb navigation (at the top of the main content area)
• menu.tpl - this is the 'wrapper' for the side menu boxes. It is similar in structure to dialog.tpl in that it has a title row and a content row. The style of the border, title and box are controlled by the VertMenu classes in skin1.css.
• meta.tpl - contains all of the meta tag info for the site
• news.tpl - the side menu newsletter sign-up box. Contains today_news.tpl
• pages_menu.tpl - the code that lists the embedded static pages on the side menu
• poweredby.tpl - Contains the 'powered by...' text
• printable.tpl - the print this page link
• product_thumbnail.tpl - controls the thumbnail of a product. DO NOT edit this template unless you know what you are doing!
• rectangle_top.tpl - this controls the overall width and height of your layout. By default, it is set to 100% high and 100% width. You can set it to a fixed width (like 900px) or a percentage. Keep in mind that this is a shared template between the admin and customer sides, so you might want to put in an {if} statement to show something different for each side.
• rectangle_bottom.tpl - this closes the main table of the 'wrapper' (counterpart to rectangle_top.tpl). It is shared by the admin side as well.
• skin1.css - this is the master stylesheet for the customer side. All of the classes that are referenced in the tables themselves are defined here. This is where you control the size and color of fonts, background colors, spacing, link colors, etc. The admin side is controled by skin1_admin.css.
• today_news.tpl - the side menu that shows the current news blurb

Customer sub-directory

• customer/categories.tpl - the side menu category template
• customer/home.tpl - this is the main template that controls the customer side of the store. In it are the main components of a web page including the <title> and <head> tags, along with the table structure of the actual layout. You will also see all of the other templates that are called within it. This is where you would move around the side menu boxes such as the news and categories menus and also where you would add anything that needs to be included in the <head> tags (such as tracking codes, javascript, etc)
• customer/home_main.tpl - controls what is displayed when in the main content area. A useful source for {if} tags as well.
• menu_cart.tpl - the side menu cart template and member options template
• search.tpl - the search box
• special.tpl - the side menu Special template
• tab.tpl - formatting for the Speed Bar tabs
• top_menu.tpl - within the head.tpl template, this template has the include for tab.tpl, as well as the company phone information

Customer/main sub-directory

• customer/main/cart.tpl - the main shopping cart structure page.
• customer/main/checkout.tpl - the checkout process structure NOTE: If you are using Fast Lane checkout, all of the templates for the checkout are in skin1/modules/Fast_Lane_Checkout
• customer/main/featured.tpl.tpl - the featured products template
• customer/main/minicart.tpl.tpl - controls the side menu minicart display
• customer/main/navigation.tpl.tpl - the page navigation menu (the little page numbers when you have products spanning more than one page)
• customer/main/order_message.tpl - the confirmation screen for checkout. Where you would place tracking conversion codes (Google AdWords, Yahoo, etc)
• customer/main/pages.tpl - the static page display template
• customer/main/payment_xx.tpl - these are the payment templates on the checkout screen
• customer/main/product_prices.tpl - - wholesale pricing grid on the product detail page
• customer/main/product.tpl - the product detail page
• customer/main/products.tpl - controls the products display under a category for a single column layout (if your setting in General Settings/Appearance options is empty)
• customer/main/products_t.tpl - controls the products display under a category for a multi-column layout (if your setting in General Settings/Appearance options has a number in it)
• customer/main/payment_wait.tpl - the screen you see when an order is submitted - it says 'Your order is being processed....'
• customer/main/register.tpl - the main user registration template
• customer/main/search_result.tpl - the advanced search screen as well as the search results display
• customer/main/send_to_friend.tpl - the send to friend template that appears on the product detail page
• customer/main/subcategories.tpl - this controls the sub-category display, and also is the 'wrapper' for the products display.
• customer/main/welcome.tpl - the display of the main content area on the home page. Calls the featured products template and where you would add anything you would want to appear only on the home page in the middle area (welcome message, slideshow, etc)

Main sub-directory

• main/error_xxxx.tpl - all of the error templates
• main/history_order.tpl - order history, order search (both admin and customer side)
• main/register_xxxx.tpl - all of the registration sections (billing, shipping, account, etc)

Misc

• mail/html/order_invoice.tpl - the invoice on the order confirmation screen and order e-mails
• mail/html/order_data.tpl - the product data on the invoice

Buttons - All of the buttons are controlled via the files in the Buttons sub-directory

Modules - All of the modules (bestsellers, reviews, gift certificates, discount coupons, etc) all have their own folders in the skin1/Modules folder.

Mail - All of the mail templates are in mail/ and mail/html. Most of you will use mail/html. All of the text in these templates can be controlled via the 'languages' area, so unless you want to edit the actual layout of the e-mail, you won't need to edit them.

Please see the next post for some template editing guidelines....

[balinor]

General template editing notes

- Most of the text in X-Cart (such as the welcome text, error messages, titles of pages, button labels, etc) are controlled with Language Variables. The manual covers this fairly well. You can edit these variables in Webmaster Mode (by clicking on the green text) or by clicking on Languages in your admin menu.

- When adding new content or formatting existing content, try to keep all of the formatting in the CSS file. For example, instead of this:

<td bgcolor=blue> (the old way of doing it)
use this:
<td class="test">

and add .test {background-color: blue;} to your CSS file. Keeping the formatting in the CSS file decreases your page load time, and using the most current code keeps your pages displaying correctly in all browsers. (note: change 'test' to a class name that will be informative so you can keep track of them easily)

- When calling images, be sure to use Smarty. Upload all of your graphic images (not the product images, they go elsewhere) into the skin1/images directory and call them using this format: <img src="{$ImagesDir}/imagename.jpg" alt="Alt text here" />

That keeps them from causing security warnings when the page is in secure mode.

- To 'comment out' a line of code (if you don't want it to display, but might need it later), use this format:

{* commented out code *}

- You can edit templates in X-Cart itself, via FTP or in a text editor. Don't edit them via FrontPage or Cpanel, as extra code may get inserted that will screw up your layout

- There is always a copy of the original template in skin1_original, although I recommend making incremental backups so you don't lose EVERYTHING you have been working on.

One more thing - it is tough to work on X-Cart without the proper tools. You should be using Firefox with these extensions:

- Firebug
- Colorzilla
- MeasureIt
- Web Developer Toolbar

Hope this answers some of your questions. Enjoy!