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

#1
[eluser]Neoraj3.0[/eluser]
This template with CSS works fine locally when I do a email from localhost using gmail's smtp but on the live site the email when generated prints out the CSS code instead of rendering it.

// my configs
$email_config = Array(
'protocol' => 'smtp',
'smtp_host' => 'smtp.gmail.com',
'smtp_port' => '465',
'smtp_crypto' => 'ssl',
'smtp_timeout' => '7',
'smtp_user' => '[email protected]',
'smtp_pass' => 'my password',
'charset' => 'iso-8859-1', //or 'charset' => 'iso-8859-1'
'mailtype' => 'html',
'wordwrap' => TRUE,
'starttls' => true,
'newline' => "\r\n"
);


my css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" c charset=utf-8" /&gt;
&lt;meta name="viewport" c&gt;
&lt;style&gt;
/**********************************************
* Ink v1.0.5 - Copyright 2013 ZURB Inc *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a {
padding:0;
}

body{
width:100% !important;
min-width: 100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}

.ExternalClass {
width:100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}

#backgroundTable {
margin:0;
padding:0;
width:100% !important;
line-height: 100% !important;
}

img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: left;
clear: both;
display: block;
}

center {
width: 100%;
min-width: 580px;
}

a img {
border: none;
}

p {
margin: 0 0 0 10px;
}

table {
border-spacing: 0;
border-collapse: collapse;
}

td {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse !important;
}

table, tr, td {
padding: 0;
vertical-align: top;
text-align: left;
}

hr {
color: #d9d9d9;
background-color: #d9d9d9;
height: 1px;
border: none;
}

/* Responsive Grid */

table.body {
height: 100%;
width: 100%;
}

table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}

table.row {
padding: 0px;
width: 100%;
position: relative;
}

table.container table.row {
display: block;
}

td.wrapper {
padding: 10px 20px 0px 0px;
position: relative;
}

table.columns,
table.column {
margin: 0 auto;
}

table.columns td,
table.column td {
padding: 0px 0px 10px;
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
padding-right: 10px;
}

td.sub-column, td.sub-columns {
min-width: 0px;
}

table.row td.last,
table.container td.last {
padding-right: 0px;
}

table.one { width: 30px; }
table.two { width: 80px; }
table.three { width: 130px; }
table.four { width: 180px; }
table.five { width: 230px; }
table.six { width: 280px; }
table.seven { width: 330px; }
table.eight { width: 380px; }
table.nine { width: 430px; }
table.ten { width: 480px; }
table.eleven { width: 530px; }
table.twelve { width: 580px; }

table.one center { min-width: 30px; }
table.two center { min-width: 80px; }
table.three center { min-width: 130px; }
table.four center { min-width: 180px; }
table.five center { min-width: 230px; }
table.six center { min-width: 280px; }
table.seven center { min-width: 330px; }
table.eight center { min-width: 380px; }
table.nine center { min-width: 430px; }
table.ten center { min-width: 480px; }
table.eleven center { min-width: 530px; }
table.twelve center { min-width: 580px; }

table.one .panel center { min-width: 10px; }
table.two .panel center { min-width: 60px; }
table.three .panel center { min-width: 110px; }
table.four .panel center { min-width: 160px; }
table.five .panel center { min-width: 210px; }
table.six .panel center { min-width: 260px; }
table.seven .panel center { min-width: 310px; }
table.eight .panel center { min-width: 360px; }
table.nine .panel center { min-width: 410px; }
table.ten .panel center { min-width: 460px; }
table.eleven .panel center { min-width: 510px; }
table.twelve .panel center { min-width: 560px; }

.body .columns td.one,
.body .column td.one { width: 8.333333%; }
.body .columns td.two,
.body .column td.two { width: 16.666666%; }
.body .columns td.three,
.body .column td.three { width: 25%; }
.body .columns td.four,
.body .column td.four { width: 33.333333%; }
.body .columns td.five,
.body .column td.five { width: 41.666666%; }
.body .columns td.six,
.body .column td.six { width: 50%; }
.body .columns td.seven,
.body .column td.seven { width: 58.333333%; }
.body .columns td.eight,
.body .column td.eight { width: 66.666666%; }
.body .columns td.nine,
.body .column td.nine { width: 75%; }
.body .columns td.ten,
.body .column td.ten { width: 83.333333%; }
.body .columns td.eleven,
.body .column td.eleven { width: 91.666666%; }
.body .columns td.twelve,
.body .column td.twelve { width: 100%; }

td.offset-by-one { padding-left: 50px; }
td.offset-by-two { padding-left: 100px; }
td.offset-by-three { padding-left: 150px; }
td.offset-by-four { padding-left: 200px; }
td.offset-by-five { padding-left: 250px; }
td.offset-by-six { padding-left: 300px; }
td.offset-by-seven { padding-left: 350px; }
td.offset-by-eight { padding-left: 400px; }
td.offset-by-nine { padding-left: 450px; }
td.offset-by-ten { padding-left: 500px; }
td.offset-by-eleven { padding-left: 550px; }

td.expander {
visibility: hidden;
width: 0px;
padding: 0 !important;
}

table.columns .text-pad,
table.column .text-pad {
padding-left: 10px;
padding-right: 10px;
}

table.columns .left-text-pad,
table.columns .text-pad-left,
table.column .left-text-pa

#2
[eluser]InsiteFX[/eluser]
Most email clients will ignore attached CSS files that are linked in.

The most reliable way to include CSS in an HTML email is to use inline styles.

#3
[eluser]ivantcholakov[/eluser]
Yes, I use a simplified version of http://htmlemailboilerplate.com/. It works fine for me.

#4
[eluser]Neoraj3.0[/eluser]
Actually I also used a tool that places all styles inline http://templates.mailchimp.com/resources/inline-css/ but even with only inline styles it didnt work.

I will try http://htmlemailboilerplate.com/

#5
[eluser]Neoraj3.0[/eluser]
Ok so I tried both files from htmlemailboilerplate (the lite version and normal version) I removed all comments as was suggested on the boilerplate website but same result. The css code just prints out to the email (this is gmail and hotmail).

Any other suggestions?

#6
[eluser]ivantcholakov[/eluser]
It is a little offtopic, but I see in your email settings ‘charset’ => ‘iso-8859-1’, on the other hand your html message use utf-8 charset.

Edit: Maybe you use a filter that escapes/removes the style tag? Did you check on some mail client the source of a received message? Is the message HTML source as you expect it to be?

#7
[eluser]Neoraj3.0[/eluser]
I tried utf8 earlier and again but same result. Strange though but the css i provided in my first post works great on localhost when i test an email but not on live site when i send an email. Could it be the host? i am using a free host 000webhost

#8
[eluser]ivantcholakov[/eluser]
Compare the sources of the wrong and right messages (received), the difference will give the clue.

#9
[eluser]Neoraj3.0[/eluser]
how would I check the sources ? I am knew to using the CI email class

I tried looking at the messages in echo $this->email->print_debugger(); but no progress there.

#10
[eluser]ivantcholakov[/eluser]
Send a "good" and a "bad" message from both of your servers to your e-mail address. I suppose you are using an e-mail client.

Then see this how to view source of the received messages: http://luxsci.com/blog/viewing-the-messa...email.html

Look at the sources of both messages, see what is the difference that prevents enforcing CSS.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


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