CSS Inline

This extension uses the cssin library (https://github.com/djfm/cssin) to convert style sheet links to inline css. This is important for content that is going to a gmail account to render correctly. Also, it makes it easier to see the same thing in your browser as the final email

For example

<link href="http://drugfreepa.org/wp-content/themes/dfpa-minimum-pro/style.css?ver=3.0" rel="stylesheet" type="text/css" />
<div class="mission-statement">lots of stuff</div>

Gets converted to

<div class="mission-statement" style="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;background-color:#559fd4;color:#fff;margin:0 auto;padding:30px">lots of stuff</div>

 

Tips

  • Create a specific stylesheet for email to keep it small
  • Use tables rather than divs to layout your page as that is what MS Outlook supports