“Swatches” Documentation by “Jesse Murphy, Creekjumper Creations” v1.0

---

“Swatches”

---

Table of Contents

1. HTML Structure
2. CSS
3. Working with the Template
4. PSD Files
5. Campain Monitor and MailChimp
6. Sources and Credits

---

Note:

These templates have been designed to primarly to work with the built in editors of Campaign Monitor and MailChimp. These editors allows you to easily add text and images as well control how many blocks are included in your message. Instructions for uploading these templates to Campaign Monitor and Mail Chimp are available below. Detailed instructions for editing the templates directly can be found under the Working with the Template section.

A) HTML Structure - top

The structure of this HTML email template has been built using a series of nested tables. The content blocks of the template have been built out of another series of nested tables. Building with tables ensures greater compatibility with a wide variety of email clients. This template includes both a single column layout and layouts with left and right sidebars. The modular nature of this template allows for easy customization by the copy and pasting of template blocks into the structure. Each block has its own set of comments that describe what that block will display.

If you need to make changes directly to the templates most of these will probably take place in the content block area. To find this area look for the "++++++++ || Start Content Blocks || ++++++++" comment and change the content blocks as you see fit. To add or remove blocks simple copy, paste or delete the block(s) in question. In order to make sure you copy the whole block copy the starting and ending comments for the block you are working with. Detailed instructions for editing the templates directly can be found under the Working with the Template section. See below for the structure of an example block:

	
++++++++ || Start Content Blocks || ++++++++
		

	
++++++++ || End Content Blocks || ++++++++

The other areas of the template files are also heavily commented. You will see commented blocks for the META LINKS, BANNER, and FOOTER as well as the other more specific content blocks. If you are looking to make changes to a particular block of content simply look for the start of the block and make your changes. Each block is given a short description in a comment of what that block does. These comments also indicate where each block starts and ends.

For example, if you are would like to change the banner image look in the HEADER section and locate the BANNER block. Just replace that image with your new banner.

---

B) CSS Files and Structure - top

Because this is an email template the CSS is handled a bit differently from normal html web templates. Included with the template are two different CSS options. One has CSS located in the header and another in which the CSS is placed inline. Inlining the CSS is the best method to ensure that the styles function across a wide variety of email clients. However because of the added complexity of inline styles it is best to make any style changes to the CSS located in the header and then convert to inline. Many email campaign sending services will inline styles for you. However, for those of you who need to inline your styles before hand, there is a great free tool that will inline your CSS styles for you at: http://premailer.dialect.ca

The CSS located in the head of each html file is divided into several sections.

If you would like to edit a specific portion of the site, simply find the appropriate label in the head of the HTML file, and then scroll down until you find the appropriate style that needs to be edited.

---

C) Working with the Template - top

Should you wish to build your own custom version of the Swatches template I've included several files to make that process a simple matter of copy and paste.

These files are located in the Custom Build folder in your template download. In that folder you will find a base blank template, this template only contains the header, structure and footer. The next template you will need to find is All Blocks template. The All Blocks template includes ever single content block. In theory you could just make your changes to the all block template, but I've found that in practice it is easer to keep track of your changes if you work with both files to create you own custom template. I've also included a version of these files for MailChimp (more these files below.)

Instructions

Open both the Base Template and the All Blocks template. I'd recommend doing a save as of the Base Template so you always can go back and have a fresh start. Once you have your files ready, start by making any changes you need to the Header, Banner and Footer areas of your new template.

Once those changes are complete you are now ready to add you content blocks. From the all blocks file copy the content blocks you would like to use and paste them into your new template. NOTE: There is a spacer block that should be placed between each content block. The spacer blocks are clearly commented. When copy and pasting make sure to copy both the Start and End comments for each block, so you can better keep track of each unique content block.

Be sure to copy and paste your new content blocks in-between the following comments:

		++++++++ || Start Content Blocks || ++++++++
		

		++++++++ || End Content Blocks || ++++++++
		

If you are working with a template that includes a sidebar be sure to paste your Sidebar Blocks in-between the following comments:

		++++++++ || Start Sidebar Content Blocks || ++++++++
		

		++++++++ || End Sidebar Content Blocks || ++++++++
		

If you ever have any questions if you are placing the blocks correctly just refer back to the all blocks template file to see how they have been placed.

MailChimp

You can build your MailChimp templates the same way using the above instructions. (Campaign Monitor's editor is more flexible so this section only applies to MailChimp users.) Start with the files located in the MailChimp Custom folder in the Swatches Custom Build Folder.

I've included instructions for uploading your templates to Campaign Monitor and MailChimp below.

---

D) Campaign Monitor and Mail Chimp - top

Below you will find simple instructions to upload this template to either CM or MC. Keep in mind that Campaign Monitor and MailChimp have excellent online resources and support staff. If you have detailed questions about the workings of either service I encourage you to contact them directly.

Campaign Monitor

1. Login to Campaign Monitor
2. Select which Client account wish to use. (You may have only one.)
3. Click the Templates Tab
4. Click the Add New Templates button.
5. Click the Import Now under the Import a custom template section.
6. Follow the instructions and locate and upload the template HTML file and the .zip containing the template images.
7. All Done! You are now free use the template in your next campaign.

MailChimp

1. Login to MailChimp
2. On the left of your Dashboard click My Templates.
3. On the left, under code, click Code Custom Template
4. At the top of the editor, click import zip file.
5. Locate the zip file (if you have created a custom template for MailChimp you will need to create this .zip file yourself) containing the HTML file and template images. Select the file and hit Upload.
6. Once the file has uploaded hit Save and name your template.
7. All Done! You are now free use the template in your next email message.

---

E) PSD Files - top

I've included 1 large psd and several smaller ones with this theme:

1. The Layout
2. Swatch Color Bars
3. Banner Images
4. Buttons

The included psds have everything you need to customize the graphic portion of this template. If you need to change colors simply select the appropriate layer and make your changes then export the image and add the new image to the images folder. If you you use a different image name from the one you are replacing make sure to update your theme file with the new file name.

If you'd like to change the included main image banner image, open the banner.psd file, make the necessary adjustments, and then save the file as "banner.png". Then replace the included banner in the images folder with your new one.

---

F) Sources and Credits - top

I've used the following images, icons, fonts or other files as listed.

• Font - Mouse Deco

---

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Jesse Murphy, Creekjumper Creations

Go To Table of Contents

---