Generally, you need to set the template for each language. You can change the template used by your shop via Tools | Template Selection in the administration panel. The screen lists the installed templates. The template in use is selected by default.

To change the template for a language, click on that language. Then, you see a right-arrow in the action column for that language. On the right, information about the selected template is shown. To apply the template, click on the edit button, select the template of your choice from the drop-down list, and then click on the update button.

To apply your newly created template, select PACKT Publishing from the drop-down list, and click update. Your new template will be applied. As you have still not changed much in the template, it will look similar to the previous, classic, template.

If the language for which you want to assign a template, is not available in the list, click on the New Language button. Then, select the template name and language from the drop-down list. If the preferred language is not available in the drop-down list, you will need to add it via Localization | Languages.

A Zen Cart shop layout consists of left and right column sideboxes, a header, a footer, and the main content in the middle column. You can define which sideboxes will be shown where. You can also choose the width of the left and right column sideboxes. The following sections will show us how to do this.

Layout Settings

A wide variety of layout settings can be defined via Configuration | Layout Settings. The screen provides an array of configuration options for defining the column widths and other layout characteristics.

The column width for the left and right boxes can be defined in the Column Width - Left Boxes and Column Width - Right Boxes fields respectively. The default width of these boxes is 150px. You can extend this setting to whatever width you prefer, for example 200px, based on the availability of screen space.

Breadcrumbs (showing our current location) status can be specified in the Define Breadcrumb Status field. Although the default value is 1, you may set this value to 2, which will show the breadcrumb on all pages except the homepage. In fact, showing Home on the homepage looks odd, so this should be turned off for the homepage. You can also set the breadcrumb separator in the Bread Crumbs Navigation Separator field.

You can hide the left or right column by setting the Column Left Status - Global and Column Right Status - Global fields to 0.

If you want to show the categories on the homepage, you must change the Categories - Always Show on Main Page field's value to 1. To speed up the page loading, you may also be tempted to use CSS buttons, instead of gif or jpg image buttons, to speed up the page loading. Set the CSS Buttons field's value to Yes to use the CSS buttons.

Showing/Hiding Sideboxes

The layout of the store front-end can be defined via Tools | Layout Box Controller. Clicking on this, you will see the boxes and names of the files that can be assigned to the left, right or center position in the front-end.

Sideboxes are generally located in the includes/modules/sideboxes directory. All the files in this directory will be shown in the Tools | Layout Boxes Controller screen. You will find five fields to the right of each sidebox. You can change the value of these fields by selecting the sidebox and then clicking on the edit button to the right of the fields.

The configuration options are available for each sidebox:

• Left/Right Column Status: If you need to show a sidebox in the left or right column on the store front-end, select ON in this field. It is displayed on the left or right column, as you indicate in the Location field.

• Location: Once the Left/Right Column Status is indicated here, you have to indicate the column in which you would want to show the sidebox, whether left or right. For sideboxes with the Single Column Status ON, this selection will not be effective.

• Left/Right Column Sort Order: This field indicates the order in which the sideboxes will be shown in the left or the right column. A lower value indicates a position nearer the top, and a higher value moves it down.

• Single Column Sort order: This field indicates the order of the Single Column sideboxes. A lower value puts the sidebox nearer the top.

• Single Column Status: If you want to show a sidebox in the center column, you select ON in this field.

You can customize the location and order of the sideboxes through this screen. You can also hide or show the sideboxes in the left and right columns from here.

Another way of hiding some sideboxes from a page is to edit the page's template file. For example, if you want to hide the right column sideboxes on the Privacy Policy page, follow the instructions given here:

1. Open the file includes/templates/template_default/common/ tpl_main_page.php in your favorite text editor.

2. Find the line which reads as:

   if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
   $flag_disable_right = true;
   }
   

3. Change the above line to:

   if (in_array($current_page_base,explode(",",'privacy, contact_us,shippinginfo')) ) {
   $flag_disable_right = true;
   }
   

   Note that the names of three pages have been entered here. For these pages, the right column sideboxes will not be shown. You can add more page names here separating them with a comma (,).

