Ce guide explique comment personnaliser et styliser le modèle HTML externe pour tous les e-mails envoyés depuis votre site Discourse.
Niveau d’utilisateur requis : Administrateur
Tous les e-mails envoyés depuis votre site sont encapsulés dans un modèle HTML qui peut être personnalisé.
Ce guide couvre :
- L’accès à la section de personnalisation du style des e-mails
- La modification du modèle HTML
- L’ajout de CSS personnalisé
- Le test des modèles d’e-mails
- L’annulation des modifications
- Un exemple de modèle personnalisé
- L’interaction avec les e-mails de résumé (digest)
- La modification des polices d’e-mail
Accès à la personnalisation du style des e-mails
- Naviguez vers Admin / E-mail / Apparence dans votre site Discourse.
- Vous verrez un éditeur où vous pouvez modifier le HTML et le CSS pour votre modèle d’e-mail.
Modification du modèle HTML
Le balisage par défaut dans l’éditeur contient un espace réservé %{email_content} dans la section body. Cet espace réservé est l’endroit où le contenu de chaque e-mail sera inséré. Vous pouvez apporter toutes les modifications que vous souhaitez au modèle tant que vous ne supprimez pas cet espace réservé.
Pour plus d’informations sur la personnalisation du contenu qui remplace l’espace réservé %{email_content}, consultez comment personnaliser des modèles d’e-mails spécifiques.
Ajout de CSS personnalisé
Vous pouvez utiliser la section CSS de l’éditeur de style d’e-mail pour injecter des styles en ligne dans votre modèle. Voici un exemple :
-
Ajoutez une classe CSS à un élément HTML dans le modèle :
<td> class="my-outer-td"> </td> -
Créez une règle pour la classe dans l’éditeur CSS :
.my-outer-td { padding: 30px 0 30px 0; }
Discourse remplacera la classe CSS par la règle CSS réelle avant d’envoyer l’e-mail. Vous pouvez ajouter toutes les règles CSS que vous souhaitez ici.
Test des modèles d’e-mails
Il est crucial de tester vos modifications de modèle d’e-mail sur divers clients de messagerie, car ils peuvent interpréter le HTML différemment. Utilisez un service de test d’e-mails pour prévisualiser l’apparence de vos e-mails sur différents clients, en particulier pour les changements importants.
Annulation des modifications
Pour annuler la personnalisation de votre modèle :
- Faites défiler jusqu’au bas de l’éditeur de modèle.
- Cliquez sur le bouton « Réinitialiser par défaut » (Reset to default).
Cette action remplacera vos modifications par le modèle d’e-mail Discourse par défaut.
Exemple de modèle personnalisé
Voici un modèle d’e-mail de base qui limite la largeur des e-mails à un maximum de 600px et ajoute un logo en haut :
<!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>
N’oubliez pas de remplacer les attributs src, alt et href de l’image par les informations spécifiques de votre site.
Voici à quoi cela ressemble sur différentes tailles d'écran
iPad Pro (10,5 pouces) (iOS 13.1) :
Gmail (Chrome) :
iPhone 11 Pro Max (iOS 13.1) :
Outlook 2019 (Windows 10)
Interaction avec les e-mails de résumé (digest)
Si votre modèle personnalisé ajoute un logo à tous les e-mails, vous avez deux options pour les e-mails de résumé :
-
Pour utiliser le style d’e-mail de résumé par défaut :
- Désactivez le paramètre de site
apply custom styles to digest(appliquer les styles personnalisés au résumé).
- Désactivez le paramètre de site
-
Pour maintenir un style cohérent sur toutes les notifications par e-mail :
- Supprimez toutes les images définies comme paramètre de site
digest logo(logo du résumé). - Ajoutez
<span></span>à la personnalisation du texte à l’adresse.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- Supprimez toutes les images définies comme paramètre de site
Modification des polices d’e-mail
Pour modifier les polices dans vos e-mails :
-
Utilisez des polices Web sûres pour une compatibilité maximale. Consultez CSS Font Stack pour une liste des polices disponibles sur Windows et Mac.
-
Ajoutez des règles CSS pour les polices à votre modèle d’e-mail Discourse.
-
Vous pouvez définir des polices directement dans les éléments HTML, par exemple :
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Notez que les polices Web provenant de services externes ne sont pas prises en charge par de nombreux clients de messagerie.
Ressources supplémentaires
Pour plus d’informations sur la création d’e-mails HTML, vous pouvez consulter ce guide complet sur la création d’un modèle d’e-mail HTML à partir de zéro.
