CODEWITHSUNDEEP
htmlcsscodeigniteremail
Shabasy
Shabasy

Reputation: 53

Codeigniter email - style tag / css not working

I am trying to send innerhtml of a particular div to email(in Codeigniter framework).

I got the inner html of the div using jquery and transfered the data to the controller using ajax.

The mail worked, but my problem is html classes, style tags(except the inline styles i wrote in the view file html), style sheet are not working.

Is there any way to add my style.css file in the email content? I will be ok even if the tag works properly, which I had put at the begining of the <head> section.

Please help, here is my code.

Ajax code for transfering html to controller: 

<script type="text/javascript">
    $(function() {
  $('#sendmail').click(function(e) {

        e.preventDefault();
        $.ajax({
              url:'<?php echo site_url();?>/welcome/send',
              type:'POST',
              data:{'message':$('#body').html(),'subject':'Subject of your e-mail'},
              success:function(data) {
                    alert('You data has been successfully e-mailed');
                    alert('Your server-side script said: ' + data);
              }
        });
  });
});

</script>

Code in the controller public function send() {

            $nome = $this->input->post('message');

           $config = array(
            'protocol' => 'smtp',
            'smtp_host' => 'send.one.com',
            'smtp_port' => '2525',
            'smtp_user' => '[email protected]',
            'smtp_pass' => 'akhil123',
            'charset' => 'utf-8',
            'wordwrap' => TRUE,
            'mailtype' => 'html'
        );
        $this->load->library('email', $config);

        $this->email->set_newline("\r\n");
        $this->email->from('[email protected]', 'The Wanderers');
        $this->email->to('[email protected]');

        $this->email->subject('The Wanderers Proforma Invoice ');

        $formatedMessag ='';

    $formatedMessag = '<html><head><link rel="stylesheet" type="text/css" href="http://localhost/study/extra/style.css"></head><body><style type="text/css">p{color:#cccccc;font-weight:bold;}</style>';
        $formatedMessag .= $nome.'</body></html>';

        $this->email->message($formatedMessag);

        if ($this->email->send()) {

            echo $formatedMessag;

            }

}

Upvotes: 4

Views: 7346

Answers (2)

Sean
Sean

Reputation: 6499

As far as I know, no email clients allow loading of external stylesheets for HTML emails.

Ultimately, this means that you have to declare the styles in the head of the document, e.g.

<head>
    <style>
        body { background: black; color: white; }
    </style>
</head>

However, some email clients (Well, pretty much just outlook) don't even allow some styles defined in the head of the document, which means inlining styles like such:

<body style="background: black; color: white;"></body>

(a little bit of me inside just died)

There are also a number of problems with using even inline CSS in HTML emails as some clients (again mostly outlook) don't support simple CSS features like float's. Which ends up meaning you have to code the newsletter with tables to ensure it works for the majority of people.

For more information see this article (or just Google around): http://www.sitepoint.com/code-html-email-newsletters/

Upvotes: 3

Sergey Telshevsky
Sergey Telshevsky

Reputation: 12217

The problem, actually is that you can use only inline and internal css, that means, you can define all the css rules right inside the element like

<td style="padding:10px;"><b style="color:red;">Texty</b></td>

or in the <head></head> part of your email document:

<head>
    <style>
        b {color:red;}
        td { padding:10px; }
    </style>
</head>

Upvotes: 0

Related Questions