CSS styles for your Devise emails

In this post I would like to show step by step how to improve your emails by adding them stylesheets and images. The out-of-the-box devise email looks like this,

Captura de pantalla 2016-05-31 a las 10.11.53 a.m.

And one of the first things your client is gonna ask you, is to improve the look, because today everybody is used to receive beautiful emails. So one of the first things we will need to achieve this are these two gems

gem 'nokogiri'
gem 'premailer-rails'

After that, what we want to do is to create our own Devise::Mailer class named (in this case) app/mailer/devise_custom_mailer.rb

class DeviseCustomMailer < Devise::Mailer
  helper :application
  default template_path: 'devise/mailer'
  layout 'mailer'
  add_template_helper EmailHelper
  add_template_helper ApplicationHelper

  def confirmation_instructions(record, token, opts={})
    super
  end
end

Then we’re gonna create two files for the layout definition: app/views/layout/mailer.html.erb and app/views/layout/mailer.text.erb. The first one is gonna have a HTML layout

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%= stylesheet_link_tag 'email.css' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

And the second one it is only gonna have a <%= yield %> inside.

The next thing we’ll need to do is to uncomment the line in app/config/initializers/devise.rb that configures the Devise mailer class, and set it to our devise mailer class

config.mailer = 'DeviseCustomMailer'

Then, we’re going to create the email.css file in our assets folder (app/assets/stylesheets/email.css.scss)

$email-background: #EDEDED;
$email-header-bg: #D77373;

#email-wrapper {
  background: $email-background;
  padding-top: 1px;
  padding-bottom: 1px;

  #header {
    background: $email-header-bg;
    margin: 30px 30px 0px 30px;
    padding: 5px 30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    .logo {
      width: 30px;
      height: auto;
    }
  }
  #body {
    background: white;
    margin: 0px 30px;
    margin-bottom: 30px;
    padding: 10px 30px;
    padding-bottom: 15px;
    border: 1px solid $email-header-bg;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

We also want to put some images into the email, so we’re going to create a Helper class that is going to define a method to help us in this task (app/helpers/email_helper.rb)

module EmailHelper
  def email_image_tag(image, **options)
    attachments[image] = File.read(Rails.root.join("public/#{image}"))
    image_tag attachments[image].url, **options
  end
end

Our email view (app/views/devise/mailer/confirmation_instructions.html.erb) will look like this,

<div id="email-wrapper">
<div id="header">
<table>
<tbody>
<tr>
<td width="40px"><%= email_image_tag "img/logo.png", :class => "logo" %></td>
<td>
<h3>Welcome <%= @email %>!</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div id="body">
You can confirm your account with this link:
<%= link_to 'Confirmar mi cuenta', confirmation_url(@resource, confirmation_token: @token) %>
</div>
</div>

And the final result of this will be a css styled email,

Captura de pantalla 2016-05-31 a las 2.21.04 p.m.

I hope it can help somebody. Regards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s