Email Themes

Dada Mail Email Themes

A Dada Mail Email Theme is a collection of the email-specific HTML and text templates used when sending out email messages that Dada Mail creates, both for notification emails, like when you subscribe to a mailing list, and for mass mailing messages.

For mass mailings, each theme also comes with a few different layouts, which you may choose from to give your mailing list message a different look and feel.

All the themes that currently ship with Dada Mail have the same text copy and general layout, but their color schemes and sometimes font size will be different. Nothing stops you from create your own theme, with a wildly different layout/design, and even content.

Email Theme Creation Workflow

Dada Mail's Email Themes are created using the Foundation for Emails Framework:

http://foundation.zurb.com/emails.html

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 in Dada Mail is called, default, and if you navigate into the dada_mail_support_files/themes/email directory, you should see a directory also called, default.

Inside the, 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
        ---

In fact, .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:

https://dadamailproject.com/d/features-email_template_syntax.pod.html

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:

https://get.foundation/emails/docs/sass-guide.html

In a separate directory, you'll want to download the existing Dada Mail default theme from github:

https://github.com/justingit/dada_mail_foundation_email_templates/archive/v11_22_0_stable_2023-09-18.tar.gz

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:

https://get.foundation/emails/docs/sass-guide.html#running-the-server

we use the following to compile:

        npm run build

The dist directory now contains the files that will correspond to your new email theme.

Back on your server, find your, dada_mail_support_files directory.

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. We suggest making the new theme name unique. When you upgrade, Dada Mail will look for this unique name, and move over your theme automatically. 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!

Translations

Dada Mail currently does not ship with any translations, but there is a German translation available:

https://github.com/holzhannes/dada_mail_email_themes-de-formal

as well as an outside project to facilitate your own translation:

https://github.com/holzhannes/dada_mail_foundation_email_templates-translator-tool

Theme Collections in Pro Dada

The free distribution of Dada Mail comes with only one theme called, default, but Pro Dada comes with a dozen+ more themes for you to use!

These themes are mostly color scheme changes of the default theme. Learn more about Pro Dada at,

https://dadamailproject.com/purchase/pro.html

If you've transformed your Dada Mail install to Pro Dada within the app, these new themes will not be automatically available.

Rather, you would have to either upgrade to Pro Dada:

"d/upgrade_dada_mail.pod.html" in dadamailproject.com

Or, download the Pro Dada distribution, uncompress it locally, then move the directories you found in,

dada/extras/packages/themes/email

into where your email themes currently live,

dada_mail_support_files/themes/email

Learn More

Introducing Email Theme Layouts in Dada Mail

http://blog.dadamailproject.com/2016/10/31/introducing-email-theme-layouts-in-dada-mail/

How to create your own email theme in Dada Mail 10

http://blog.dadamailproject.com/2016/10/28/how-to-create-your-own-email-theme-in-dada-mail-10/

Dada Mail Project

Download

Installation

Support