Focus Email Template


Thank you for purchasing my email template! Below you will find some basic instructions on using the template, but don't hesitate to message me on themeforest if you find something that isn't working like it should. - Dennis

What is Focus?

Focus is an email template for direct email promotions. It includes two different color schemes (one dark and one light) and aditional appropriate templates to be used on Campaign Monitor (

The email templates

You can find a commented version of the basic html inside the "html-comments" folder. The templates have been checked in Litmus ( to ensure it's compatible with most mail clients and services out there.

Html and CSS Structure

Like all email templates, the css is entered inline the html and content is nested in tables. To edit any of the properties, (for example to change the color of a header), you open the index.html file in your editor, and change the inline css. Let's say you want to change the font size of the top main header. This is how the html looks right now:

The first line makes sure the content is centered on the screen, the second line is the logo/lightning icon, the third line is what we're looking for.

To change the font size, we will change the "font-size: 2.5em" to "font-size: 3.5em" and voila, (almost)instant text magnification!

Add your own logo

To add your logo, replace the file "white-icon-lightning.jpg" in the light template, or "dark-icon-lightning.jpg" in the dark template (they're in their respective /img/ folders) with your logo image. Make sure the new file is not wider than 600 pixels.

Feature images

Replace the feature images with your own, keeping in mind that the new ones need to be 200 pixels wide. You can also completely remove the images if you'd rather not have them.

Header image & full width image

You can replace these two images with your own, but make sure the new images are at most 600 pixels wide.

Social Media

Don't forget to edit the links to your social media buttons, before uploading the template! Just open the index.html file, and use your editor's search function to search for: "edit-your-facebook-link", "edit-your-twitter-link" & "edit-your-gplus-link". If you don't need one of these, just delete the whole line, as well as one line above and below it to just remove the link.

You can see a sample of the code below - in this case, this is the facebook link.

You can see below how i changed the link to point to coca-cola's facebook page.

Photoshop (.psd) file

Both color schemes are included in the "focus-email-template.psd" file that you can find in the "photoshop" folder. Each color scheme rests in it's own layer folder (Called "Light" and "Dark")

Using Campaign Monitor?

If you are using Campaign Monitor ( to send your emails, you can you the appropriate templates.

The Campaign Monitor versions are located in the folders "focus-html-dark-campaignmonitor" & "focus-html-light-campaignmonitor". The zip file you see in each folder is the file you will be asked to upload when adding the template, and included the appropriate images for each color scheme.

To use the templates on Campaign Monitor: