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

#11
[eluser]CroNiX[/eluser]
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
Code:
<a syle="color:green">the link</a>
IS inline)
GMail is one of the email providers known to strip the &lt;style&gt; tags.
http://stackoverflow.com/questions/72241...il-clients

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

#12
[eluser]Neoraj3.0[/eluser]
Actually I did try putting all my styles inline using this tool: http://templates.mailchimp.com/resources/inline-css/

But got the same result

#13
[eluser]ivantcholakov[/eluser]
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):

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

![][1]

# 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/


--b1_38996d61ccb9fd52e37b16c1fce774dc
Content-Type: multipart/related;
boundary="b2_38996d61ccb9fd52e37b16c1fce774dc"

--b2_38996d61ccb9fd52e37b16c1fce774dc
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;head&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;}

    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;


    <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>


&lt;/body&gt;
&lt;/html&gt;


--b2_38996d61ccb9fd52e37b16c1fce774dc
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

iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAMAAAAvHNATAAAAMFBMVEXriyPghiO7ciOZYCJsSCKD
dEZGZ3A8VlwwSVEpMzYuPkMlKSpLNyEyKiEhISEWGyDowOD9AAAEVUlEQVR4Ae2ZYa7cIAyEB4iy
CQR8/9u2Gz1ZRa23rDOR8oM5wffyecfAQ3toJtgEm2APygSbYBNsgk2wCTbBJlgpTwST5SjrVh4I
FpO81vVVngZWQ2x5/Z3X/igwWYCjrauiPQYsBiTZ1h+0/BQwqeF36r5q8kPAFoSARV6rZn+GyhhC
QJRt1WxPAJMjnKll1bzIYH6TfJcElREnWGw795OBYPLMu8o0DwBLOLG0ymiNAYLJM2yXYJj8e/wL
HcxhUl1mZpWBY5JfZbhmUrnoVQaSyXMt/Tn+QgZzmNQcQqwyXF1HncvMqzKwTPrXEh+shj44iFWG
KyaDhl9lYJjUNF6VgWNSx39jVRk4v0l1ubNcgmJSU9uLVGVgmDRcZjqYw6SuJcf4k8F0HXWhVRm8
XGrSrrJLLsExqYmtcVyCc7DQ4CBVGS4f9m+qMnBN8qoMPJNaZfumKTQwGYtl8nQ5mK/AlpiGEoOd
NJivwGrCWIIdDCUen/89AOP0d3eSSCvblsvw8EuNuJsK4ZDW9u2d/MWvMt1Mhlillbz9ZC+jYHKE
W9GWJj+fy0ZTML9Ov0YTzS5YactNZEiqsc9ug/l1ejX2GQNrUhP4U//WmP/NVQbAtNJwt0ZN/maJ
yxHB1dgsjft3pwvRSrtXYzbr4n6dSE1asT/XOBi50hYxNRbvQTHhVo3+E6y/0rwaFexWnRjT6ADT
u4f/KGFr9IO5darGZmu8BqYbiqsxl8YA00pjadwd90rWhkISsTSW5gBjbajD1ki7iTt+nU6N94OF
6tboAIvjYFikrKtHowOsfjf657uPodEBRlsAreX1Hbu8aGDpK7DT5ZmX/bk4KiMcLhVNudhgciB8
k3i6VDTVSAVzmAw4pKzel2LcZVJdara7wOT4eof3Lt1g/NPiIbvtkgcWv+XC0rnMN4FVx7Fa2uZ0
iVtMamrnsvjBfGWBz4vc5RLXywIxWWhIbpe4XPtInw7dVfKqWW8BS7DvQVITyC7hN6n3oD036e5Q
Zvm/hA4mh/G55DzXF0tn7Fy+ChHMLgvEQ58ud71DkRY5/Kd9pD9foHNpqpOxyOGtfYSfz6Up/3wW
8i5yOE0i1e7BXnWyFjmcZbG0c+o1qvMI+LTINzJYjTCmvs/+V6UhNlf5w1H73dT3yfosZLksXLAE
Y+r7lP5ZSF06yh/jtW9NvSZ3z0IXD2UYM2lMvXn5V53uQxnGy0KnfuTlUivNXuQMsAhz6u3Lf4J9
KCOB1f9NfS4fX7o9ixzDJpHq+OdSne5FjuGysKe+fPqTvIscQ7X/cer//9Ide5cEMK19e+rLyD8u
HC4xYvLD1I9MqOHyusrRqbd1Goeyy8PfmlUSQ5GWjEV+Eczg2tt4autfV1hgbc+ez9Un2y4dYJqS
HZ/LQitEMEXTkriAlnlgHVpu/mzqkgamaKrRj8YD05S9tIsp27rzwSgpTwXTTLAJNsEm2ASbYBNs
gk2wCTbBbs4vAqz6xMjzVoYAAAAASUVORK5CYII=


--b2_38996d61ccb9fd52e37b16c1fce774dc--


--b1_38996d61ccb9fd52e37b16c1fce774dc--

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 ?

#14
[eluser]Neoraj3.0[/eluser]
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):

Code:
&lt;head&gt;
&lt;meta http-equiv=3D"Content-Type" c charset=3Dutf-8"&gt;
&lt;meta name=3D"viewport" c&gt;
=09
=20
&lt;/head&gt;

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

#15
[eluser]Neoraj3.0[/eluser]
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.