> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Décrit comment utiliser l’éditeur sans code pour personnaliser les thèmes des pages Universal Login.

# Personnaliser les thèmes des pages Universal Login

Vous pouvez créer une expérience de connexion cohérente et à votre image de marque pour vos utilisateurs en personnalisant le style de vos invites <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, pour vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Universal+Login">Universal Login</Tooltip>. Grâce à l’éditeur sans code d’Universal Login, vous pouvez facilement personnaliser les couleurs, les polices, les bordures et les arrière-plans des invites affichées aux utilisateurs tout au long du flux de connexion.

L’éditeur sans code vous permet de personnaliser le thème de l’image de marque de votre Universal Login. Pour personnaliser le texte inclus dans chaque invite, consultez [Personnaliser les éléments de texte d’Universal Login](/fr-CA/docs/customize/login-pages/universal-login/customize-text-elements). Pour des options de personnalisation plus avancées, consultez [Personnaliser les modèles de page d’Universal Login](/fr-CA/docs/customize/login-pages/universal-login/customize-templates).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Pour utiliser l’éditeur sans code, vous devez avoir activé [Universal Login](/fr-CA/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience). L’expérience Classic Login ne prend pas en charge cet éditeur.
</Callout>

<div id="universal-login-no-code-editor">
  ## Éditeur sans code pour Universal Login
</div>

Pour personnaliser votre thème Universal Login, suivez les étapes ci-dessous :

