X-Cart Design
Skinning x-cart with a custom design takes intricate knowledge of x-cart's template system. If you do not have this knowledge prior to your design integration, you will need to learn it along the way; to apply design changes it is necessary to know what template files change which content areas, and to know what affect changes in one area may have in other areas of x-cart; by editing dialog.tpl for example, you will edit the content area of both the x-cart customer and x-cart admin areas.
By using "Webmaster
Mode," which can be activated from your admin section, a popup will appear on each page load telling you what template files are being used. Webmaster Mode will help assist you in understanding the template structure and locating template files for specific areas. This tutorial will provide implementation tips and help guide you through some of the most important template files to assist you in implementing a custom design into x-cart.
Implementation Tips
When removing code you can use {* and *} around the code to prevent it from displaying, without physically removing it from your file. By leaving the content in your templates you have it available for future reference or if the change needs to be undone.
Be careful when commenting out or removing include files, as you may remove very important information. If you remove the include of cart.tpl for example, you are not only removing the mini-cart contents, you are also removing the users access to order history, modifying their profile etc. To prevent this, always carefully evaluate any code you comment out or remove.
The language used in x-cart is sometimes rich in techno-jargon and at times can be broken English. I recommend that you keep your "Languages" admin section open as you implement your site design, and change language variables as you come across them.
When uploading images, you can increase your file organization by creating a "custom" folder inside the skin1/images/ folder. You can then reference images using {$ImagesDir}/custom/your-image.gif in your template code. Note that by using the {$ImagesDir} variable instead of hard-coding your link, you make it easier to change image locations, switch servers, move domains,
etc. in the future.
When creating images, you can assist your SEO efforts by giving them names that include your sites keywords.
Rather than hard-coding links within your templates, you can use {$http_location} such as: <a href="{$http_location}/cart.php ">Link to Cart</a>. To link to files within your skin folder you would use {$SkinDir}, such as: {$SkinDir}/skin1.css.
The Template Files
The design files of x-cart are located in a folder called skin1. The files are .tpl files and can be edited using a text based program like notepad or UltraEdit and downloaded/upload with an FTP program.
The most important files:
The lost files:
skin1/customer/home.tpl is loaded when the customer side of the site is accessed (with the exception of the Fast Lane Checkout if enabled). This is the main layout file which includes other necessary templates.
skin1/rectangle_top.tpl controls the width of your site and also implements the "Container" css class for formatting. This file is used by both the customer and the admin section, so if you want your admin and customer areas to differ in width, you'll want to make some changes here. What I tend to do here is copy the contents of
skin1/rectangle_top.tpl directly into the skin1/customer/home.tpl file, replacing the {include file="rectangle_top.tpl"} include. I then manually edit the code to change the width of my customer section. While you could use if statements to determine what section is being loaded, I prefer the ease of code separation.
skin1/rectangle_bottom.tpl contains the closing tags of the rectangle_top.tpl code, so I tend to similarly replace the include {include file="rectangle_bottom.tpl"} in the customer/home.tpl file with the files contents to maintain code integrity with the separation from the removal of the rectangle_top.tpl include file.
skin1/skin1.css is the main x-cart css style file for the customer side of the site. When first beginning your layout implementation, I suggest editing your main font in the "BODY,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT" class, implementing your background color into the "HTML,BODY" class, and modifying your link formatting by editing the "A:" class. It can also be
useful to go through this css file and make substitutions for the colors and formatting you see, so that they more closely resemble your desired layout; these can then be fine tuned later.
If editing the left or right columns, there are padding put on the columns with the classes VertMenuLeftColumn and VertMenuRightColumn's in the skin1.css file.
skin1/head.tpl is responsible for the main header area of your x-cart's customer side. It is a complicated file that has conditional statements for things such as language, search, speedbar, sales-n-stats, fastlane checkout and more. Due to the complexity of the code, I find it best to remove the code from head.tpl and place it into a temporary
file. I
then drop the html code from my custom header into head.tpl, and implement the necessary code from the original head.tpl into my new code.
skin1/menu.tpl creates the display area that surrounds each section of the side navigation(s), we look at menu.tpl. This file is passed a title and content, and is responsible for all the side content blocks. By editing this file you will alter it everywhere that it is used, including the admin section. If you alter this file by modifying only the skin1.css class's for the dialog, then your
customer and admin sections will differ because they use separate css files. The dingbat images are passed when the menu.tpl is included, but do not have to be displayed.
You can differentiate your customer/admin sections by using code similar to:
{if $usertype eq "C"}
Customer Code
{else}
Other Areas Code (Admin/Fulfillment etc.)
{/if}
skin1/dialog.tpl forms a title and frame around main content areas of your x-cart. This works similar to how menu.tpl operates for providing side navigations.
skin1/meta.tpl holds information that is displayed between your <head> and </head> tags and is used in all areas of x-cart (admin/provider/partner/customer).
skin1/buttons/* Before you begin the journey called editing buttons in x-cart, you should be warned - a submit button whose CSS code previously looked complex will soon be a pleasant memory. I've worked with a lot of software and never have I before seen a program that requires a separate manual instructing users how to add/modify a button, but this could take up a tutorial of it's own (see the
skin1/buttons/button.tpl file
to see what I mean); fortunately for you however, this overview will help. In general terms, x-cart uses lines of code to include button files in the skin1/buttons folder, such as skin1/buttons/add_to_cart.tpl, and passes variable values to those files. Those files then do another include of button.tpl, passing it the originally passed variables and sometimes hard-coded values as well.
This is important to know because the variables passed will determine the look of the button.
To simplify things, there are two main button types, an actual button, or a text link followed by an arrow button. These buttons are differentiated by the include of style="button", i.e.:
 |
{include file="buttons/delete_item.tpl" href="cart.php?mode=delete&productindex=`$products[product].cartid`"} |
Edit the classes: SimpleButton, Button.
Change the /skin1/images/go.gif image. |
 |
{include file="buttons/delete_item.tpl" href="cart.php?mode=delete&productindex=`$products[product].cartid`" style="button"} |
The easiest way to edit this button, is to create your button in a graphic program and chop it up into 3 images:
/skin1/images/but1.gif (left side)
/skin1/images/but2.gif (right side)
/skin1/images/but_bg.gif (middle background)
To change text and button size, you can then edit the classes: ButtonTable
ButtonSide, Button |
An important thing to not here, is the the text of both buttons uses the same CSS button. So in the example above, if I were to change the font of "Delete Item" to white to appear white on dark orange, it would also appear white on a white background in the arrow button link and thus become invisible.
skin1/customer/main/welcome.tpl provides the content of your main (home) page is displayed with this file.
skin1/customer/main/product.tpl controls the product details display by displaying the necessary product information and including other necessary files.
skin1/modules/Fast_Lane_Checkout/home.tpl provides similar functionality to skin1/customer/home.tpl except it is used in the checkout process.
skin1/admin/home.tpl or skin1/single/home.tpl If you use the GOLD version of x-cart your main admin template file is skin1/single/home.tpl. If you're using x-cart PRO, then your main admin file is skin1/admin/home.tpl.
skin1/fulfillment/home.tpl provides similar functionality to skin1/single/home.tpl except it is used in the fulfillment area.
skin1/dialog_message.tpl is used to display messages and errors when triggered in the admin. It's not uncommon to see a nicely skinned x-cart trigger an error (such as on registration) and display the stock default error layout.
skin1/customer/main/payment_wait.tpl is displayed when a user submits an order and is waiting for the payment to be processed. If not addressed after implementing a design, often this file can display text that is similar in color to the background color making it difficult to read.
skin1/images/companyname_small.gif this often forgotten image displays the company logo on invoices.
Article copyright 2007 WebsiteCM.com and may be republished provided all content is left intact including author information, copyright notice and website links.
Site Map
Previous: 
