Advanced email customization

Advanced email customization

Hi,

I've been able to create a responsive table for my user invitation email. My only problem is that i'm unable to customize the button to "accept invitation". I also tried to use the "link" placeholder, but in that case appears blue (due to the a href element generated.)  Is it possible to:

  1. Customize the button (colors, text, size, style...)?
  2. Customize the color of the link generated by the placeholder? ${PortalUser.ACCEPT_PORTAL_INVITATION::Accept}
  3. Use a placeholder that outputs only the link (just the http:// without the <a href>; that way I could create my <a> element
  4. Add a CSS rule?
         <style type="text/css">
        .link a {color:#fff !important;
         text-decoration:none !important;}
         </style>

Any of these approaches would be helpful in order to personalize and brand the emails sent by our helpdesk.

Please let me know. Here's my form:


  1.     <style type="text/css">
  2.     .link a {color:#fff !important;
  3.     text-decoration:none !important;}
  4.     </style>

  5. <!--[if gte mso 9]>
  6.     <style type="text/css">
  7.     .link a {color:#fff !important;
  8.     text-decoration:none !important;}
  9.     </style>
  10. <![endif]-->

  11. <div style="font-size: 13.0px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;width: 100% !important; height: 100%; line-height: 1.6em;background-color: #f6f6f6, text-align:center">
  12. <table align="center" bgcolor="#f6f6f6" class="body-wrap" style="background-color:rgb(246,246,246);font-family:helvetica neue,helvetica,arial,sans-serif;font-size:14.0px;margin:0;width:100%;">
  13.    <tbody>
  14.       <tr style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;margin: 0;">
  15.          <td class="container" style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;vertical-align: top;display: block;max-width: 600px;clear: both;margin: 0 auto;" valign="top">
  16.          <div class="content" style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;max-width: 600px;display: block;margin: 0 auto;">
  17.          <table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="border: 2.0px solid rgb(225,225,225);font-family: helvetica neue , helvetica , arial , sans-serif;font-size: 14.0px;margin: 0;padding: 10.0px;" width="100%">
  18.             <tbody>
  19.                <tr>
  20.                   <td style="vertical-align: top;padding: 20px 0px 20px 0px;text-align: center;" valign="top"><a href="http://www.infinitegroup.com.do"><img alt="Infinite Group, EIRL" src="http://www.infinitegroup.com.do/signature/signature.png" style="width: 120.0px;height: 97.0px;" /> </a></td>
  21.                </tr>
  22.                <tr>
  23.                   <td style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;vertical-align: middle;margin: 0.0px;padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;background-color: rgb(255,103,0);"><span style="font-size: 22.0px;"><strong><span style="color: rgb(255,255,255);">&iexcl;Bienvenido a nuestro Portal de Autoservicio! </span> </strong> </span></td>
  24.                </tr>
  25.                <tr>
  26.                   <td  style="vertical-align: top;margin: 0.0px;padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;" valign="top"><span style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;text-align: center;background-color: rgb(255,255,255);">Para facilitar el manejo de sus solicitudes, le hemos habilitado el acceso a nuestro &nbsp; </span> <strong style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;text-align: center;background-color: rgb(255,255,255);"> Portal de Autoservicio </strong> <span style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;text-align: center;background-color: rgb(255,255,255);"> . A trav&eacute;s del mismo podr&aacute;s dar seguimiento a tus solicitudes en l&iacute;nea, a&ntilde;adir comentarios y verificar el estatus de los mismos. </span></td>
  27.                </tr>
  28.                <tr>
  29.                   <td style="vertical-align: center;margin: 0.0px;padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;" valign="center">
  30.                   <div class="link" style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;color: #ffffff !important;text-decoration: none !important;line-height: 2.0em;font-weight: bold;text-align: center;cursor: pointer;display: inline-block;border-radius: 5.0px;text-transform: capitalize;background-color: rgb(255,103,0);margin: 0;border-color: rgb(255,103,0);border-style: solid;border-width: 10.0px 20.0px;width:100px;">${PortalUser.ACCEPT_PORTAL_INVITATION::Acceder}</div>
  31.                   </td>
  32.                </tr>
  33.                <tr>
  34.                   <td style="vertical-align: top;margin: 0.0px;padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;" valign="top"><span>Su nombre de usuario es:&nbsp;</span><strong >${User.Email}.&nbsp;</strong><span>Cualquier duda puede contactarnos a&nbsp; </span><a href="mailto:operaciones@infinitegroup.com.do?subject=Solicitud%20de%20Ayuda%20-%20Portal%20de%20Autoservicio"> operaciones@infinitegroup.com.do</a> </span> </span></td>
  35.                </tr>
  36.                <tr>
  37.                   <td style="padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;">&mdash; El equipo <span style="color: rgb(255,103,0);"> <strong> Infinite </strong> </span></td>
  38.                </tr>
  39.             </tbody>
  40.          </table>
  41.          </div>
  42.          </td>
  43.       </tr>
  44.    </tbody>
  45. </table>

  46. <div class="footer" style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;width: 100.0%;clear: both;color: rgb(153,153,153);margin: 0;padding: 20.0px;background-color: rgb(246,246,246);">
  47. <table style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;margin: 0;" width="100%">
  48.    <tbody>
  49.       <tr>
  50.          <td align="center" style="font-size: 12.0px">Infinite Group, EIRL.</td>
  51.       </tr>
  52.       <tr>
  53.          <td align="center" style="font-size: 12.0px">Siganos en <a href="https://www.instagram.com/infinitegrouprd/"> @instagram </a> , <a href="https://www.facebook.com/infinitegrouprd/"> Facebook </a> y <a href="https://www.twitter.com/infinitegrouprd/"> Twitter </a></td>
  54.       </tr>
  55.    </tbody>
  56. </table>
  57. </div>
  58. </div>