Guide to Creating 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 style sheet
We give out free premiums to user submissions that are accepted for our repository. Get in touch if you think you have the right design skills and you want to share your theme with the community.

Example newsletter theme for download

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

screenshot

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 although in version 1.1, these images don’t load automatically in the Social Bookmarks widget. This will be available in v.2.0 at the latest.
If your subscribers are on Lotus Notes on 7 or under, we recommend using .jpg images instead .png because transparency isn’t supported in that client. It’s funny how we never heard “I love Lotus Notes!” in our lives

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:

/wp-content/uploads/wysija/themes

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: http://artcore-illustrations.de/
Author Email: artcorehro@googlemail.com
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 {
color:#0c96af;
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;
text-decoration:underline;
}
unsubscribe {
color:#000000;
}
viewbrowser {
font-family: "Arial";
font-size:12px;
color:#b3dfe7;
}

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!) or share your theme with all the users in MailPoet’s repository.

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

mailpoet-theme-master-guide-everybody

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

0