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

L’éditeur sans code vous permet de personnaliser le thème d’image de marque de Universal Login. Pour personnaliser le texte inclus dans chaque prompt, consultez [Personnaliser les éléments de texte de Universal Login](/docs/fr-ca/customize/login-pages/universal-login/customize-text-elements). Pour des options de personnalisation plus poussées, consultez [Personnaliser Universal Login Page Templates](/docs/fr-ca/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](/docs/fr-ca/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 de Universal Login
</div>

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

1. Dans l’Auth0 Dashboard, accédez à [Branding > Universal Login > Customization Options](https://manage.auth0.com/#/universal-login/customizations/colors).
2. Sélectionnez un [composant de thème](#theme-components) (p. ex., 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 direct de votre expérience de connexion afin de passer en revue et tester vos écrans. Pour lancer l’aperçu dans un nouvel onglet, sélectionnez **Try** au-dessus de l’éditeur no-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 de votre choix, le menu Styles comprend 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 couleurs.
    * Saisir le code hexadécimal ou la valeur RGB.
    * Sélectionner l’outil pipette pour choisir une couleur sur votre é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                                  | Applique la couleur choisie au remplissage du bouton principal, ou du bouton qui déclenche l’action suivante.                                                                                      |
    | Libellé du bouton principal                       | Modifie la couleur du texte à l’intérieur du bouton principal.                                                                                                                                     |
    | Bordure du bouton secondaire                      | Modifie la bordure des champs de saisie.                                                                                                                                                           |
    | Libellé du bouton secondaire                      | Modifie le texte à l’intérieur des éléments secondaires cliquables.                                                                                                                                |
    | Liens et composants en focus                      | Modifie la couleur du texte des liens qui permettent aux utilisateurs de déclencher 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 de la souris les survole 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 de l’espace réservé.                                                                                                                |
    | Texte saisi dans les champs                       | 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 que vous avez spécifié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 changer la police par défaut, entrez 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 dans l’option en pixels **Reference text size**. Veuillez noter 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
    * Body Text
    * Texte du bouton
    * Libellés des champs de saisie
    * Liens

    Lorsque vous sélectionnez une option à configurer, le volet d’aperçu affiche l’emplacement de l’élément dans le widget et s’ajuste à la taille indiqué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, réglez le curseur ou choisissez parmi les options offertes.

    | Option                                       | Description                                                                                                                                   |
    | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
    | Épaisseur de la bordure du bouton            | Règle la largeur de la bordure autour des champs de saisie dans les écrans de connexion.                                                      |
    | Style des boutons                            | Modifie la forme des boutons cliquables dans les widgets. Les options offertes sont : coins carrés, coins arrondis ou style pilule.           |
    | Rayon de la bordure du bouton                | Règle les coins des boutons cliquables lorsque vous sélectionnez des coins arrondis.                                                          |
    | Épaisseur de la bordure des champs de saisie | Règle la largeur des bordures des champs de saisie et des boutons cliquables dans les écrans de connexion.                                    |
    | Style des champs de saisie                   | Modifie la forme des champs de saisie dans les écrans de connexion. Les options offertes sont : coins carrés, coins arrondis ou style pilule. |
    | Rayon de la bordure des champs de saisie     | Règle les coins des champs de saisie lorsque vous sélectionnez des coins arrondis.                                                            |
    | Rayon des coins du widget                    | Modifie la forme du widget pour passer de coins carrés à des coins arrondis.                                                                  |
    | Épaisseur de la bordure du widget            | Règle la largeur de la bordure du widget.                                                                                                     |
    | Ombre                                        | Case à cocher permettant d’ajouter une ombre aux widgets.                                                                                     |

    <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 boutons de connexion sociale.

    | Element                                      | Description                                                                                                              |
    | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
    | Position du logo                             | Choisissez où le widget doit apparaître : à gauche, à droite ou au centre de la page. Vous pouvez aussi 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 de l’en-tête doit être aligné à gauche, à droite ou au centre.                                    |
    | Disposition des boutons de connexion sociale | 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 du prompt. L’éditeur No-Code prend 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 doit être aligné 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 votre thème Universal Login à l’aide de la [Management API](https://auth0.com/docs/api/management/v2). Plus précisément, vous pouvez utiliser les endpoints Branding 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)