DocumentationJourney OptimizerGuide de Journey Optimizer

Ajouter un fichier CSS personnalisé au contenu de votre e-mail email-metadata

Last update: Mon Aug 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermédiaire
  • Utilisateur ou utilisatrice

Lors de la conception de vos e-mails, vous pouvez ajouter votre propre fichier CSS personnalisé directement dans le concepteur d’e-mail Journey Optimizer. Cette fonctionnalité vous permet d’appliquer un style avancé et spécifique, pour une plus grande flexibilité et un meilleur contrôle de l’aspect de votre contenu.

Définir un CSS personnalisé define-custom-css

Pour ajouter un fichier CSS personnalisé au contenu de votre e-mail, procédez comme suit.

  1. Vérifiez qu’un contenu est défini dans le concepteur d’e-mail en ajoutant au moins un composant.

  2. Sélectionnez Corps dans l’arborescence de navigation à gauche, ou en haut du volet de droite. La section Styles CSS s’affiche à droite.

    Sélectionnez le bouton Ajouter un fichier CSS personnalisé {width="85%"}

    note note
    NOTE
    La section Styles CSS n’est disponible que lorsque du contenu est déjà présent dans l’éditeur.

  3. Cliquez sur le bouton Ajouter un fichier CSS personnalisé.

    note note
    NOTE
    Le bouton Ajouter un fichier CSS personnalisé n’est disponible que lorsque Corps est sélectionné. Cependant, vous pouvez appliquer des styles CSS personnalisés à tous les composants de votre contenu.

  4. Saisissez votre code CSS dans la zone de texte dédiée qui s’affiche. Assurez-vous que le code CSS personnalisé est valide et suit la syntaxe appropriée. En savoir plus

    Saisir le CSS personnalisé dans la zone de texte dédiée {width="65%"}

    note note
    NOTE
    Lorsque vous utilisez un modèle avec du contenu verrouillé, vous ne pouvez pas ajouter de CSS personnalisé à votre contenu. Le libellé du bouton se transforme en Afficher le CSS personnalisé et tout CSS personnalisé déjà présent dans le contenu est en lecture seule.

  5. Enregistrez votre CSS personnalisé et vérifiez qu’il s’applique correctement à votre contenu. Si ce n’est pas le cas, consultez la section Dépannage.

    Sélectionner le bouton Ajouter un fichier CSS personnalisé {width="85%"}

  6. Si vous supprimez tout le contenu, la section disparaît et le CSS personnalisé défini précédemment ne s’applique plus.

  7. Ajoutez à nouveau du contenu à l’éditeur pour que la section styles CSS réapparaisse. Le CSS personnalisé s’applique à nouveau.

Vérifier que le CSS est valide use-valid-css

Vous pouvez saisir n’importe quelle chaîne CSS valide dans la zone de texte Ajouter un fichier CSS personnalisé. Si le fichier CSS est correctement formaté, il s’applique immédiatement au contenu.

CAUTION
Les utilisateurs et utilisatrices sont responsables de la sécurité de leur CSS personnalisé. Assurez-vous que votre CSS n’introduit pas de vulnérabilité ou de conflit avec le contenu existant.
Évitez d’utiliser du code CSS qui pourrait altérer involontairement la disposition ou la fonctionnalité du contenu.
Exemples de CSS

Vous trouverez ci-dessous des exemples de CSS valide.

code language-css 
.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}
code language-css 
@media only screen and (min-width: 600px) {
  .acr-paragraph-1 {
    width: 100% !important;
  }
}
Exemples de CSS non valide

Si le code CSS saisi n’est pas valide, un message d’erreur s’affiche, indiquant qu’il ne peut pas être enregistré. Vous trouverez ci-dessous des exemples de CSS non valides.

L’utilisation de balises <style> n’est pas acceptée :

code language-html 
<style type="text/css">
  .acr-Form {
    width: 100%;
    padding: 20px 100px;
    border-spacing: 0px 8px;
    box-sizing: border-box;
    margin: 0;
  }
</style>

Une syntaxe non valide, comme l’omission des accolades, n’est pas acceptée :

code language-css 
body {
  background: red;

Implémentation technique implementation

Votre CSS personnalisé est ajouté à la fin de la section <head> dans le cadre d’une balise <style> avec l’attribut data-name="global-custom", comme dans l’exemple ci-dessous. Cela permet de s’assurer que les styles personnalisés sont appliqués globalement au contenu.

Voir l’exemple
code language-html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>

Le CSS personnalisé n’est pas interprété ni validé par le volet Paramètres du concepteur d’e-mail. Il est entièrement indépendant et ne peut être modifié que par l’intermédiaire de l’option Ajouter un fichier CSS personnalisé.

Mécanismes de sécurisation : contenu importé

Si vous souhaitez utiliser un CSS personnalisé avec du contenu importé dans le concepteur d’e-mail, tenez compte des points suivants :

  • Si vous importez du contenu HTML externe, y compris du contenu CSS, sans le convertir, il sera en mode de compatibilité et la section Styles CSS ne sera pas disponible. En savoir plus sur l’import de contenu existant

  • Si vous importez du contenu créé avec le concepteur d’e-mail, y compris le CSS que vous avez appliqué via l’option Ajouter un fichier CSS personnalisé, vous pourrez voir et modifier le CSS appliqué antérieurement à partir de la même option.

Résolution des problèmes troubleshooting

Si votre CSS personnalisé n’est pas appliqué, consultez les options ci-dessous.

  • Vérifiez que votre CSS est valide et ne comporte pas d’erreurs de syntaxe (par exemple, des accolades manquantes ou des noms de propriété incorrects). Voici comment procéder

  • Vérifiez que votre CSS est ajouté à la balise <style> avec l’attribut data-name="global-custom".

  • Vérifiez si l’attribut data-disabled de la balise de style global-custom est défini sur true. Si c’est le cas, le CSS personnalisé n’est pas appliqué.

    accordion
    Par exemple :
    code language-html 
    <style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>

  • Vérifiez que votre CSS n’est pas remplacé par d’autres règles CSS, ce qui inclut tout thème appliqué à votre contenu.

    • Utilisez les outils de développement de votre navigateur pour inspecter le contenu et vérifier que votre CSS cible les sélecteurs appropriés.

    • Pensez à ajouter !important à vos déclarations pour vous assurer qu’elles sont prioritaires.

      accordion
      Par exemple :
      code language-css 
      .acr-Form {
  background: red !important;
}
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76