Guide to create your own MailPoet theme

You want to create your own newsletter theme? You've come to the right place.

Requirements before you begin:

  1. some knowledge of photo editing software, like Photoshop
  2. there's no HTML, but there's a simple stylesheet

Example newsletter theme for download

The best way to understand a theme is to download one and examine it, for example Sketchy:

Download Sketchy, an example theme for MailPoet.

Files included in a theme

This is what a theme's folder needs to look like:

  • style.css: MailPoet's visual editor uses this file for colors and fonts. Read below.
  • screenshot.jpg or .png: this file is the large preview and needs to be 320px wide
  • thumbnail.jpg or .png: 80px by 80px
  • name-of-theme.psd: optional Photoshop file to include. It has to be the same name as the folder of your theme. Read more below.
  • /images/header.jpg or .png: optional, max 600px wide
  • /images/footer.jpg or .png: optional, max 600px wide
  • /images/divider.jpg or .png: optional, max 564px wide
  • images in /bookmarks: we highly recommend including original social bookmarks

How do I upload my theme?

You can't upload a PSD file to your MailPoet! It won't work.

We recommend that you upload your theme as a .zip file in the visual editor, like this:

If you wish to upload with FTP instead, all the themes are found in this folder:


Style.css: how it works

Our rendering engine is strict, so you need to follow this example without deviating.

For example, adding attributes such as line-height or font-weight, won't work.

This is what it looks like. Any WordPress theme designer will recognize the similarities.

Theme Name: Sketchy
Description: Sketch it out right. Simple and efficient design with a nice cut out footer.
Author: ArtCore
Author URI:
Author Email:
Tags: blue, simple
Note: the styles below offer all the possibilities of MailPoet. The plugin won't recognize any additional styles if you add them.
html {
    background-color: #b3dfe7; /* cannot be transparent and will default to white */
.header {
    background-color: transparent; /* can be transparent */
body {
    font-family: "Arial";
    font-size: 12px;
    background-color: #ffffff; /* can be transparent */
.footer {
    background-color: #b3dfe7; /* can be transparent */
h1 {
    color: #ff7a8c;
    font-family: "Arial";
    font-size: 36px;
h2 {
    color: #ff7a8c;
    font-family: "Arial";
    font-size: 30px;
h3 {
    color: #ff7a8c;
    font-family: "Arial";
    font-size: 24px;
a {
    color: #ff7a8c;
.unsubscribe {
.viewbrowser {
    font-family: "Arial";
.divider {
    border-color: #000;
    border-size: 1px;
    border-style: solid;

Include a Photoshop file if you're going to distribute

You might want to include a Photoshop file if you wish to sell on Theme Forest (you might be the first!).

Read our guide on designing a MailPoet theme with Photoshop. Screenshot of the guide, which is a Photoshop file:

Photoshop files are helpful if your client or yourselves want to take design to a further level, thanks to your Photoshop skills.

Examples of design elements a Photoshop file can help achieve outside the MailPoet's visual editor:

  • title that uses special font. Read more on fonts in emails.
  • a button that needs to be converted into an image
  • frame or borders for photos & images
  • first letter of paragraph in special fonts
  • extra dividers that can be dropped into the newsletter as an image