4. Save the file as includes/templates/packt/common/tpl_main_page.php.

5. Open your browser and point it to http://yourdomain.com/index.php?main_page=privacy. The page will now look like the following screenshot:

   

The Zen Cart templates are located in the includes/templates directory. The typical structure of the templates directory is shown in the following figure. Note that by default there is a default template named template_default. This template contains most of the files needed for any template, and can be used as a base for all new templates. Therefore, it is wise not to modify or replace any file in this template directory. Instead, create the new template in a separate directory and apply the template override. Through this template override, all new changes will be applied along with this default template.

The template files used in Zen Cart provide the structure and layout of the various pages of your cart. They make use of the definitions from your language files.

The template files of Zen Cart are located in the includes/templates/template_default directory under the installation root of the shop. Template files have a tpl prefix (for example, tpl_filename.php). They provide the structure and layout of the various pages of a Zen Cart shop.

You will find three types of template files:

Besides these three types of template files, there are also CSS stylesheets and graphics files in the template directory. Editing the template and CSS files will not be too hard as most of the sections in those files are commented for your understanding.

Zen Cart uses CSS for layout and display of the store's front-end. There are several CSS stylesheets for different purposes. Generally, CSS stylesheets are located in the CSS folder within the template directory. You can change most of the layout and display characteristics, such as color, font, and so on, by editing these stylesheets.

The names of the stylesheets and their descriptions are given in the following table.

The stylesheets mentioned above are listed in the order in which they load. stylesheet.css always loads first, and should contain the majority of your CSS selectors. Files loaded later takes priority over previously loaded file(s).

Language-specific stylesheets are of great use while considering the localization of your store. As you know, fonts may need to be different for different languages. Fonts used for English will not be enough to display the contents in Bangla or in Hindi. For these languages, you need to define the bangla_stylesheet.css or hindi_stylesheet.css files. These files should contain only the site-wide changes that you want to make to stylesheet.css. For example, you may only need to change the background-image and font-family for Bangla or Hindi.

You can also set different stylesheets for different pages. For example, you may set a different background-image for different pages.

Let us consider an example for modifying a language file. Generally Zen Cart uses the language strings from the includes/languages/english.php file. You can make site-wide changes to this file. For example, you may want to adapt the language to suit a book store. As you sell only books, you can use 'Books' instead of 'Products', and also 'Publishers' instead of 'Manufacturers'. You can also change languages for specific pages. For example, you can change the language for the Featured Products page (featured_products.php) by applying overrides as follow:

Similarly, open the /includes/languages/english/index.php file and replace all instances of products with books and all instances of manufacturers with publishers. Also, replace all instances of models with edition.

Now, the Featured Products page of your Zen Cart shop will look like the following screenshot. Note that 'Books' is shown instead of 'Products'.

As with Language overrides, you can apply overrides to module files located in /includes/modules/sideboxes/. Each .php file in this folder represents a sidebox. If you want to make changes to a sidebox, the best way is to use an override. For example, in your book shop you may want to use a custom Information sidebox. Instead of modifying information.php, you can use an override. Follow the given instructions:

Whenever you develop a new module for this bookshop, you can put it in this directory. The module will override the modules in the other directories, when you apply the Packt publishing template.

Overrides can also be used for page-specific template files. Page-specific templates are located in the includes/templates/template_default/templates/tpl_*.php files. If you need to modify some part of a page-specific template, for example tpl_product_reviews_default.php, follow the given instructions:

The changes you have made to tpl_product_reviews_default.php will now override the previous design.

You may need to include additional definitions during customization of your Zen Cart. Additional definitions are generally kept in the includes/languages/english/extra_definitions/ folder. To add your own definitions, open your favorite text editor, create a definition file named my_own_definition.php and save it in an appropriate folder. Write all of the definitions that are needed for customization of your Zen Cart shop in this file.

