• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to add CSS to HTML Email using CI email libary

If you are using <style> tags, some ISPs/email services strip them. Use inline styles and keep it simple (putting in <style> tags in the head of your document is NOT inline, doing them in
<a syle="color:green">the link</a>
IS inline)
GMail is one of the email providers known to strip the &lt;style&gt; tags.

edit: had to misspell style within the code block or the forum strips it out

Actually I did try putting all my styles inline using this tool: http://templates.mailchimp.com/resources/inline-css/

But got the same result

Maybe the mail sender service does not obey the setting ‘mailtype’ => ‘html’? Maybe it sends the message as plain text only? On a true mail client (Thinderbird, Live Mail, etc) check the source of the received message. Here is an example that I see correctly in Trunderbird (without the headers):

Content-Type: text/plain; charset=us-ascii


# This is a message for testing purpose

Greetings from the team of [Starter 4][2].

[1]: cid:[email protected]
[2]: http://iridadesign.com/starter-public-edition-4/www/

Content-Type: multipart/related;

Content-Type: text/html; charset=us-ascii

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;meta http-equiv="Content-Type" c charset=utf-8" /&gt;
    &lt;meta name="viewport" c initial-scale=1.0"/&gt;
    &lt;title&gt;[Starter 4] Test Message&lt;/title&gt;

    &lt;style type="text/css"&gt;

        /* See http://htmlemailboilerplate.com/ */

        /* Based on The MailChimp Reset INLINE: Yes. */  
        /* Client-specific Styles */
        #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
        body {
            width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:40px;
            font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px;
        /* End reset */

        /* Some sensible defaults for images
        Bring inline: Yes. */
        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
        a img {border:none;}

        /* Yahoo paragraph fix
        Bring inline: Yes. */
        p {margin: 1em 0;}

        /* Hotmail header color reset
        Bring inline: Yes. */
        h1, h2, h3, h4, h5, h6 {color: black !important;}

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}

        h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
        color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */

        h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
        color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */

        /* Outlook 07, 10 Padding issue fix
        Bring inline: No.*/
        table td {border-collapse: collapse;}

        /* Remove spacing around Outlook 07, 10 tables
        Bring inline: Yes */
        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

        /* Styling your links has become much simpler with the new Yahoo.  In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline.  Your link colors will be uniform across clients when brought inline.
        Bring inline: Yes. */
        a {color: blue;}




    <p><img src="cid:[email protected]" /></p>
    <h1>This is a message for testing purpose</h1>
    <p>Greetings from the team of <a href="http://iridadesign.com/starter-public-edition-4/www/">Starter 4</a>.</p>


Content-Type: image/png; name="apple-touch-icon-precomposed.png"
Content-Transfer-Encoding: base64
Content-ID: <[email protected]>
Content-Disposition: inline; filename=apple-touch-icon-precomposed.png




The message has plain-text version that I have created, html-version of the message (you should see something similar), and one attached image.

Does your message source contain the header Content-Type: text/html; charset=xxxxx ?

Thanks ivan. Will have to get back to you at a later date with this css email problem.

Apparently on the live site I am getting a new issue (which i posted in another forum post) about getting an error when the send email is clicked.:

A PHP Error was encountered

Severity: Warning

Message: fsockopen(): unable to connect to ssl://smtp.gmail.com:465 (Connection timed out)

Filename: libraries/Email.php

Line Number: 1689

A PHP Error was encountered

Severity: Warning

Message: fwrite() expects parameter 1 to be resource, boolean given

Filename: libraries/Email.php

Line Number: 1846

A PHP Error was encountered

Severity: Warning

Message: fgets() expects parameter 1 to be resource, boolean given

Filename: libraries/Email.php

Line Number: 1869

On the localhost email sent the head tags have this: (Some strange '3D' in the code appeared):

&lt;meta http-equiv=3D"Content-Type" c charset=3Dutf-8"&gt;
&lt;meta name=3D"viewport" c&gt;

When I get the live email working again will then continue with this thread and send the head info for it.

This question I posted in the forum is regarding "How to add CSS to HTML Email using CI email libary." I finally got it to work by changing ‘protocol’ => ‘smtp’, to ‘protocol’ => ‘mail’

Obviously there are advantages to using smtp but if your priority is getting the css into the email by that means this post is SOLVED.

Thanks for the help everyone.

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  

  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.