Este guia explica como personalizar e estilizar o template HTML externo para todos os e-mails enviados do seu site Discourse.
Nível de usuário necessário: Administrador
Todos os e-mails enviados do seu site são encapsulados em um template HTML que pode ser personalizado.
Este guia abrange:
- Acessando a seção de personalização de estilo de e-mail
- Modificando o template HTML
- Adicionando CSS personalizado
- Testando templates de e-mail
- Revertendo alterações
- Um exemplo de template personalizado
- Interação com e-mails de resumo (digest)
- Alterando fontes de e-mail
Acessando a personalização de estilo de e-mail
- Navegue até Admin / Email / Aparência no seu site Discourse.
- Você verá um editor onde pode modificar o HTML e o CSS para o seu template de e-mail.
Modificando o template HTML
O markup padrão no editor contém um placeholder %{email_content} na seção body. Este placeholder é onde o conteúdo de cada e-mail será inserido. Você pode fazer quaisquer alterações no template, desde que não remova este placeholder.
Para obter informações sobre como personalizar o conteúdo que substitui o placeholder %{email_content}, consulte como personalizar templates de e-mail específicos.
Adicionando CSS personalizado
Você pode usar a seção CSS do editor de Estilo de E-mail para injetar estilos inline no seu template. Aqui está um exemplo:
-
Adicione uma classe CSS a um elemento HTML no template:
<td> class="my-outer-td"> </td> -
Crie uma regra para a classe no editor de CSS:
.my-outer-td { padding: 30px 0 30px 0; }
O Discourse substituirá a classe CSS pela regra CSS real antes de enviar o e-mail. Você pode adicionar quaisquer regras CSS que desejar aqui.
Testando templates de e-mail
É crucial testar suas alterações de template de e-mail em vários clientes de e-mail, pois eles podem interpretar o HTML de forma diferente. Use um serviço de teste de e-mail para pré-visualizar como seus e-mails aparecerão em diferentes clientes, especialmente para alterações significativas.
Revertendo alterações
Para reverter sua personalização de template:
- Role até o final do editor de template.
- Clique no botão “Resetar para o padrão” (Reset to default).
Esta ação substituirá suas alterações pelo template de e-mail padrão do Discourse.
Exemplo de template personalizado
Aqui está um template de e-mail básico que restringe a largura dos e-mails a um máximo de 600px e adiciona um logotipo no topo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 { font-family: Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url" alt="Your site name" width="150" height="40" style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;"/>
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Lembre-se de substituir os atributos src, alt e href da imagem pelas informações específicas do seu site.
Veja como fica em diferentes tamanhos de tela
iPad Pro (10.5 polegadas) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Interação com e-mails de resumo (digest)
Se o seu template personalizado adicionar um logotipo a todos os e-mails, você tem duas opções para e-mails de resumo:
-
Para usar o estilo de e-mail de resumo padrão:
- Desative a configuração do site
apply custom styles to digest(aplicar estilos personalizados ao resumo).
- Desative a configuração do site
-
Para manter a estilização consistente em todos os e-mails de notificação:
- Remova quaisquer imagens definidas como a configuração do site
digest logo(logotipo do resumo). - Adicione
<span></span>à personalização de texto em.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- Remova quaisquer imagens definidas como a configuração do site
Alterando fontes de e-mail
Para alterar fontes em seus e-mails:
-
Use fontes seguras para a web para máxima compatibilidade. Consulte CSS Font Stack para uma lista de fontes disponíveis no Windows e Mac.
-
Adicione regras CSS para as fontes ao seu template de e-mail do Discourse.
-
Você pode definir fontes diretamente em elementos HTML, por exemplo:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Observe que fontes da web de serviços externos não são suportadas pela maioria dos clientes de e-mail.
Recursos adicionais
Para mais informações sobre a criação de e-mails HTML, você pode consultar este guia abrangente sobre como construir um template de e-mail HTML do zero.