Sometimes, you may also need to create extra data files for some modules or for customizing your Zen Cart shop. Follow the same method used for creating your own definition file. You can define extra data files and save these in the includes/extra_datafiles/ folder. For example, you have created a custom page (about_us) and need to reference the filename. You can do this by creating a new file (about_us_filenames.php) which will include the following:

<?php
// About Us Filename Define
define('FILENAME_ABOUT_US', 'about_us'),
?>

Now, save the file as /includes/extra_datafiles/about_us_filenames.php.

One of the benefits of using the override system is that you don't have to worry about over-writing your custom files when you upgrade to a later version, because all of your modified files are in the custom directories. If you do not use override, but directly modify the core files, it will be difficult to save or recreate your changes during an upgrade.

For safety, wherever you see a classic folder, you can add another custom folder, where custom is the name of your customized template. You can do all the changes in this custom folder, keeping the original files intact. This will help when you are upgrading to later versions.

After installation of Zen Cart you will find the Zen Cart logo in the header of the store front-end. In the main body, you will see 'Congratulations! You have successfully installed your Zen Cart E-commerce Solution'. An advertisement for the Zen Cart manual follows that. You have to customize this page before starting your online shop. In fact, the first step towards customizing your look and feel will be to change these texts and the logo of the store.

/*Replace this text with the headline you would like for your shop. 
For example: 'Welcome to My SHOP!'*/
define('HEADING_TITLE', 'Congratulations! 
You have successfully installed your Zen Cart™ E-Commerce Solution.'),

} elseif ($category_depth == 'nested') {
// This section deals with displaying a subcategory
/* Replace this line with the headline you would like for your shop.
For example: 'Welcome to My SHOP!' */
define('HEADING_TITLE', 'Congratulations! You have successfully 
installed your Zen Cart™ E-Commerce Solution.'),

define('HEADER_SALES_TEXT', 'Tagline Here'),

// page title
define('TITLE', 'Zen Cart!'),
// Site Tagline
define('SITE_TAGLINE', 'The Art of E-commerce'),

Changing the Header Image

The header image of Zen Cart is one of the first things you will want to change. By default, Zen Cart uses a graphic named header_bg.jpg for its header, but you have the freedom to change its name as you wish. To do this, create a new background graphic using an image editor—GIMP or Adobe Photoshop—and save that image as includes/templates/packt/images/header_bg.jpg.

Note

For Zen Cart customization, it is better not to change the original files. Zen Cart uses an override system which can be used to add customization to templates, modules, sideboxes, and so on. Let us start using the override system for the following exercises.

From Zen Cart 1.3.7.x, stylesheets are used to define the background image for the header. Therefore, you need to edit the stylesheet. Open the stylesheet.css and find the following lines:

#logoWrapper {
width:760px;
height:110px;
background-image:url(../images/header_bg.jpg);

background-repeat:no-repeat;
}

In the highlighted line above, specify the name of your header background image, for example, my_header_bg.jpg. Save the file as includes/templates/packt/css/stylesheet.css.

As Packt website does not use a header image, you can remove this as well. To do this, change the preceding code block to be as follows:

#logoWrapper {
width:90%;
height:110px;
background-color:#ffffff;

}

As www.packtpub.com uses a fluid design, you have to make it much more flexible by defining the width as a percentage. Instead of the background header, display a white background. Now, your store will look as shown in the following screenshot:

Before using any new image as background , make sure you resize its height and width to fit the header region. Also note that you can specify its height and width from this style declaration.

Adding a New Logo

You need to change the logo of your store to make it branded. One easy way to do this is to replace the includes/templates/template_default/images/logo.gif file with another logo.gif file of the same dimension. But often, you would want to do more by creating your own image of different sizes and in different image formats (that is, .jpg, .png). You may also want to change their position. Now, you are going to learn how to do this.

First, prepare your logo using an image editor of your choice. Save the image to includes/templates/packt/images/packt_logo.png.

Now, you need to adjust the height, width and logo name in the language file. To do this, open includes/languages/english/header.php and find the following lines:

