- Dada Mail Email Themes
- Anatomy of a Dada Mail Email Theme.
- Creating a New Email Theme
- Using Your New Email Theme
Dada Mail Email Themes
Dada Mail's Email Themes are created using the Foundation for Emails Framework:
You don't necessarily have to use this framework at all, as the templates that make up the email theme itself are shipped with Dada Mail already compiled. We do like this framework though, as it does make the task of creating the complicated HTML required for email messages into a doable job, via the Inky templating language (http://foundation.zurb.com/emails/docs/inky.html).
Anatomy of a Dada Mail Email Theme.
Dada Mail's Email Themes are installed in your
dada_mail_support_files directory, under the path,
dada_mail_support_files/themes/email. Each email theme lives in a directory whose name is the same as the theme's name. For example, the included theme is called,
default, and if you navigate into the
dada_mail_support_files/themes/email directory, you should see a directory also called,
dada_mail_support_files/themes/email/default/dist directory, are all the template files that make up the email theme. For example, the subscription confirmation message that gets sent out to confirm a new subscription is made up of two templates,
confirmation_message.html holds the HTML version of the message you're most likely to view.
confirmation_message.txt holds the backup, plaintext version of the message you may not see in your mail reader, unless you specifically have configured your mail reader to only see text emails, or if your using a mail reader that only supports plaintext! Dada Mail supports both, as is good style.
confirmation_message.txt is a bit more than this, though. If you open up the file, you may see the following:
--- to_phrase: <!-- tmpl_var list_settings.list_name --> Subscriber from_phrase: <!-- tmpl_var list_settings.list_name --> Owner preheader: Confirmation is a click away! subject: <!-- tmpl_var list_settings.list_name --> Mailing List Subscription Confirmation --- <!-- tmpl_var email.preheader --> Ready to Join, <!-- tmpl_var list_settings.list_name -->? (... the rest of the template)
Email templates with a,
.txt file ending also holds the plaintext version of the template, as well as variables used in the email message itself. You'll see these variables located at the top of the file between the pair of lines made up of triple dashes:
--- to_phrase: <!-- tmpl_var list_settings.list_name --> Subscriber from_phrase: <!-- tmpl_var list_settings.list_name --> Owner preheader: Confirmation is a click away! subject: <!-- tmpl_var list_settings.list_name --> Mailing List Subscription Confirmation ---
.txt email template files have YAML Front Matter (YFM) sections. These sections are optional, and will be removed when being used as a template. They do include important data, like the Subject of the email message template (
subject). Even though YFM looks very similar to actual email headers, they are NOT. The data is actually in the YAML format, with YAML syntax rules and escape sequences.
Most email messages are created with two files, but really, only the
.txt version is absolutely necessary.
You'll also see Dada Mail's template tags, like this one:
<!-- tmpl_var list_settings.list_name -->
These tags will be replaced by the values they correspond to. You can learn about Dada Mail's template tags in its own docs:
Creating a New Email Theme
There's currently no file that contains metadata about your email theme, so for example, if you rename the theme directory, you've renamed the theme. If you copy the email theme directory, you've essentially created a new theme! Make changes to the files in your new theme, and you've customized your theme!
This is a naïve approach to creating and customizing a new theme, but for minor changes to the text copy, it may be all you will want/need to do.
If you decide to go this route, one suggestion is to only copy over the email template files that you truly want to customize - there are a lot of files that make up an email theme! Dada Mail will happily fall back into using the
default email template file, if it can't find that file in your own email theme. A customized email theme could potentially only have one customized file!
If problems are found in the template you've customized, Dada Mail will fallback to using the file from the default email theme. Check Dada Mail's error log for more information on what the error may be.
Create a New Email Theme Using the Foundation for Emails Workflow
Another way to create a new email theme is to start with a new Foundation For Emails project, then merge the existing Dada Mail default theme project.
Starting a new Foundation for Emails project is covered here:
In a separate directory, you'll want to download the existing Dada Mail default theme from github:
Each release of Dada Mail also have a release of the default theme, so make sure those two releases correspond to each other.
The file listing of the download looks something like this,
example.config.json gulpfile.babel.js package.json src
Copy these files into the starter Foundation for Emails Project - you'll be overwriting some files from the Foundation starter project, so don't worry about that. You're now all set to develop your own theme.
The Dada Mail default theme download only contains the source files (in,
src), which you will want to compile to create the dist directory by running the server:
we use the following to compile:
npm run build
dist directory now contains the files that will correspond to your new email theme.
Back on your server, find your,
Inside this directory, navigate to,
themes/email. The directory holds all the email themes for your installation. There should be a directory already present called,
default. Create a new directory - the name of the directory will become the name of your email theme. In this new directory, move the
dist directory you have compiled. Your theme is now ready to be used!
Using Your New Email Theme
Log into your mailing list, and navigate to, Appearance - Email Themes. Select the theme you would like to use, and save your changes. Done!