Include bootstrap in cfmail

StackOverflow https://stackoverflow.com/questions/13317884

Frage

The user receives an email when changes have been made to a form. I would like to display the information in a more readable format using twitter bootstrap. To my surprise the style text-info displays correctly but not the table styles. Is this a syntax error or does it have to do with the type of HTML rendering engine ColdFusion uses to create the email? I am using Outlook to view the emails.

Below I tried:

<cfmail from="test.com" to="me.com" subject="tester" type="html">
 <html>
  <head>
   <!---<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">--->
  </head>
   <body>
    <style type="text/css">

     <cfinclude template="/bootstrap/css/bootstrap.min.css">
    </style>

     <!--- Start comparing --->
    <p class="text-info">
      Has updated the following Project Information for Project
     </p>

     <table class="table table-striped" style="width: 600px">
    <tr>
     <th>Field</th>
     <th>Original</th>
     <th>Modified</th>
    </tr>

     <cfif compare(xOrig,xMod) IS NOT 0>
      <tr>
       <td>Field1</td>
       <td>#xOrig</td>
       <td>#xMod#</td>
      </tr>
     </cfif>

      </table>
     </body>
    </html>
</cfmail>
War es hilfreich?

Lösung

It is not best practice to include external stylesheets to render emails, in fact it won't even work for the vast majority of what you want to do as email clients ignore it or remove it.

To effectively render styled emails, you need to write your CSS inline, not even in the head of the email body. example:

<p style="color:#000;"></p>

Using inline styles will get you the best bang for your buck. Use the following resources at MailChimp as a guide: Mailchimp HTML Email Templates

Andere Tipps

You should always put styles in your head tags, whether you're including the contents of the file or referencing the stylesheet by URL. While you may get away with putting them in the body, you might get inconsistent behavior between HTML rendering engines.

I'd personally use the link tag as you commented out. However, since the email isn't on your web server, you have to use an absolute reference, not a relative one:

<link href="http://www.mysite.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top