define('HEADER_LOGO_WIDTH', '192px'),
define('HEADER_LOGO_HEIGHT', '64px'),
define('HEADER_LOGO_IMAGE', 'logo.gif'),

Make appropriate changes to these lines and save the file as includes/languages/english/packt/header.php. You have to do it for each language. For example, for the Bangla language, you have to copy header.php file to includes/languages/bangla/packt/header.php.

By default, the logo is left-aligned. This alignment is defined in includes/templates/template_default/css/stylesheet.css. Open the file and find the following:

#logo, .centerBoxContents, .specialsListBoxContents,
.categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}

Because this is a collection of several selectors (#logo, .centerBoxContents and so on), split this into two separate statements as shown here, so as not to interfere with the layout of the other sections:

.centerBoxContents, .specialsListBoxContents,
.categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}
#logo {float: left;}

To center the logo, use text-align: center; or to align it to the right, use float: right;

Save the files as includes/templates/packt/css/stylesheet.css. After adding the logo, the logo area will appear as follows:

If you open any page of your Zen Cart in a text editor, you will find that the page is broken into smaller pieces called 'classes'. The style for each class is defined in the stylesheet.css file. You can control the look of your shop by changing the fonts, colors, text sizes, borders, background images, and so on, by changing the class styles. You can change the colors by using standard HTML color numbers for the text and background colors. You can also change the text size by increasing or decreasing the size, and change the typeface by using a different font name.

For example, you want to change the font size and the color of the Tag Line. If you view the source code, you will find the tag line in following code:

<div id="tagline">community experience, distilled</div>

If you want to change its style—font, color, and so on—you have to change the style definition of your tagline ID in stylesheet.css.

To do this, open the includes/templates/packt/css/stylesheet.css file in your favorite text editor, and find the following lines:

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

Let us change its color and font as follows:

#tagline {
color:#6600FF;
font-size:3em;
font-style:italic;

text-align : center;
vertical-align: middle;
}

Now, reload the homepage in your browser. You will see the difference in the display of your tagline.

You have the freedom to edit the stylesheet. You can remove a CSS element, such as a border, simply by commenting out the line with a "/*" (slash, asterisk) at the beginning of the line and "*/" (asterisk, slash) at the end of the line. You can add new style properties and make your Zen Cart shop more attractive. But what you need to know to do this is how CSS works.

As you want to make the site similar to www.packtpub.com, you have to change its look and feel by changing its fonts and colors by editing stylesheets. The following changes are to be made to /includes/templates/packt/css/stylesheet.css:

#mainWrapper {
...
width: 90%; /* instead of 750px, we make it fluid */

...
}
#logoWrapper{
/* background-image: url(..);
background-repeat: repeat-x; */
background-color: #ffffff;
height:100px;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
...
background-image: url(../images/tile_back.png);
...
}
#navCatTabs li {
...
background:url("../images/tableftI.gif") no-repeat left top;

...
}
#navCatTabs a {
...
background:url("../images/tabrightI.gif") no-repeat right top;
...
}
#navCatTabs a.category-top {
...
background:url("../images/tabrightI.gif") no-repeat right top;
...
}
#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.png);
...
}
h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.2em;
color: #cd6601; /* for Packt */
}
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
...
/* background-image: url(../images/tile_back.png); */ /*for packt */
...
}
A.category-top, A.category-top:visited {
color: #008ccf; /* packt */
text-decoration: none;
}
.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.png);
...
}

After all of these changes have been made for the two image files, tile_back.png and tabrightI.gif, and these images are added to /includes/templates/packt/images directory, the site now looks quite similar to www.packtpub.com, though it may need some more tweaking. Look at the following screenshot:

Note that now the color scheme has been changed to look similar to Packt's website. The borders of the sideboxes also look similar to Packt's boxes. You may try to fine-tune its design after learning more about changing buttons and page layouts.

You can change the buttons and icons used in your Zen Cart shop. This will help you customize the Zen Cart shop as you wish. In Zen Cart, the buttons and icons are generally located in the following places:

