Adding CSS to Emails?

[jayarajantony]

We are looking for adding CSS (Adding a arrow shapes to showcase the state) in the Email we designed. We had used mail scripts and script include which are called from Email Notification.(Email notification calls mail script, Mail script calls the function in script include which returns html content of the mail design) . In script include we get style tag and its content(populated from local style sheets) and returning it to notification but it is not reflecting properly.

Is there any way to add CSS to Email notifications? or Is there any way to add style tag or head tag to notification.

Note: We have also used email templates   where CSS worked but for few browsers(IE8,9 ,chrome). it comments the style tag and the CSS is not working as expected.

[pal1]

Hi Gurpreet,

Plz help me with my issue on css in email.

I am struggling with the syntax template.print()

[russell_miller]

Try this...

Styles into your emails...

Let me know if that helps.

R

[Charlie Ward]

Russel, I tried this and my CSS still doesn't work when the notification email is sent out. I don't understand why SN comments out the inline CSS between the style tags.

[russell_miller]

Hi Charile,

Just to check, did you make sure the "Newlines to HTML" unchecked on the mailscript? (<div> tags spread through this will break it)

Could you also post the content of the email log, so I can see your output?

Cheers

R

[Charlie Ward]

Russel,

Yes I did make sure the "Newlines to HTML" was unchecked. I didn't create the HTML Email Template with any <div>'s. I only used tables, tr's and td's. Please see the below code after I save the template:

<p><span>${mail_script:1call_email.styles}</span></p>

<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>1CALL Facility Services</title>

<style type="text/css"><!--

@media only screen and (max-width: 599px){

  table.container { width: 100% !important; }

  table.container td{ border-left: none !important; border-right: none !important;}

  td.headerbg img { display: none; }

  td.headerbg { height: 233px; background: url(email_header_bg_medium.jpg) no-repeat #eaeaea center top;}

  td.headline h1 { font-size: 16px !important;}

  td.request_openedat { font-size: 13px !important; line-height:15px !important; }

  td.request_category { font-size: 13px !important; line-height:15px !important; }

  td.request_assignedto { font-size: 13px !important; line-height:15px !important; }

  td.request_shortdescription { font-size: 13px !important; line-height:15px !important; }

  td.request_comments_title { font-size: 13px !important; line-height:15px !important; }

  td.request_comments{ font-size: 13px !important; line-height:15px !important; }

  }

  @media only screen and (max-width: 526px) {

  table.container { width: 100% !important;}

  table.container td{border: none !important;}

  td.headerbg { height: 205px; background: url(email_header_bg_iphone6plus.jpg) #eaeaea no-repeat center top;}

  td.headline h1 { font-size: 14px !important; line-height: 16px !important; text-align: center; border-bottom: 1px solid #ffffff; padding-bottom: 20px;}

  td.request_openedat { font-size: 12px !important; line-height:14px !important; }

  td.request_category { font-size: 12px !important; line-height:14px !important; }

  td.request_assignedto { font-size: 12px !important; line-height:14px !important; }

  td.request_shortdescription { font-size: 12px !important; line-height:14px !important; }

  td.request_comments_title { font-size: 12px !important; line-height:14px !important; }

  td.request_comments{ font-size: 12px !important; line-height:14px !important; }

  }

  @media only screen and (max-width: 414px) {

  table.container { width: 100% !important;}

  table.container td {border: none !important;}

  td.headerbg { height: 161px; background: url(email_header_bg_iphone6.jpg) #eaeaea no-repeat center top;}

  td.headline h1 { font-size: 13px !important; line-height: 14px !important; text-align: center;}

  td.request_openedat { font-size: 11px !important; line-height:13px !important; }

  td.request_category { font-size: 11px !important; line-height:13px !important; }

  td.request_assignedto { font-size: 11px !important; line-height:13px !important; }

  td.request_shortdescription { font-size: 11px !important; line-height:13px !important; }

  td.request_comments_title { font-size: 11px !important; line-height:13px !important; }

  td.request_comments{ font-size: 11px !important; line-height:13px !important; }

  }

  @media only screen and (max-width: 375px) {

  table.container { width: 100% !important;}

  td.headerbg { height: 146px; background: url(email_header_bg_iphone5s_lower.jpg) #eaeaea no-repeat center top;}

  td.headline h1 { font-size: 12px !important; line-height: 13px !important; text-align: center;}

  td.request_openedat { font-size: 10px !important; line-height:12px !important; }

  td.request_category { font-size: 10px !important; line-height:12px !important; }

  td.request_assignedto { font-size: 10px !important; line-height:12px !important; }

  td.request_shortdescription { font-size: 10px !important; line-height:12px !important; }

  td.request_comments_title { font-size: 10px !important; line-height:12px !important; }

  td.request_comments{ font-size: 10px !important; line-height:12px !important; }

  }

--></style>

</p>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td>

<table class="container" border="0" width="600" cellspacing="0" cellpadding="0" align="center">

<tbody>

<tr>

<td class="headerbg" style="padding: -10px 0px 10px 0px; border-top: 1px solid #c0c0c0;" align="center" valign="top" bgcolor="#eaeaea"><a href="#"><img src="/email_header_bg_large.jpg" alt="1CALL Facility Services" width="600px" height="233px" align="center" border="0" /></a></td>

</tr>

<tr>

<td class="headline" style="padding: 0px 0px 5px 0px; border-bottom: 2px solid #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 18px;" align="center" valign="top" bgcolor="#eaeaea">

<h1 style="font-weight: normal; font-size: 20px; color: #606060;">REQUEST UPDATE</h1>

</td>

</tr>

<tr>

<td class="request_openedat" style="padding: 15px 30px 20px 30px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #939598;" valign="top" bgcolor="#eaeaea">Your request, (Request #: <span style="color: #000000;">${number}</span>), was opened at <span style="color: #000000;">${opened_at}</span> in regard to the issue, <span style="color: #000000;">${u_category}</span>, and has been assigned to, <span style="color: #000000;">${assigned_to}</span>. Please see the below comments.</td>

</tr>

<tr>

<td class="request_category" style="padding: 5px 30px 0px 30px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #b20838;" valign="top" bgcolor="#eaeaea">Category: ${u_category}</td>

</tr>

<tr>

<td class="request_assignedto" style="padding: 5px 30px 0px 30px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #b20838;" valign="top" bgcolor="#eaeaea">Assigned to: ${assigned_to}</td>

</tr>

<tr>

<td class="request_shortdescription" style="padding: 5px 30px 15px 30px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #b20838;" valign="top" bgcolor="#eaeaea">Short Description : ${short_description}</td>

</tr>

<tr>

<td class="request_comments_title" style="padding: 10px 30px 5px 30px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #000000;" valign="top" bgcolor="#c0c0c0">Comments:</td>

</tr>

<tr>

<td class="request_comments" style="padding: 5px 30px 20px 30px; border-bottom: 2px solid #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #ffffff;" valign="top" bgcolor="#c0c0c0">${comments}</td>

</tr>

<tr>

<td class="footer" style="padding: 10px 0px 10px 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #939598;" valign="top" bgcolor="#eaeaea">&copy; 2015 | A service of University Hospitals Authority &amp; Trust</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>