Forum

Expand all | Collapse all

Use CSS in Outbounding Mail

  • 1.  Use CSS in Outbounding Mail

    Posted 09-23-2019 16:14
    Hi everyone,

    Can someone tell me if it's possible to use CSS in outbound mails? I know it's possible to use some HTML tags, like <b> to make the text bold or change the font color. But what I need is slightly more complex.

    I want to use an image as backgroud and write over it. I was able to make it as an HTML file, but I used CSS. When I tried to use the same code in an e-mail template, it didn't work.

    Regards,

    ------------------------------
    Leonardo Blay
    Senior Analyst
    Infoglobo
    Rio de Janeiro
    +55 21 25349747
    ------------------------------


  • 2.  RE: Use CSS in Outbounding Mail

    Posted 09-23-2019 17:50
    Edited by Nadeem Ather 09-23-2019 17:52
    yes, you should be able to: Just include your css definitions in <style> </style>

    Example: (works for me)

    <style>
    body {font-family: Verdana,"Trebuchet MS",Tahoma,sans-serif;font-size: 100%;}
    </style>

    ------------------------------
    Nadeem Ather
    ------------------------------



  • 3.  RE: Use CSS in Outbounding Mail

    Posted 09-24-2019 10:11
    Thank you Nadeem,

    I've tried as you said:

    <style>
    body {position: absolute; top: 120px; left: 225px; text-align:justify; max-height: 155px; width:330px; overflow:hidden; color:#0d6c6e; font-family:Quicksand; font-size:15px; line-height:20px;}
    </style>
    <body>
    <a href="http://pesquisa.infoservicos.infoglobo.com.br/Chamado=${tr.ticket_identifier}&EMail=${person1_alt_email}&Grupo=${assigned_to_group_name}"><img src="https://d79tnh4iwbsrj.cloudfront.net/indicadores/ImgIdentV/Pesquisa.png" height=800px width=600px></a>
    PESQUISA DE SATISFAÇÃO DA TECNOLOGIA
    A sua solicitação foi finalizada e gostaríamos de contar com a sua colaboração para avaliar o nosso atendimento, a fim de que possamos melhorar os nossos serviços sempre.</div>
    Para isso, basta <a href="http://pesquisa.infoservicos.infoglobo.com.br/Chamado=${tr.ticket_identifier}&EMail=${person1_alt_email}&Grupo=${assigned_to_group_name}">clicar aqui</a>. São perguntas simples e rápidas que serão de grande valia para nosso time de atendimento.
    DETALHES DO CHAMADO
    DESCRIÇÃO: Chamado ${tr.ticket_identifier} - ${tr.ticket_description}
    RESOLUÇÃO: ${resolution}
    </body>

    But the result was like the attachment 1.pdf. Nothing in the style was applied.

    Yesterday, I was trying any sort of things and come to this:

    <div style="background-image: url(Pesquisa.png);height:800px;width:600px;"></div>
    <div style="margin-top:-700px;margin-left:225px;text-align:center;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">PESQUISA DE SATISFAÇÃO DA TECNOLOGIA</div>
    <div style="margin-top:20px;margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">A sua solicitação foi finalizada e gostaríamos de contar com a sua colaboração para avaliar o nosso atendimento, a fim de que possamos melhorar os nossos serviços sempre.</div>
    <div style="margin-top:20px;margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">Para isso, basta <a href="http://pesquisa.infoservicos.infoglobo.com.br/Chamado=${tr.ticket_identifier}&EMail=${person1_alt_email}&Grupo=${assigned_to_group_name}">clicar aqui</a>. São perguntas simples e rápidas que serão de grande valia para nosso time de atendimento.</div>
    <div style="margin-top:20px;margin-left:225px;text-align:center;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">DETALHES DO CHAMADO</div>
    <div style="margin-top:20px;margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">DESCRIÇÃO: Chamado ${tr.ticket_identifier} - ${tr.ticket_description}</div>
    <div style="margin-top:20px;margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">RESOLUÇÃO: ${resolution}</div>

    The result is on attached file 2.pdf. It was almost what I want. It respected every style tag but margin-top:-700px, that should set the cursor over the image and them write the text.

    FYI: I'm using Office 365 Web.

    Any thoughts?

    Regards,

    ------------------------------
    Leonardo Blay
    Senior Analyst
    Infoglobo
    Rio de Janeiro
    +55 21 25349747
    ------------------------------

    Attachment(s)

    pdf
    1.pdf   513K 1 version
    pdf
    2.pdf   553K 1 version


  • 4.  RE: Use CSS in Outbounding Mail

    Posted 09-24-2019 10:49
    I was inspecting the e-mail and I've noted that every time that I set margin-top to a negative value, the e-mail remove it. Every time I set to a positive value, it works.

    ------------------------------
    Leonardo Blay
    Senior Analyst
    Infoglobo
    Rio de Janeiro
    +55 21 25349747
    ------------------------------



  • 5.  RE: Use CSS in Outbounding Mail

    Posted 09-24-2019 13:24
    I found a way. Using tables:

    <table height=800px width=600px cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td valign="top" align="left" background="https://d79tnh4iwbsrj.cloudfront.net/indicadores/ImgIdentV/Pesquisa2.png">
    <div style="margin-top:90px;margin-left:225px;text-align:center;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">PESQUISA DE SATISFAÇÃO DA TECNOLOGIA</div>
    <div style="margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">A sua solicitação foi finalizada e gostaríamos de contar com a sua colaboração para avaliar o nosso atendimento, a fim de que possamos melhorar os nossos serviços sempre.</div>
    <div style="margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">Para isso, basta <a href="http://pesquisa.infoservicos.infoglobo.com.br/Chamado=${tr.ticket_identifier}&EMail=${person1_alt_email}&Grupo=${assigned_to_group_name}">clicar aqui</a>. São perguntas simples e rápidas que serão de grande valia para nosso time de atendimento.</div>
    <div style="margin-left:225px;text-align:center;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">DETALHES DO CHAMADO</div>
    <div style="margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">DESCRIÇÃO: Chamado ${tr.ticket_identifier} - ${tr.ticket_description}</div>
    <div style="margin-left:225px;text-align:justify;max-height: 155px;width:330px;overflow:hidden;color:#0d6c6e;font-family:Quicksand;font-size:15px;line-height:20px;">RESOLUÇÃO: ${resolution}</div>
    </td>
    </tr>
    </table>

    The result is:

    Thanks.

    ------------------------------
    Leonardo Blay
    Senior Analyst
    Infoglobo
    Rio de Janeiro
    +55 21 25349747
    ------------------------------