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 personnalisable.
Ce guide couvre :
- L’accès à la section de personnalisation des styles d’e-mail
- La modification du modèle HTML
- L’ajout de CSS personnalisé
- Le test des modèles d’e-mail
- L’annulation des modifications
- Un exemple de modèle personnalisé
- L’interaction avec les e-mails de digest
- La modification des polices des e-mails
Accès à la personnalisation des styles d’e-mail
- Naviguez vers la page Apparence sous la section E-mail dans votre barre latérale d’administration, ou accédez directement à
/admin/customize/email_style. - Vous verrez un éditeur avec deux onglets — HTML et CSS — où vous pouvez modifier le modèle et les styles de vos e-mails.
Modification du modèle HTML
Le balisage par défaut dans l’onglet HTML contient plusieurs espaces réservés (placeholders) :
%{email_content}— Obligatoire. C’est ici que le contenu de chaque e-mail sera inséré. Vous ne devez pas supprimer cet espace réservé.%{email_preview}— Insère un texte d’aperçu masqué pour les clients de messagerie qui affichent un extrait.%{html_lang}— Insère le code de langue du site dans la balise<html>.%{dark_mode_meta_tags}— Insère des balises méta pour la prise en charge du mode sombre.%{dark_mode_styles}— Insère les styles CSS pour le rendu en mode sombre.
Lors de la création d’un modèle personnalisé, vous devez inclure tous ces espaces réservés pour garantir une compatibilité totale. Vous pouvez vous référer au modèle par défaut (visible lorsque vous ouvrez l’éditeur pour la première fois) comme point de départ.
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-mail spécifiques.
Ajout de CSS personnalisé
Vous pouvez utiliser l’onglet 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’onglet 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-mail
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-mail pour prévisualiser l’apparence de vos e-mails sur différents clients, surtout pour les changements importants.
Annulation des modifications
Pour annuler la personnalisation de votre modèle :
- Sélectionnez l’onglet que vous souhaitez réinitialiser (HTML ou CSS).
- Cliquez sur le bouton « Réinitialiser aux valeurs par défaut » sous l’éditeur.
Ceci réinitialisera cette section spécifique (HTML ou CSS) au modèle d’e-mail Discourse par défaut. Chaque onglet est réinitialisé indépendamment.
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 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>
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 digest
Si votre modèle personnalisé ajoute un logo à tous les e-mails, vous avez deux options pour les e-mails de digest :
-
Pour utiliser le style par défaut des e-mails de digest :
- Désactivez le paramètre de site
apply custom styles to digest(appliquer les styles personnalisés au digest).
- Désactivez le paramètre de site
-
Pour maintenir un style cohérent sur tous les e-mails de notification :
- Supprimez toutes les images définies comme paramètre de site
digest logo(logo du digest). - 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 des e-mails
Pour modifier les polices dans vos e-mails :
-
Utilisez des polices web sûres (web-safe fonts) 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 les 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 de nombreux clients de messagerie ne prennent pas en charge les polices web provenant de services externes.
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.
