Adding CSS to Emails?

jayarajantony · ‎08-12-2014

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.

Charlie Ward · ‎07-16-2015

This is the source code of the email from the Emails Log :

<title>1CALL Facility Services</title>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<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;">FCR0010187</span>), was opened at <span style="color: #000000;">07-08-2015 14:32 CDT</span> in regard to the issue, <span style="color: #000000;">Maintenance > Exterior > Building</span>, and has been assigned to, <span style="color: #000000;">Charlie Ward</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: Maintenance > Exterior > Building</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: Charlie Ward</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 : Maintenance > Exterior > Building</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>

<div>

<div><span class="tdwrap"><strong>07-08-2015 14:32 CDT - Charlie Ward</strong></span><span style="float: right;"><sup>Additional comments</sup></span></div>

</div>

</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">© 2015 | A service of University Hospitals Authority & Trust</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

russell_miller · ‎07-16-2015

Hi Charlie,

I would try taking out the meta tag, the style definition that you have in that email template and insert it with the script and slap a <div> around the whole thing.

<div>${mail_script:1call_email.styles}


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


</div>

You should also be able to take the inline styles for each of those <td> classes that you have out of the template and put them into the referenced style sheet.

Here is an example of one of mine using the mailscript:

<div>${mail_script:ef.setstyles}


<table class="mailmessagemain" align="center">


<tbody>


<tr>


<td colspan="2" align="center">${mail_script:email.info.header}</td>


</tr>


<tr>


<td class="infotext" colspan="2">Hi ${caller_id.first_name}<br /><br />Unfortunately, we are unable to process your request as additional information is required.<br /><br />The information we are looking for is documented in the Comments below.<br /><br /></td>


</tr>


<tr>


<td style="width: 35%;"><strong>The Ticket is:</strong></td>


<td>${mail_script:cms.deeplink}</td>


</tr>


<tr>


<td><strong>Priority:</strong></td>


<td>${priority}</td>


</tr>


<tr>


<td><strong>Current Status:</strong></td>


<td>${state}</td>


</tr>


<tr>


<td><strong>Assigned to (group):</strong></td>


<td>${assignment_group}</td>


</tr>


<tr>


<td colspan="2"><hr />


<p><strong>Summary:</strong></p>


<p>${short_description}</p>


<p><strong>Comments:</strong>${comments}</p>


<hr />


<p><strong>What's next for my ticket?</strong><br /><br />We require more information from you in order to progress this ticket .Please respond to this email with the information requested or call My Service Centre on 1300 742 212 and quote your ticket number.<br /><br />If you do not take any action, you will receive reminders from us via email, including a final reminder, over the next few days, upon which your ticket will automatically close within 7 days.</p>


</td>


</tr>


<tr>


<td colspan="2" align="center">${mail_script:email.footer}</td>


</tr>


</tbody>


</table>


</div>

And the resulting output:

<html><head></head><body><div><div style="display: none;"><style>table, th, td {


       font-family: Verdana, Geneva, sans-serif;


       font-size: 12px;


}


table.mailmessagemain{


       width:600px;


       border: 0; 


       margin: 0 auto;


       text-align: left;


}


td.infotext {


       width: 100%;


       /*background-color: #EFEBE2;*/


}</style></div>


<table class="mailmessagemain" align="center">


<tbody>


<tr>


<td colspan="2" align="center"><div><a href="https://xxxxxxxx.service-now.com/ess"><img src="https://xxxxxxxx.service-now.com/info_header.png" /></a></div></td>


</tr>


<tr>


<td class="infotext" colspan="2">Hi Russell<br /><br />Unfortunately, we are unable to process your request as additional information is required.<br /><br />The information we are looking for is documented in the Comments below.<br /><br /></td>


</tr>


<tr>


<td style="width: 35%;"><strong>The Ticket is:</strong></td>


<td><div><a href="https://xxxxxxxx.service-now.com/ess/incident_detail.do?sysparm_document_key=sc_req_item,5733009c4f8...">RITM0010845</a></div></td>


</tr>


<tr>


<td><strong>Priority:</strong></td>


<td></td>


</tr>


<tr>


<td><strong>Current Status:</strong></td>


<td>Awaiting User Info</td>


</tr>


<tr>


<td><strong>Assigned to (group):</strong></td>


<td>Service Desk</td>


</tr>


<tr>


<td colspan="2"><hr />


<p><strong>Summary:</strong></p>


<p>Update my profile</p>