Once you have generated the custom buttons and icons for your template, the names of these buttons need to be defined in includes/language/english/button_names.php. For each language, you need to set the names in this file. For example, the names of buttons specific to the Bangla language should be defined in the includes/languages/bangla/button_names.php file.

The editing of button_names.php will be straightforward. It has two sections: one for defining the button image files, another for defining alt text for those images. The following is a code snippet from button_names.php:

/** define the button images used in the project */
define('BUTTON_IMAGE_ADD_TO_CART', 'button_add_to_cart.gif'),
define('BUTTON_IMAGE_ADD_ADDRESS', 'button_add_address.gif'),
define('BUTTON_IMAGE_ADD_PRODUCTS_TO_CART','button_add_selected.gif'),
define('BUTTON_IMAGE_BACK', 'button_back.gif'),
define('BUTTON_IMAGE_BUY_NOW', 'button_buy_now.gif'),
...
/* ALT tags used for buttons */
define('BUTTON_CREATE_ACCOUNT_ALT', 'Sign Up'),
define('BUTTON_LOG_OFF_ALT', 'Log Off'),
define('BUTTON_ADD_TO_CART_ALT', 'Add This to My Cart'),
define('BUTTON_ADD_ADDRESS_ALT', 'Add Address'),
...

You can use your favorite image editor for creating the buttons in your language. The buttons may be saved as GIF, JPG or PNG, but if you are not using the same format and names as the original buttons, you need to edit the button_names.php file to reflect the new names of the buttons, and save this edited file in your language override directory.

Changing the layout of a template mainly involves changing its width and showing/hiding sideboxes. You have already learned about showing or hiding sideboxes. Now, you will learn how to change the width of a template.

In Zen Cart version 1.3.x, CSS are used for layout, instead of tables. Therefore, you only need to edit the main stylesheet for that template. When changing the width of a template, it is better to use an override. Open the /includes/templates/packt/css/stylesheet.css file and find the following style declaration:

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
}

The highlighted line specifies the width of the page. To make the template fluid, that is, fit it in the available browser window space, change its value to 100%. You could also choose any other desired value.

In Zen Cart version prior to 1.3.x, changing the width was tricky. For such a template open the stylesheet.css file for editing, and find the .centershop, TABLE.header, .main_page, and TD.headerNavigation declarations. In all the declarations, you will find a line saying, width: 750px !important;. Change the width in this line. Remember that all four instances need to be changed.

Page-specific templates are located in the /includes/templates/template_default/templates/ directory. For each page there is a tpl_*.php page. The layout of the page is defined in its related tpl file. You can change the template for each file by editing these files and applying overrides. For example, you may want to change the layout of the Product Information page. Information regarding a product is shown in this page when you click a product link. By default, this page looks like the following screenshot:

Note that the Add to Cart block is shown after the product description. You may opt to put this just after the product name to persuade customers to buy it. To do this, you need to edit the tpl_product_info_display.php file. Open it in your favorite text editor, and find the following block:

<!--bof Add to Cart Box -->
..... <
!--eof Add to Cart Box-->

Select the whole block and cut it. Now, locate the following block:

<!--bof Product Name-->
<h1 id="productName" class="productGeneral">
<?php echo $products_name; ?>
</h1>
<!--eof Product Name-->

Paste the <!—bof Add to Cart Box --> block just after <!—eof Product Name -->. Now save the file in your override directory /includes/templates/packt/templates/.

Refresh the page in your browser. Now, you will see the Add to Cart block just after the product name. You can edit other files in the same way.

The product catalogue in the Zen Cart shop consists of dynamically-generated pages. Of course, the product catalogue is the core of an online shop. However, besides product catalogs, a good shop also needs to have some static pages that describe such things as privacy policy, shipping & return policy, frequently asked questions, and so on. These pages generally do not change frequently and need to be linked to the homepage so that customers can access these pages whenever necessary.

