Creating a Custom Theme for Simplenews Emails

In this video, we will create a very basic theme to use for our simplenews emails.

Create a theme for your html email

Basic steps to create an email theme

Create the theme folder at "sites/all/themes/email"
Create a new file "email.info" at "sites/all/themes/email/email.info"
Type the following into the email.info file
- name = Email (The name of our theme. This is displayed on the "Appearance" page)
  description = This is the theme used for HTML emails, and should not be used for screen viewing. (A description of the theme. Also displayed on the "Appearance" page)
  core = 7.x (Drupal core version)
  engine = phptemplate (The engine Drupal uses)
  stylesheets[all][] = style.css (Include any style sheets you'd like)
Create a new file "style.css" at "sites/all/themes/email/style.css"
Type the following into the style.css file
- /*HTML mail styles*/
  .htmlmail-simplenews-body {
  width: 600px;
  background-color: #def2c4;
  color: #665446;
  padding: 10px;
  border: 2px solid #665446;
  }
  /*Links*/
  a,
  a:link,
  a:visited,
  a:hover,
  a:focus,
  a:active {
  color: #e5683f;
  }

Send test email to see our progress

Now that we've created our new theme, we need to tell HTML Mail to use it.

First we need to enable it

Drush en email
Go to "Configuration => System => HTML Mail"
Email theme: Email

(Send test email)
Ok, so we can see that our theme is in place, but we've got a lot of extra stuff above and below our email content. These are the blocks that are enabled for the theme, and we have a couple of ways we can remove them from the email. We could go through and disable all of the blocks, but I'm going to show you another, more complete way.

Copy template files into theme folder

First, we'll copy the file "page.tpl.php" into our email theme folder. You'll find this file in "drupal-root/modules/system/page.tpl.php".
- I only want the content of the newsletter to be displayed, so, I'll remove everything except the following:
  - <div id="content">
    <?php print render($page['content']); ?>
    </div>
- Clear cache (Everytime you add a new tpl.php file, you must clear your cache so that Drupal picks it up.)

Now if we send another test newsletter, we've eliminated almost everything that we don't want. The only thing that is left is the "Skip to main content" link. That's not really necessary in an email so let's get rid of it.

Remove "Skip to main content" link

There are a couple of ways we could do this.
1. We could copy the html.tpl.php file into our email theme just like we did with the page.tpl.php, but just for the sake of having fewer files in my theme directory, I'm just going to hide it using css
2. Add the following to the style.css file
  - /*Remove "Skip to main content" link when viewing in webmail client*/
    #skip-link {
    display: none;
    }

Configure the "Click here to view this message on the web" link

Copy the file "htmlmail--Simplenews.tpl.php" from "sites/all/modules/htmlmail/htmlmail--Simplenews.tpl.php" into your email theme directory
Change the text "Click here to view this emssage on the web" to whatever you want.
Clear cache

And voila! Our newsletter is complete!