> ## 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).

# Personnalisation avec du CSS

### Vue d'ensemble

Il est généralement plus simple de personnaliser l'apparence dans l'application que dans le CSS. Dans l'onglet **Style**, vous pouvez définir les logos, les variantes de boutons, les couleurs, les polices, les surfaces (padding, radius, shadow, **z-index**) et les animations sans écrire de code. Consultez [Comment personnaliser le style de la bannière, les couleurs, les logos et les boutons (Nouvelle version)](/fr/article/comment-personnaliser-le-style-les-couleurs-les-logos-et-les-boutons-de-la-banniere-nouvelle-version-wahzcw/).

Utilisez **Custom styling** uniquement lorsque les contrôles Style ne permettent pas d'obtenir ce dont vous avez besoin (par exemple une disposition de bouton, un traitement de bordure ou une position de widget spécifique).

||| **Nouvelle bannière.** Pour les boutiques qui affichent le badge **New version** sur **Settings > Banner**. Pour la bannière Legacy, 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 Legacy : [Personnalisation avec du CSS (bannière Legacy)](/fr/article/style-personnalise-avec-css-bannere-legacy-9aqmc2/).

||| **Custom styling est disponible sur les offres payantes** (par exemple Plus et supérieures). Il n'est pas inclus dans l'offre gratuite Basic. Passez à une offre supérieure depuis le sélecteur d'offres de l'application si l'éditeur CSS est verrouillé.

### Où ouvrir Custom styling

1. Ouvrez **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Allez dans **Settings > Banner**.
3. Vérifiez que le badge **New version** est visible sur la page Banner.
4. Ouvrez l'onglet **Style**.
5. Faites défiler jusqu'à **Custom styling** (vous pouvez voir **Learn more** à côté du titre de la section, qui renvoie vers cet article).
6. Sous **CSS Rules**, choisissez **Desktop** et/ou **Mobile** si vous avez besoin de règles différentes selon l'écran.
7. Collez votre CSS, puis cliquez sur **Save** lorsque la barre de modifications non enregistrées apparaît.

Testez sur la boutique en ligne dans une fenêtre privée. Si vous utilisez **Enable for admins**, seul le personnel connecté verra la bannière pendant vos tests.

|| Ajoutez le CSS de la bannière dans **Custom styling** dans l'application Pandectes. Le CSS de votre thème Shopify ne modifie généralement **pas** la nouvelle bannière. Utilisez plutôt l'éditeur de cette page.

### Privilégier les paramètres de l'application avant le CSS

| Objectif | À utiliser d'abord dans l'onglet Style |
| --- | --- |
| Couleurs et mode clair/sombre | **Colors** |
| Apparence des boutons (plein / contour, radius) | **Buttons** |
| Largeur de la bannière, position, type de dialogue | Onglet **Layout** |
| Famille et taille de police | **Fonts** |
| Ombre, padding, bordure, empilement au-dessus du thème | **Surfaces** (y compris **z-index**) |
| Animation à l'ouverture/fermeture | **Animations** |
| Position du widget et de la notice | **Layout** (notice / preferences / consent widget) |

Si la bannière passe derrière un en-tête fixe ou une application de chat, augmentez **Surfaces > z-index** avant d'ajouter du CSS. Consultez [Comment corriger une bannière masquée derrière des éléments du thème (Nouvelle version)](/fr/article/comment-corriger-la-banniere-masquee-par-des-elements-du-theme-nouvelle-version-649g4g/).

### Exemples de CSS

Collez les règles dans **CSS Rules**, puis cliquez sur **Save**. Adaptez les couleurs et les tailles à votre marque.

**Bordure d'accent sur la notice de cookies :**

```css
dialog.dialog.notice {
  border-left: 4px solid #00ffbf;
}
```

**Couleurs des boutons Accept et Decline :**

```css
button.filled.allow.primary {
  background: #111111;
}

button.filled.deny.primary {
  background: #666666;
}
```

**Déplacer légèrement le widget de consentement vers le haut de la page :**

```css
button.widget.bottom.left {
  bottom: 24px;
}
```

Pour des ajustements de couleur avancés, l'éditeur prend aussi en charge les **variables CSS** (par exemple `--ai-bg`, `--ai-text`) sur les dialogues de notice et de préférences. Votre équipe de support ou votre développeur peut vous aider si vous utilisez déjà des variables dans l'application.

### Conseils

* Commencez par une seule petite modification, enregistrez, puis vérifiez la boutique en ligne.
* Utilisez les **CSS Rules** **Desktop** et **Mobile** lorsque vous avez besoin d'un style différent sur les petits écrans.
* Si une modification n'apparaît pas, attendez une minute et actualisez la page.

|| Le CSS personnalisé de la **bannière Legacy** n'est **pas** copié lors de la mise à niveau. Ajoutez à nouveau vos règles ici après la migration. Consultez [Comment passer à la nouvelle bannière ou revenir à la version précédente](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-1r1oqc2/).

### Articles associés

* [Comment personnaliser le style de la bannière, les couleurs, les logos et les boutons (Nouvelle version)](/fr/article/comment-personnaliser-le-style-les-couleurs-les-logos-et-les-boutons-de-la-banniere-nouvelle-version-wahzcw/)
* [Personnalisation avec du CSS (bannière Legacy)](/fr/article/style-personnalise-avec-css-bannere-legacy-9aqmc2/)
* [Comment corriger une bannière masquée derrière des éléments du thème (Nouvelle version)](/fr/article/comment-corriger-la-banniere-masquee-par-des-elements-du-theme-nouvelle-version-649g4g/)