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é a página Aparência na seção E-mail na sua barra lateral de administração, ou acesse diretamente
/admin/customize/email_style. - Você verá um editor com duas abas — HTML e CSS — onde você pode modificar o template e os estilos para seus e-mails.
Modificando o template HTML
A marcação padrão na aba HTML contém vários placeholders:
%{email_content}— Obrigatório. É aqui que o conteúdo de cada e-mail será inserido. Você não deve remover este placeholder.%{email_preview}— Insere um texto de prévia oculto para clientes de e-mail que exibem um trecho.%{html_lang}— Insere o código de idioma do site na tag<html>.%{dark_mode_meta_tags}— Insere tags meta para suporte ao modo escuro.%{dark_mode_styles}— Insere estilos CSS para renderização em modo escuro.
Ao criar um template personalizado, você deve incluir todos esses placeholders para garantir total compatibilidade. Você pode usar o template padrão (visível ao abrir o editor pela primeira vez) como ponto de partida.
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 aba 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 na aba 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 as alterações do seu 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 a personalização do seu template:
- Selecione a aba que você deseja redefinir (HTML ou CSS).
- Clique no botão “Redefinir para o padrão” abaixo do editor.
Isso redefinirá essa seção específica (HTML ou CSS) para o template de e-mail padrão do Discourse. Cada aba é redefinida independentemente.
Exemplo de template personalizado
Aqui está um template de e-mail básico que limita 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 xmlns="http://www.w3.org/1999/xhtml">
<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 inch) (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ê terá 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 um estilo 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 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.
