> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Comment personnaliser le style, les couleurs, les logos et les boutons de la bannière (New Version) ### Vue d'ensemble La mise en page (position et type de fenêtre) fait l'objet d'un article distinct. Si vous passez de l'ancienne bannière (Legacy Banner), consultez [Guide de migration : recréer votre apparence Legacy dans la New Version](/fr/article/guide-de-migration-recreer-votre-apparence-legacy-dans-la-nouvelle-version-iw3476/). L'onglet **Style** contrôle l'apparence de la bannière, de la fenêtre de préférences et du widget de consentement. Vous pouvez téléverser des logos, choisir des styles de boutons, définir des couleurs (y compris clair et sombre), ajuster les surfaces et les polices, et ajouter du CSS personnalisé. Style ne change pas le moment où les cookies sont autorisés. Les règles de consentement restent dans **Settings > Consent model & regions**. ||| **Nouvelle bannière.** Pour les boutiques qui affichent le badge **New version** dans **Settings > Banner**. Si vous utilisez l'ancienne bannière, consultez [Comment passer à la nouvelle bannière ou revenir à la version précédente](/fr/article/comment-passer-a-la-nouvelle-banniere-ou-revenir-a-la-version-precedente-12cd6wh/). Étapes pour l'ancienne bannière : [Guide de migration : recréer votre apparence Legacy dans la New Version](/fr/article/guide-de-migration-recreer-votre-apparence-legacy-dans-la-nouvelle-version-iw3476/). ### Avant de commencer * Vérifiez que la page Banner affiche le badge **New version**. * Utilisez **Enable for admins** si vous voulez tester sur la boutique en ligne sans afficher la bannière aux visiteurs. Consultez [Comment activer, désactiver ou tester la bannière en mode réservé aux administrateurs (New Version)](/fr/article/activer-desactiver-ou-tester-la-banniere-en-mode-admin-uniquement-nouvelle-version-15m8yuv/). * Utilisez l'aperçu dans l'application (Desktop / Mobile, Light / Dark) pendant la modification. ### Ouvrir l'onglet Style 1. Ouvrez **Shopify Admin > Apps > Pandectes GDPR Compliance**. 2. Allez dans **Settings > Banner**. 3. Ouvrez l'onglet **Style**. 4. Enregistrez lorsque la barre des modifications non enregistrées apparaît. ![Commandes de téléversement des logos de la bannière et du widget dans l'onglet Style](https://images.pandect.es/knowledge-base/how-to-customize-banner-style-colors-logos-and-buttons-new-version-2.png =900xauto) ### Logos Vous pouvez définir un logo pour la bannière principale et un logo distinct pour le widget de consentement. * **Banner logo** : apparaît dans l'avis sur les cookies et dans l'en-tête des préférences (sauf si **Hide header** est activé dans Layout). * **Widget logo** : apparaît sur le widget de consentement. Téléversez un PNG ou un JPG, ou choisissez un logo dans la galerie. Après l'enregistrement, les mises à jour peuvent mettre un peu de temps à apparaître sur la boutique en ligne. ### Boutons Les réglages des boutons s'appliquent aux actions principales (Accept / Deny all) et aux actions secondaires (Preferences / Save). Options typiques : * Variantes pleines ou avec contour (ghost) * Taille et rayon des coins * Bordure * Libellés de boutons en gras (section des polices) Utilisez un bouton **Accept** plein et un bouton **Decline** avec contour si vous voulez que Accept ressorte. Les exigences de Google concernant la bannière imposent toujours un bouton Decline clair et l'accès aux préférences. Consultez [Comment créer une bannière conforme aux exigences de Google (New Version)](/fr/article/creer-une-banniere-conforme-aux-exigences-de-google-nouvelle-version-17xhqh7/). ### Couleurs Choisissez un mode de couleur (par exemple clair ou sombre), un préréglage ou vos propres couleurs. * Les couleurs **Base, primary, secondary et accent** déterminent les arrière-plans, le texte et les boutons. * **Auto calculate** / l'ajustement automatique peut dériver une palette de votre thème Shopify, pour que vous n'ayez pas à saisir chaque valeur hexadécimale à la main. * Prévisualisez les arrière-plans **Light** et **Dark** dans l'aperçu en direct pour que la bannière reste lisible pour les visiteurs qui utilisent le mode sombre. ### Surfaces, polices et animations * **Surfaces** : marge intérieure, rayon des coins, flottant (fenêtre en suspension), bordure, ombre et **z-index** (la façon dont la bannière se superpose aux autres éléments du thème). * **Fonts** : famille et taille. Laissez vide pour suivre la police de la boutique. * **Animations** : activez ou désactivez le mouvement et définissez la durée. Layout choisit toujours le type d'animation (fade, slide, zoom, grow). Si la bannière passe derrière un en-tête fixe ou un widget de chat, augmentez le **z-index**. La valeur maximale est `2147483647`. Consultez [Comment corriger la bannière masquée par des éléments du thème (New Version)](/fr/article/comment-corriger-la-banniere-masquee-par-des-elements-du-theme-nouvelle-version-649g4g/). ### Style personnalisé (CSS) Pour les changements que les commandes de Style ne permettent pas, utilisez **Custom styling** / **CSS Rules** dans le même onglet. Les règles s'appliquent à l'intérieur du composant web `pandectes-cmp`. Consultez [Style personnalisé avec CSS](/fr/article/personnalisation-avec-du-css-1yap2gc/). || Le CSS personnalisé de l'ancienne bannière n'est **pas** copié lorsque vous passez à la nouvelle bannière. Ajoutez à nouveau les règles sous **Style > Custom styling**. ### Mobile et ordinateur De nombreux champs de Style peuvent différer sur mobile. Utilisez **Mobile same as desktop** ou **Mobile different from desktop**. Consultez [Comment utiliser des mises en page de bannière différentes sur mobile et sur ordinateur (New Version)](/fr/article/mises-en-page-differentes-sur-mobile-et-ordinateur-nouvelle-version-hb7pxa/). ### Articles associés * [Personnaliser la mise en page de la bannière (New Version)](/fr/article/personnaliser-la-disposition-de-la-banniere-nouvelle-version-1no3oem/) * [Comment modifier les textes et les liens de la bannière (New Version)](/fr/article/comment-modifier-les-textes-et-les-liens-de-la-banniere-nouvelle-version-zn5i7v/) * [Comment activer et personnaliser le widget de consentement (New Version)](/fr/article/comment-activer-et-personnaliser-le-widget-de-consentement-nouvelle-version-ysgx6y/) * [Style personnalisé avec CSS](/fr/article/personnalisation-avec-du-css-1yap2gc/)