A feature called EZ-Pages provides the flexibility of adding static pages to a Zen Cart shop in a fast and easy way. It also helps create links to other internal and external pages. You can also create related links to form a group or a chapter.

EZ-Page can be added to your store via Tools | EZ-Pages | New File in the Administration Panel. Options for creating an EZ-Page are shown in the following table:

After typing a page title, if you provide an internal or external link, it will be considered as a link, and not a page. In that case, the text you have typed in the HTML Content box will be ignored.

Let us start building a new template for Zen Cart by creating a new folder under includes/templates/. Let us name it Packt (or whatever you like). But remember to use underscore instead of spaces in a long name. Avoid using Book Shop. Instead, use book_shop or BookShop.

Under the packt template folder, create the following folders:

Information regarding a template is located in the template_info.php file. You need to create a new template_info.php file for the new template. Copy the file called includes/templates/template_default/template_info.php into the new template folder, and then open the template_info.php file in your favorite text editor.

Change the text between each set of single quotes to suit your new template.

<?php
$template_name = 'Packt Publishing';
$template_version = 'Version 1.0';
$template_author = 'Suhreed Sarkar';
$template_description = 'This template is designed for Packt Publishing';
$template_screenshot = '';
?>

Remember to keep the single quotes. Your template name does not need to be identical to your folder name, and you can use spaces to make it read well, but it is best to keep them similar. Leave the space between the quotes for the template screenshot field empty for now, as you don't have one yet.

When you've finished, your new file structure should appear as follows:

Open your Admin panel and navigate to Tools | Template Selection. Click the Edit button, then choose Packt Publishing from the drop-down menu and click the Update button. Now, navigate to Tools | Layout boxes controller, and click the Reset button at the bottom of the page.

Your new template is now enabled and ready to be customized.

When building a new template for Zen Cart, you can use its powerful overriding feature. Overriding means using some template as the base and extending it by adding different properties through separate templates. For example, you may want to make some modifications to the default template, template_default. You could modify the files in the template_default directory to do this. But due to its overriding character, you can add the changes in the new template, say packt, which will apply the changes to the shop.

In fact, you can override any file in the path includes/templates/ template_default. Files in this directory generally determine the layout and the HTML formatting of your web pages. By default, Zen Cart has two standard templates: template_default and classic, both of which are located in the includes/templates/ folder.

Out of these two standard templates, only template_default contains a full set of files. Every other template contains only the files that differ from template_default. If your template does not contain a particular file, Zen Cart will pull that file from template_default.

You need to add your templates graphics to the appropriate folders as discussed previously in the section on Changing Buttons and Icons. The header image, logo, background image, background image for sidebox headings, and so on should be placed in the images directory under your template directory. If you want to change the buttons and icons, create the graphic files in the GIF, JPG or PNG format and put them in the /includes/templates/template_name/buttons/language_name folder. Then, update the button_names.php file to define the button image file name, and the ALT texts for those images.

You do not need to copy existing sideboxes from the template_default directory, as these will automatically be displayed. If you are planning to develop a new sidebox, put the template for that sidebox in the sideboxes folder under your template directory.

A sidebox consists of three files, which are located in the includes directory:

You need to replace template_name and name_of_sidebox with you template name and the sidebox name respectively. For example, let us build a sidebox named my_sidebox. Then, my_sidebox.php file will read like this:

