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:
- Customize the button (colors, text, size, style...)?
- Customize the color of the link generated by the placeholder? ${PortalUser.ACCEPT_PORTAL_INVITATION::Accept}
- Use a placeholder that outputs only the link (just the http:// without the <a href>; that way I could create my <a> element
- 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:
- <style type="text/css">
- .link a {color:#fff !important;
- text-decoration:none !important;}
- </style>
- <!--[if gte mso 9]>
- <style type="text/css">
- .link a {color:#fff !important;
- text-decoration:none !important;}
- </style>
- <![endif]-->
- <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">
- <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%;">
- <tbody>
- <tr style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;margin: 0;">
- <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">
- <div class="content" style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;max-width: 600px;display: block;margin: 0 auto;">
- <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%">
- <tbody>
- <tr>
- <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>
- </tr>
- <tr>
- <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);">¡Bienvenido a nuestro Portal de Autoservicio! </span> </strong> </span></td>
- </tr>
- <tr>
- <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 </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és del mismo podrás dar seguimiento a tus solicitudes en línea, añadir comentarios y verificar el estatus de los mismos. </span></td>
- </tr>
- <tr>
- <td style="vertical-align: center;margin: 0.0px;padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;" valign="center">
- <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>
- </td>
- </tr>
- <tr>
- <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: </span><strong >${User.Email}. </strong><span>Cualquier duda puede contactarnos a </span><a href="mailto:operaciones@infinitegroup.com.do?subject=Solicitud%20de%20Ayuda%20-%20Portal%20de%20Autoservicio"> operaciones@infinitegroup.com.do</a> </span> </span></td>
- </tr>
- <tr>
- <td style="padding: 20.0px 0.0px 20.0px 0.0px;text-align: center;">— El equipo <span style="color: rgb(255,103,0);"> <strong> Infinite </strong> </span></td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- <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);">
- <table style="font-family: 'Helvetica Neue' , Helvetica , Arial , sans-serif;font-size: 14.0px;margin: 0;" width="100%">
- <tbody>
- <tr>
- <td align="center" style="font-size: 12.0px">Infinite Group, EIRL.</td>
- </tr>
- <tr>
- <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>
- </tr>
- </tbody>
- </table>
- </div>
- </div>