There’s a few ways to change this, but for this demo, we’re just going to change $black to a hex value that represents a dark grey:<\/p>\n

$global-font-color: #808080;<\/pre>\n
Let’s now change the default size of our text. Look for,<\/p>\n
$global-font-size: 14px;<\/pre>\n
We’re\u00a0 going to change this to,<\/p>\n
$global-font-size: 15px;<\/pre>\n
Now, let’s tackle that banner and footer color. For that, we’re going to open up the, src\/assets\/scss\/app.scss <\/em>file. There’s a few css classes that have the background set to the default grey, like this one:<\/p>\n
.banner {\r\n\u00a0 background: #e9ebee;\r\n}<\/pre>\n
We’ll want to change those, to our dark red. Here are the lines with the changes I’ve made – the original have simply been commented out,<\/p>\n
.banner {\r\n\u00a0 \/\/background: #e9ebee;\r\n\u00a0 background: #990000;\r\n}\r\n\r\n.banner .container {\r\n\u00a0 \/\/background: #e9ebee;\r\n\u00a0background: #990000;\r\n}\r\n\r\n.wrapper.secondary {\r\n\u00a0 \/\/background: #e9ebee;\r\n\u00a0 background: #990000;\r\n}<\/pre>\n
That takes care of the banner and footer background color.<\/p>\n
Now for the color of our text inside the banner and footer. In the same app.scss file, find,<\/p>\n
.banner p {\r\n\u00a0 color: #000000;\r\n\u00a0 margin-bottom: 0;\r\n}<\/pre>\n
This css snippet sets the color to black. Let’s make ours white:<\/p>\n
.banner p {\r\n\u00a0 color: #ffffff;\r\n\u00a0 margin-bottom: 0;\r\n}<\/pre>\n
And, we’re all done! If the build process has been running, we can now just simply upload our new theme into Dada Mail’s support files directory:<\/p>\n
On our site, we’ll navigate to the dada_mail_support_files<\/em> directory, then go to themes\/email<\/em>. I’ll create a new directory with the same as the name of my Foundation for Emails project: dada_mail_site<\/strong>. I’ll change into that directory, and copy over the entire dist directory my project has made, inside the dada_mail_site<\/em> directory. Once that’s complete, my theme is essentially, “installed”!<\/p>\n
Let’s set up my mailing list to use it. I’m going to log into my list, then navigate to, Appearance -> Email Themes<\/strong>. Our new theme should now be listed when we click on the popup menu. Select it, and Save!<\/p>\n
<\/p>\n
Done! Let’s test it out o the Mass Mailing -> Send a Message<\/strong> screen. This screen has the ability to preview a message, before sending it out. On this screen, I wrote a simple message, clicked the, Preview<\/strong> button:<\/p>\n
<\/p>\n
Looks pretty good! I’m going to add the following as my Login Image URL in, Mailing List -> List Information:<\/strong><\/p>\n
<\/p>\n
Let’s try the preview again:<\/p>\n
<\/p>\n
Looks great!<\/p>\n
We’ve just scratched the surface on how to create a custom email theme for Dada Mail. Please try it yourself, and let us know if you have any questions or comments!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Dada Mail 10 introduces Email Themes, as well as also allowing you to create your own custom email theme. We cover how to to work with email themes in the docs at: http:\/\/dadamailproject.com\/support\/documentation-10_x_x\/features-email_themes.pod.html In this post, we’re going to go over how to do the actual customization, and start using our new theme live on […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paVOyw-14","_links":{"self":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts\/66"}],"collection":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":2,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts\/66\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}