<?php
$show_my_sidebox = true;
if ($show_my_sidebox == true){
require($template->get_template_dir('tpl_my_sidebox.php', DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_my_sidebox.php'),
$title = BOX_HEADING_MY_SIDEBOX;
$left_corner = false;
$right_corner = false;
$right_arrow = false;
require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
}
?>

This page actually defines what is to be shown in that sidebox. Note that this page also includes the corresponding template file. Here, we have used a constant BOX_HEADING_MY_SIDEBOX. You need to define this in the includes/languages/english/extra_definitions/packt/my_sidebox_defines.php file. This file will look like this:

<?php
define('BOX_HEADING_MY_SIDEBOX', 'My Sidebox'),
?>

Now, you have to build its template file includes/templates/packt/sideboxes/tpl_my_sidebox.php, which will read as:

<?php
$content = "This is my first Sidebox. I have created it in 5 minutes. Although it is not of practical use yet, I hope I can eventually build a good sidebox.";
?>

If you have created these files for the packt template, you can try it by going to Tools | Layout Boxes Controller in the administration panel. From here, turn the sidebox ON and set it up to display in the left or the right side column. This sidebox will look like the following figure.

All stylesheets for your new template should be placed in the /includes/templates/template_name/css folder. You should follow stylesheet naming conventions as discussed earlier in this chapter. It is a good idea to copy an old stylesheet and then modify it to suit your needs. As discussed earlier, you can have multiple stylesheets for your shop -you can even add a stylesheet for each page.

As a design rule, try to keep the declarations minimal, simple, and self explanatory. Try to restrain yourself from changing the class and ID names in the core files.

You can rearrange, add, or delete items in a plain text email. To do so, you will need to edit the Zen Cart files where the email is created. For example, if you want to edit the order confirmation email, you will need to edit the file includes/classes/order.php.

In your example, open up includes/classes/order.php and scroll down to the bottom of the file, in the function send_order_email(). There, you will see the lines that construct the plain text email message:

[Line 827]
$email_order = EMAIL_TEXT_HEADER . EMAIL_TEXT_FROM . STORE_NAME . "

" . $this->customer['firstname'] . ' ' . $this->customer['lastname'] . "

" . EMAIL_THANKS_FOR_SHOPPING . "
" . EMAIL_DETAILS_FOLLOW . "
" . EMAIL_SEPARATOR . "
" . EMAIL_TEXT_ORDER_NUMBER . ' ' . $zf_insert_id . "
" . EMAIL_TEXT_DATE_ORDERED . ' ' . strftime(DATE_FORMAT_LONG) . "
" . EMAIL_TEXT_INVOICE_URL . ' ' . zen_href_link(FILENAME_ACCOUNT_HISTORY_INFO, 'order_id=' . $zf_insert_id, 'SSL'
[Line 848]
$email_order .= zen_db_output($this->info['comments']) . "

";
[Line 855]
$email_order .= EMAIL_TEXT_PRODUCTS . "
" .
EMAIL_SEPARATOR . "
" .
$this->products_ordered .
EMAIL_SEPARATOR . "
";

In this file, the variable that holds the plain text email message is called $email_order. It generally has a different name in each file, such as $email or $email_text. Whatever its name, this is the place where you will make your changes. You can add, delete, and rearrange the order of the items to suit your wishes.

HTML Email templates have two parts: embedded CSS and HTML codes. You may be surprised to see the embedded stylesheet in each mail template and may want to know why linked stylesheets have not been used. One reason for not using the linked stylesheet is that you may not know how the email clients will behave. Most email clients used today can handle HTML emails and stylesheets to some extent. But there is no guarantee that every customer will have an email client that can retrieve linked stylesheets and render the emails in the desired format.

<style type="text/css">
.body {background-color:#ffffff; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;}
...
.header {font-size:10px; padding:0px; width:550px;}
.content {font-size:10px; padding:5px; width:550px;}
.content-line {padding:5px;}
.coupon-block { padding: 5px; border: 1px #cccccc solid; background-color: #FFFF99; }
...
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 { color: #666666; padding: 5px; }
.copyright { border-bottom: 0px #9a9a9a solid; padding: 5px; }
</style>

$html_msg['EMAIL_CUSTOMERS_NAME'] = $check_status->fields['customers_name'];
$html_msg['EMAIL_TEXT_ORDER_NUMBER'] = EMAIL_TEXT_ORDER_NUMBER . ' ' . $oID;

$html_msg['EMAIL_HOURS_OF_OPERATION'] = 'We are open from 9 AM to 5 PM every day of the week.';

define(EMAIL_LOVELY_YOU_DROPPED_BY,'We are just so immeasurably delighted that you stopped by our store today!'),