Styling emails can be a bit of a challenge. Sometimes emails look OK on the screen but don't work in the email client. Reasons for this include
- css stylesheets that are linked to format correctly in the WYSIWIG but not in the emails
- css inline stylesheets format correctly in the WYSIWIG and in many email clients but do not in Google Webmail
- layout done via divs works in most email clients but outlook requires table css to give a table look
The first 2 of these can be resolved by converting the css in a stylesheet to inline style information. We have published an extension that uses the cssin library to convert css in a linked stylesheet to inline css. This means that you include a link to your stylesheet in the email - eg
<link href="http://mysite.org/style.css?ver=3.0" rel="stylesheet" type="text/css" />
The cssinline library will download this stylesheet and construct a set of rules and then parse your emails and alter the html based on the stylesheet. This is done at the last minute as it needs to be done after any tokens are parsed (as some tokens like The CiviCRM views token return html that needs parsing) so by it's nature it must have some performance cost - however the cssinline library does have some caching built in and we have not observed a slow-down on a few thousand emails. We haven't done performance testing on really large mailings. The performance impact should be negligible on emails with no stylesheets and keeping the stylesheets simple should also mitigate any performance effects. We recommend a specially written stylesheet.
Installation
As the extension has not been set to automatic download you will need to download from github to your downloads directory - you can use git clone or the 'zip' link. Install as per any normal extension
Links
https://civicrm.org/extensions/css-inline