Adding CSS to Emails?

jayarajantony
Giga Contributor

‎08-12-2014 06:40 AM

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.

Labels:
0 Helpfuls
  • 7,799 Views
25 REPLIES 25

Charlie Ward
Kilo Expert
In response to Charlie Ward

‎07-21-2015 07:25 PM

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


  1. <div>${mail_script:1CALLEmail.styles}
  2. <title>1CALL Facility Services</title>
  3. <style type="text/css"><!--
  4. table.container{
  5.   font-family: sans-serif, Arial, Helvetica;
  6.   font-size: 18px;
  7.   }
  8. td.headerbg{
  9.   height: 5em;
  10.   padding-bottom: 30px;
  11.   border-bottom: 2px solid #ffffff;
  12.   }
  13. .headercontent{
  14.   padding-top: 20px;
  15.   width: 16em;
  16.   height: 5em;
  17.   margin: 0 auto;
  18.   }
  19. .one{
  20.   border-radius: 100%;
  21.   height: 3.8em;
  22.   width: 3.8em;
  23.   background-color: #b20838;
  24.   float: left;
  25.   margin-left: 5px;
  26.   position: relative;
  27.   margin-left: 10px;
  28.   }
  29. .one p.numberone{
  30.   margin-top: 0em;
  31.   font-size: 3.5em;
  32.   font-weight: bold;
  33.   color: #ffffff;
  34.   }
  35. .call{
  36.   width: 2.8em;
  37.   height: 1em;
  38.   float: left;
  39.   font-size: 4em;
  40.   margin-right: 5px;
  41.   font-weight: bold;
  42.   color: #140c13;
  43.   text-align: left;
  44.   float: right;
  45.   position: relative;
  46.   line-height: 70px;
  47.   }
  48. .facilityservices{
  49.   clear: both;
  50.   width: 220px;
  51.   color: #939598;
  52.   font-size: 1.1em;
  53.   font-weight: lighter;
  54.   text-align: center;
  55.   letter-spacing: 2px;
  56.   }
  57. .fs{
  58.   padding-top: 5px;
  59.   line-height: 1.1em;
  60.   }
  61. .clear{
  62.   clear: both;
  63.   }
  64. @media only screen and (max-width: 599px){
  65.   table.container { width: 100% !important; }
  66.   table.container td{ border-left: none !important; border-right: none !important;}
  67.   td.headline h1 { font-size: 16px !important;}
  68.   td.request_openedat { font-size: 13px !important; line-height:15px !important; }
  69.   td.request_category { font-size: 13px !important; line-height:15px !important; }
  70.   td.request_assignedto { font-size: 13px !important; line-height:15px !important; }
  71.   td.request_shortdescription { font-size: 13px !important; line-height:15px !important; }
  72.   td.request_comments_title { font-size: 13px !important; line-height:15px !important; }
  73.   td.request_comments{ font-size: 13px !important; line-height:15px !important; }
  74.   td.headerbg{ border-bottom: 2px solid #ffffff; padding-bottom: 10px !important;}
  75.   .headercontent{ width: 12.75em;}
  76.   .one{ border-radius: 100%; height: 3em; width: 3em; background-color: #b20838; float: left; position: relative; margin-left: 10px;}
  77.   .one p.numberone{ font-size: 2.8em; line-height: 1.1em;}
  78.   .call{ width: 2.8em; height: 1em; float: left; font-size: 3em; font-weight: bold; color: #140c13; line-height: 55px; margin-left: 5px;}
  79.   .fs{ font-size: .8em !important;}
  80.   }
  81. @media only screen and (max-width: 526px) {
  82.   table.container { width: 100% !important;}
  83.   td.headline h1 { font-size: 14px !important; line-height: 16px !important; text-align: center;}
  84.   td.request_openedat { font-size: 12px !important; line-height:14px !important; }
  85.   td.request_category { font-size: 12px !important; line-height:14px !important; }
  86.   td.request_assignedto { font-size: 12px !important; line-height:14px !important; }
  87.   td.request_shortdescription { font-size: 12px !important; line-height:14px !important; }
  88.   td.request_comments_title { font-size: 12px !important; line-height:14px !important; }
  89.   td.request_comments{ font-size: 12px !important; line-height:14px !important; }
  90.   td.headerbg{ border-bottom: 2px solid #ffffff !important; padding-bottom: 10px !important;}
  91.   .headercontent{ width: 12.75em;}
  92.   .one{ border-radius: 100%; height: 3em; width: 3em; background-color: #b20838; float: left; position: relative; margin-left: 10px;}
  93.   .one p.numberone{ font-size: 2.8em; line-height: 1.1em;}
  94.   .call{ width: 2.8em; height: 1em; float: left; font-size: 3em; font-weight: bold; color: #140c13; line-height: 1em; margin-left: 5px;}
  95.   .fs{ font-size: .8em !important;}
  96.   }
  98.   @media only screen and (max-width: 414px) {
  99.   table.container { width: 100% !important;}
  100.   td.headline h1 { font-size: 13px !important; line-height: 14px !important; text-align: center;}
  101.   td.request_openedat { font-size: 11px !important; line-height:13px !important; }
  102.   td.request_category { font-size: 11px !important; line-height:13px !important; }
  103.   td.request_assignedto { font-size: 11px !important; line-height:13px !important; }
  104.   td.request_shortdescription { font-size: 11px !important; line-height:13px !important; }
  105.   td.request_comments_title { font-size: 11px !important; line-height:13px !important; }
  106.   td.request_comments{ font-size: 11px !important; line-height:13px !important; }
  107.   td.headerbg{ border-bottom: 2px solid #ffffff !important; padding-bottom: 10px !important;}
  108.   .headercontent{ width: 11em; height: 3em;}
  109.   .one{ border-radius: 100%; height: 2.5em; width: 2.5em; background-color: #b20838; float: left; position: relative; margin-left: 10px;}
  110.   .one p.numberone{ font-size: 2.2em; line-height: 1.2em;}
  111.   .call{ width: 2.8em; height: 1em; float: left; font-size: 2.5em; font-weight: bold; color: #140c13; line-height: 1em; margin-left: 5px;}
  112.   .facilityservices{ width: 8em !important;}
  113.   .fs{ font-size: .6em !important;}
  114.   }
  116.   @media only screen and (max-width: 375px) {
  117.   table.container { width: 100% !important;}
  118.   td.headline h1 { font-size: 12px !important; line-height: 13px !important; text-align: center;}
  119.   td.request_openedat { font-size: 10px !important; line-height:12px !important; }
  120.   td.request_category { font-size: 10px !important; line-height:12px !important; }
  121.   td.request_assignedto { font-size: 10px !important; line-height:12px !important; }
  122.   td.request_shortdescription { font-size: 10px !important; line-height:12px !important; }
  123.   td.request_comments_title { font-size: 10px !important; line-height:12px !important; }
  124.   td.request_comments{ font-size: 10px !important; line-height:12px !important; }
  125.   }
  126. --></style>
  127. <table border="0" width="100%" cellspacing="0" cellpadding="0">
  128. <tbody>
  129. <tr>
  130. <td>
  131. <table class="container" border="0" width="600" cellspacing="0" cellpadding="0" align="center" font-family:="" sans-serif="" arial="" helvetica="" font-size:="" 18px="">
  132. <tbody>
  133. <tr>
  134. <td class="headerbg" align="center" valign="top" bgcolor="#eaeaea">
  135. <div class="headercontent">
  136. <div class="one">
  137. <p class="numberone">1</p>
  138. </div>
  139. <div class="call">CALL</div>
  140. <div class="facilityservices">
  141. <p class="fs">FACILITY SERVICES</p>
  142. </div>
  143. </div>
  144. </td>
  145. </tr>
  146. <tr>
  147. <td class="headline" style="padding: 10px 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">
  148. <h1 style="font-weight: normal; font-size: 20px; color: #606060;">REQUEST UPDATE</h1>
  149. </td>
  150. </tr>
  151. <tr>
  152. <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"><span style="color: #b3083a;"> Request #:</span> <span style="color: #000000;">${number}</span>, was updated regarding issue, <span style="color: #000000;">${category}</span>. Please see the below comments.</td>
  153. </tr>
  154. <tr>
  155. <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>
  156. </tr>
  157. <tr>
  158. <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>
  159. </tr>
  160. <tr>
  161. <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>
  162. </tr>
  163. </tbody>
  164. </table>
  165. </td>
  166. </tr>
  167. </tbody>
  168. </table>
  169. </div>


This is what it should look likeScreen Shot 2015-07-21 at 7.25.18 PM.png


This is what is sent out and received


Screen Shot 2015-07-21 at 7.48.40 PM.png


Preview file
92 KB
Preview file
89 KB
0 Helpfuls