1. Dans Auth0 Dashboard, accédez à [Branding > Universal Login > Customization Options](https://manage.auth0.com/#/universal-login/customizations/colors).
2. Sélectionnez un [composant du thème](#theme-components) (par exemple, Colors) dans le menu Styles. Personnalisez ensuite les options affichées à droite.
3. Après avoir personnalisé votre thème, sélectionnez **Save and Publish**.

Après avoir enregistré votre thème, vous pouvez accéder à un aperçu en temps réel de votre expérience de connexion afin de passer en revue et de tester vos écrans. Pour ouvrir l’aperçu dans un nouvel onglet, sélectionnez **Try** au-dessus de l’éditeur sans code.

<Frame>
  <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/01nmAYzRb5U8xOpUWEClH9/de60b97b42c6de04bea69914d36e6984/branding-customize-NUL-Nocode-fullscreen0.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=13f9290e6f2ff9136928700e6162b726" alt="" width="900" height="420" data-path="docs/images/cdy7uua7fh8z/01nmAYzRb5U8xOpUWEClH9/de60b97b42c6de04bea69914d36e6984/branding-customize-NUL-Nocode-fullscreen0.png" />
</Frame>

<div id="theme-components">
  ### Composants du thème
</div>

Pour créer le thème Universal Login voulu, le menu Styles contient les composants suivants :

<AccordionGroup>
  <Accordion title="Couleur">
    Sélectionnez un champ de saisie pour modifier la couleur de l’élément. Pour choisir des couleurs précises, vous pouvez :

    * Utiliser le sélecteur de couleur.
    * Entrer le code hexadécimal ou la valeur RGB.
    * Sélectionner l’outil pipette pour choisir une couleur à l’écran parmi les éléments disponibles.

    <Frame>
      <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4a2iEFD4dPvxHHFueQ7rnD/ce09850794e10176aa489aaff03e67b8/2022-05-12_11-24-33.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=640e423da36e8a86eac5eea292c2fe1a" alt="" width="247" height="315" data-path="docs/images/cdy7uua7fh8z/4a2iEFD4dPvxHHFueQ7rnD/ce09850794e10176aa489aaff03e67b8/2022-05-12_11-24-33.png" />
    </Frame>

    | Élément                                           | Description                                                                                                                                                                                    |
    | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | Bouton principal                                  | Remplit le bouton principal, ou le bouton qui déclenche l’action suivante, avec la couleur choisie.                                                                                            |
    | Libellé du bouton principal                       | Modifie la couleur du texte dans le bouton principal.                                                                                                                                          |
    | Bordure du bouton secondaire                      | Modifie la bordure des champs de saisie.                                                                                                                                                       |
    | Libellé du bouton secondaire                      | Modifie le texte dans les champs secondaires cliquables.                                                                                                                                       |
    | Liens et composants en focus                      | Modifie la couleur du texte des liens qui permettent aux utilisateurs de lancer un autre flux de travail, comme réinitialiser le mot de passe ou essayer une autre méthode d’authentification. |
    | Couleur de focus de base                          | Modifie la couleur des boutons lorsque le pointeur survole le bouton avant la sélection.                                                                                                       |
    | Couleur de survol de base                         | Modifie la couleur d’un bouton lorsque l’utilisateur clique dessus.                                                                                                                            |
    | En-tête                                           | Modifie la couleur du texte du titre dans l’en-tête.                                                                                                                                           |
    | Texte du corps                                    | Modifie la couleur du texte du corps.                                                                                                                                                          |
    | Arrière-plan du widget                            | Modifie la couleur d’arrière-plan des widgets.                                                                                                                                                 |
    | Bordure du widget                                 | Modifie la couleur de la bordure des widgets.                                                                                                                                                  |
    | Libellés et espaces réservés des champs de saisie | Modifie le texte des libellés des champs de saisie et le texte d’espace réservé.                                                                                                               |
    | Texte saisi dans le champ                         | Modifie la couleur du texte que les utilisateurs saisissent dans les champs de saisie. Par exemple, les champs nom d’utilisateur et mot de passe.                                              |
    | Bordure du champ de saisie                        | Modifie la couleur de la bordure des champs de saisie.                                                                                                                                         |
    | Arrière-plan du champ de saisie                   | Modifie la couleur d’arrière-plan des champs de saisie.                                                                                                                                        |
    | Icônes                                            | Modifie la couleur des icônes à l’intérieur des champs de saisie.                                                                                                                              |
    | Erreur                                            | Modifie la couleur des messages d’erreur dans les widgets.                                                                                                                                     |
    | Succès                                            | Modifie la couleur des messages de succès dans les widgets.                                                                                                                                    |

    Une fois la modification effectuée, la fenêtre d’aperçu affiche plusieurs exemples de widgets avec les changements appliqués.

    <Frame>
      <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4BLBu39lD1SLi7lbjwpf5n/655a46aa8fed8415e7eb4595c09a1ea8/2022-05-12_11-23-39.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=c15e1ad678af87086016b66c3462fcb5" alt="" width="902" height="359" data-path="docs/images/cdy7uua7fh8z/4BLBu39lD1SLi7lbjwpf5n/655a46aa8fed8415e7eb4595c09a1ea8/2022-05-12_11-23-39.png" />
    </Frame>
  </Accordion>

  <Accordion title="Polices">
    Pour modifier la police par défaut, saisissez l’URL de n’importe quel fichier WOFF (Web Open Font Format) dans le champ de saisie. Vos fichiers WOFF doivent être hébergés sur un CDN avec CORS activé ou sur un site d’hébergement avec l’en-tête Access-Control-Allow-Origin.

    Sous le panneau de l’URL de la police, ajustez la taille générale du texte à l’aide de l’option en pixels **Taille du texte de référence**. Notez que les autres options ne changent pas lorsque le texte de référence est modifié.

    Modifiez individuellement les éléments suivants :

    * Titre
    * Sous-titre
    * Corps du texte
    * Texte du bouton
    * Libellés de champ
    * Liens

    Lorsque vous sélectionnez une option à configurer, le volet d’aperçu indique l’emplacement de l’élément dans le widget et s’ajuste à la taille spécifiée.

    <Frame>
      <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1dHa6nIrEGy2hGV4LyKXmE/13efef14d4725c524f76e84f06444b2b/2022-05-12_11-18-38.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=590dfec46f299f5fea879ccf38ebd213" alt="" width="233" height="500" data-path="docs/images/cdy7uua7fh8z/1dHa6nIrEGy2hGV4LyKXmE/13efef14d4725c524f76e84f06444b2b/2022-05-12_11-18-38.png" />
    </Frame>
  </Accordion>

  <Accordion title="Bordures">
    Pour personnaliser les bordures, le style des boutons, les champs de saisie et les coins du widget, ajustez le curseur ou choisissez parmi les options disponibles.

    | Option                                       | Description                                                                                                                                           |
    | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
    | Épaisseur de la bordure des boutons          | Ajuste la largeur de la bordure autour des champs de saisie dans les invites de connexion.                                                            |
    | Style des boutons                            | Modifie la forme des boutons cliquables dans les widgets. Les options disponibles sont : coins droits, coins arrondis ou style en capsule.            |
    | Rayon de la bordure des boutons              | Ajuste les coins des boutons cliquables lorsque vous sélectionnez des coins arrondis.                                                                 |
    | Épaisseur de la bordure des champs de saisie | Ajuste la largeur des bordures des champs de saisie et des boutons cliquables dans les invites de connexion.                                          |
    | Style des champs de saisie                   | Modifie la forme des champs de saisie dans les invites de connexion. Les options disponibles sont : coins droits, coins arrondis ou style en capsule. |
    | Rayon de la bordure des champs de saisie     | Ajuste les coins des champs de saisie lorsque vous sélectionnez des coins arrondis.                                                                   |
    | Rayon des coins du widget                    | Modifie la forme du widget, de coins droits à des coins arrondis.                                                                                     |
    | Épaisseur de la bordure du widget            | Ajuste la largeur de la bordure du widget.                                                                                                            |
    | Ombre                                        | Case à cocher permettant aux widgets d’avoir une ombre.                                                                                               |

    <Frame>
      <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/19TZeRWGWrYQWQ8ebRELXz/76ccd288acdec4ceb96d6c8402d48518/2022-05-10_13-44-25.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=778d597c1d260908d7a2acc641032792" alt="" width="224" height="580" data-path="docs/images/cdy7uua7fh8z/19TZeRWGWrYQWQ8ebRELXz/76ccd288acdec4ceb96d6c8402d48518/2022-05-10_13-44-25.png" />
    </Frame>
  </Accordion>

  <Accordion title="Widget">
    Ajoutez l’URL de votre logo pour configurer sa position, sa hauteur, l’alignement du texte et l’emplacement des options de connexion sociale.

    | Element                          | Description                                                                                                                    |
    | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
    | Position du logo                 | Choisissez l’emplacement du widget : à gauche, à droite ou au centre de la page. Vous pouvez aussi choisir de masquer le logo. |
    | URL du logo                      | Entrez l’URL de votre logo personnalisé. Auth0 recommande les fichiers SVG.                                                    |
    | Hauteur du logo                  | Ajustez la taille de votre logo en haut du widget.                                                                             |
    | Alignement du texte de l’en-tête | Choisissez si le texte dans l’en-tête doit être aligné à gauche, à droite ou au centre.                                        |
    | Disposition des boutons sociaux  | Choisissez si le texte doit apparaître en haut ou en bas du bouton.                                                            |

    <Frame>
      <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1AJksBqHefFzOmt31XlqxP/b0ac004a03681370d724b4c0d06a8351/2022-05-31_09-39-26.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=75b3cb7d07079810ab0cc146d698476c" alt="" width="220" height="402" data-path="docs/images/cdy7uua7fh8z/1AJksBqHefFzOmt31XlqxP/b0ac004a03681370d724b4c0d06a8351/2022-05-31_09-39-26.png" />
    </Frame>
  </Accordion>

  <Accordion title="Arrière-plans des pages">
    Ajoutez l’URL d’une image d’arrière-plan pour définir l’arrière-plan affiché dans le widget de l’invite. L’éditeur sans code prend également en charge d’autres formats d’image, comme les PNG et les JPEG.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Auth0 recommande d’utiliser une image au format JPEG d’au moins 2000 px de large.
    </Callout>

    Ensuite, choisissez si le widget s’aligne au centre, à gauche ou à droite de l’écran.

    <Frame>
      <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6WQqdGCv972KnyKMwoYeyO/61dc83d2ce507e92bde7f41df044d79b/2022-05-31_09-41-21.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=29f98c237751436f28ea409354063ff8" alt="" width="230" height="327" data-path="docs/images/cdy7uua7fh8z/6WQqdGCv972KnyKMwoYeyO/61dc83d2ce507e92bde7f41df044d79b/2022-05-31_09-41-21.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

<div id="management-api">
  ## Management API
</div>

Vous pouvez aussi personnaliser le thème de votre Universal Login à l’aide de la [Management API](https://auth0.com/docs/api/management/v2). Plus précisément, vous pouvez utiliser les points de terminaison liés à l’image de marque pour :

* [Créer un nouveau thème d’image de marque](https://auth0.com/docs/api/management/v2/branding/post-branding-theme)
* [Récupérer le thème d’image de marque par défaut](https://auth0.com/docs/api/management/v2/branding/get-default-branding-theme)
* [Récupérer un thème d’image de marque particulier](https://auth0.com/docs/api/management/v2/branding/get-branding-theme)
* [Supprimer un thème d’image de marque](https://auth0.com/docs/api/management/v2/branding/delete-branding-theme)
* [Mettre à jour le thème actuel](https://auth0.com/docs/api/management/v2/branding/patch-branding-theme)