<p><strong>Comments:</strong></p><div><div><span colspan="2"><hr /></span></div><div style=""><span class="tdwrap"><strong>17-07-2015 09:22:51 AEST - ITIL User</strong></span><span style="float:right;"><sup>Additional comments</sup></span></div><div style=""><span colspan="2"><span style="word-wrap:break-word;display:block;">Do you still need this?</span></span></div></div><p></p>


<hr />


<p><strong>What's next for my ticket?</strong><br /><br />We require more information from you in order to progress this ticket .Please respond to this email with the information requested or call My Service Centre on 1300 742 212 and quote your ticket number.<br /><br />If you do not take any action, you will receive reminders from us via email, including a final reminder, over the next few days, upon which your ticket will automatically close within 7 days.</p>


</td>


</tr>


<tr>


<td colspan="2" align="center"><div><a href="https://xxxxxxxx.service-now.com/ess"><img src="https://xxxxxxxx.service-now.com/footer.png" /></a></div></td>


</tr>


</tbody>


</table>


</div><div>  </div><div style="display:inline">Ref:MSG0009243</div></body></html>

Charlie Ward · ‎07-16-2015

Thanks Russel for the help. I removed what you suggested and the styles still don't see to be applied. I wanted to see if I setup the notification email script correctly. This is what I have. My style sheet is called 1CALL Email. I want to make sure I was referencing it correctly and also that I had the proper coding punctuation in. Thanks in Advance!

//Put the styles into 1CALL email messages

var stylesheet = new GlideRecord ('content_css');

stylesheet.get('name', '1CALL_Email' ); //Stylesheet for email styling

template.print('<div style="display: none;"><style>' + stylesheet.style + '</style></div>');

Here is my stylesheet named 1CALL_Email

@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; }

}

russell_miller · ‎07-16-2015

HI Charlie,

I have the stylesheet inserting on Demo004 have a look at the email log, and you can see that the last inserted approval email (Email Record) used the template that I updated and pulled the newly defined stylesheet.

Let me know if you have more questions.

R

Charlie Ward · ‎07-21-2015

I have changed up my CSS and HTML to not include a background image. We didn't like the issues with images looking like attachments on email and also when forwarding the email, the image didn't stay inline with the email.

Here is the revised version as it is displayed after you save the HTML message code and then click on "source code":

HTML

<div>${mail_script:1CALLEmail.styles}

<title>1CALL Facility Services</title>

table.container{

font-family: sans-serif, Arial, Helvetica;

font-size: 18px;

}

td.headerbg{

height: 5em;

padding-bottom: 30px;

border-bottom: 2px solid #ffffff;

}

.headercontent{

padding-top: 20px;

width: 16em;

height: 5em;

margin: 0 auto;

}

.one{

border-radius: 100%;

height: 3.8em;

width: 3.8em;

background-color: #b20838;

float: left;

margin-left: 5px;

position: relative;

margin-left: 10px;

}

.one p.numberone{

margin-top: 0em;

font-size: 3.5em;

font-weight: bold;

color: #ffffff;

}

.call{

width: 2.8em;

height: 1em;

float: left;

font-size: 4em;

margin-right: 5px;

font-weight: bold;

color: #140c13;

text-align: left;

float: right;

position: relative;

line-height: 70px;

}

.facilityservices{

clear: both;

width: 220px;

color: #939598;

font-size: 1.1em;

font-weight: lighter;

text-align: center;

letter-spacing: 2px;

}

.fs{

padding-top: 5px;

line-height: 1.1em;

}

.clear{

clear: both;

}

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

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

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

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

td.headerbg{ border-bottom: 2px solid #ffffff; padding-bottom: 10px !important;}

.headercontent{ width: 12.75em;}

.one{ border-radius: 100%; height: 3em; width: 3em; background-color: #b20838; float: left; position: relative; margin-left: 10px;}

.one p.numberone{ font-size: 2.8em; line-height: 1.1em;}

.call{ width: 2.8em; height: 1em; float: left; font-size: 3em; font-weight: bold; color: #140c13; line-height: 55px; margin-left: 5px;}

.fs{ font-size: .8em !important;}

}

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

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

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

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

td.headerbg{ border-bottom: 2px solid #ffffff !important; padding-bottom: 10px !important;}

.headercontent{ width: 12.75em;}

.one{ border-radius: 100%; height: 3em; width: 3em; background-color: #b20838; float: left; position: relative; margin-left: 10px;}

.one p.numberone{ font-size: 2.8em; line-height: 1.1em;}

.call{ width: 2.8em; height: 1em; float: left; font-size: 3em; font-weight: bold; color: #140c13; line-height: 1em; margin-left: 5px;}