How to add CSS to HTML Email using CI email libary

How to add CSS to HTML Email using CI email libary - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: How to add CSS to HTML Email using CI email libary (/showthread.php?tid=60684)

Pages: 1 2

How to add CSS to HTML Email using CI email libary - El Forum - 06-01-2014

[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">
<html >
<head>
<meta http-equiv="Content-Type" c charset=utf-8" />
<meta name="viewport" c>
<style>
/**********************************************
* 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

How to add CSS to HTML Email using CI email libary - El Forum - 06-01-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

[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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

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

How to add CSS to HTML Email using CI email libary - El Forum - 06-02-2014

[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-message-source-full-headers-of-an-email.html

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