Converting External CSS to Inline CSS for Mail in Rails
Here are couple of gems you can check out:
- premailer or premailer-rails for rails
- mail_style
- premailer plus (fork of the above version)
- awesome_email
- roadie
I have no winner at the time writing this answer but premailer seems to be most up-to-date.
How do I create email with css and images from Rails?
Assuming you know how to send normal plain-text emails from Rails using ActionMailer, to get HTML
emails working you need to set a content type for your email.
For example, your notifer might look like this:
class MyMailer < ActionMailer::Base
def signup_notification(recipient)
recipients recipient.email_address_with_name
subject "New account information"
from "system@example.com"
body :user => recipient
content_type "text/html"
end
end
Note the content_type "text/html"
line. This tells ActionMailer to send an email with a content type of text/html
instead of the default text/plain
.
Next you have to make your mailer views output HTML
. For example, your view file app/views/my_mailer/signup_notification.html.erb
might look like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
h3 { color: #f00; }
ul { list-style: none; }
</style>
</head>
<body>
<h3>Your account signup details are below</h3>
<ul>
<li>Name: <%= @user.name %></li>
<li>Login: <%= @user.login %></li>
<li>E-mail: <%= @user.email_address %></li>
</ul>
</body>
</html>
As you can see the HTML
view can include a <style>
tag to define basic styles. Not all HTML
and CSS
is supported, especially across all mail clients, but you should definitely have sufficient formatting control over text styles.
Embedding images is a bit tricker if you plan to display attached emails. If you are simply including emails from external sites, you can use an <img />
tag as you usually would in HTML
. However, many mail clients will block these images from being displayed until the user authorises it. If you need to display attached images, the Rails plug-in Inline Attachments might be worth a look.
For more information on Rails mailing support, the ActionMailer documentation is a great resource
Why CSS is not working when sending HTML email?
Try using inline styles instead of an external stylesheet.
Like this:
<div style="color:green;" id="div"></div>
instead of something like this:
<style>
#div {
color:green;
}
</style>
<div id="div"></div>
(Thanks Kelvis Miho for pointing this out)
Edit: I searched for @Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .
Edit: Joe edited his post to include the reference link.
Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.
You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.
Are there any tools that can inline css?
The premailer at http://code.dunae.ca/premailer.web/ is a good tool if your layout is straightforward and your HTML is tidy. It behaves poorly on badly-formatted HTML though, I don't know if it's something you'd refer a client to.
Source is available at http://code.google.com/p/premailer/. MIT License.
Rails 3 send multipart email with premailer and have the option for using a template or not
Confirmed that this is a bug with premailer-rails3 gem here. Used gem "premailer-rails3", :git => "git://github.com/tdgs/premailer-rails3.git"
and it sends properly. There goes 6 hours :)
ADDENDUM: It seems Premailer may be suffering from the same problem I was having in this thread. It seems to also duplicate the html part and that probably ends up screwing with the whole email parsing. So really in the end it may be ActionMailer - or whichever class is responsible when assigning content to the body of a Mail part.
Related Topics
How to Iterate Over an Array of Arrays
What's the Best Way to Start a Background Process, That Can Get Accessed Later On
Using Ruby CSV to Extract One Column
Using Authlogic_API for Rails Rest API Access
Rails 3:Do I Need to Give Return True in a Before_Save Callback for an Object.Save to Work
Ruby - Open File, Find and Replace Multiple Lines
Add Current Time Before Log Message
Fresh Install of Rvm in Ubuntu Isn't Letting Me Install Gems (Zlib Error)
How to Properly Test Cancan Abilities with Rspec
Dynamically Get Object's Attribute
Rails - Link_To Helper with Data-* Attribute
Initializing Instance Variable as an Array - Ruby
Where Is the Best Place to Add Methods to the Integer Class in Rails
How to Declare a Rake Task That Depends on a Parameterized Task