Theming HTML Mail sent through Mime Mail

The email messages are formatted using the mimemail-message.tpl.php template file. This includes a CSS style sheet and uses an HTML version of the text.

The included CSS is either:

• the mail.css file found in your admin theme or
• the mail.css file found in your default theme or
• the combined CSS style sheets of your default theme

If you're having trouble getting it to work, first ask "what theme is the email being sent from?" For example, if it's through webform on the default theme, then there's where the mail.css needs to reside. However if you're firing off an Email through Rules or using something like Commerce Message, it might be looking at the admin theme. This is explained in a bit more detail further down.

To create a custom mail template copy the mimemail-message.tpl.php file from the mimemail/theme directory into your default theme's folder. Both general and by-mailkey theming can be performed:

• mimemail-message.tpl.php (for all messages)
• mimemail-message--[module]--[mailkey].tpl.php (for messages with a specific mailkey) (e.g. mimemail-message--user--register-no-approval-required.tpl.php would be template for user signing up with no approval required. Module would be USER and key would be register_no_approval_required )

If you use sub-themes or multiple themes, especially if you use a different administration theme than your default theme, you might end up with a different theme to what you expect. This is a well-known bug which is hard to fix and not just Mime Mail is affected by it but Simplenews too. See #374222: Template files do not work when using admin theme for more information.

In the meantime to cover all cases, you should place the same template files into all theme folders.

How to design safe HTML email

Since some email clients (namely Outlook 2007 and GMail) is tend to only regard inline CSS, you can use the Mime Mail CSS Compressor (based on Emogrifier) to convert CSS styles into inline style attributes. It transmogrifies the HTML source by parsing the CSS and inserting the CSS definitions into tags within the HTML based on the CSS selectors. To use the Compressor, enable the included "Mime Mail CSS Compressor" module.

Some useful tips:

• Use nested tables for layout.
• Use inline CSS and avoid shorthand.
• Use alt text and always include the dimensions of your image.
• Don’t use floats.
• Test and retest your email designs on a regular basis with different email clients.

For more detailed information on the subject see:

• Rock Solid HTML Emails
• 100+ free HTML email templates
• Email Standards Project