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

# Estilos personalizados con CSS (banner Legacy)

### Descripción general

En el banner Legacy, la mayoría de las opciones de apariencia están en **Cookie banner > Style**: diseño (posición, ancho, tema), colores, logotipo, fuentes, **z-index** y animaciones. Usa **CSS personalizado** solo cuando esos campos no sean suficientes.

||| **El CSS personalizado / los estilos avanzados están disponibles en los planes de pago** (por ejemplo, Plus y superiores), no en el plan Basic gratuito.

||| **Banner Legacy.** Para tiendas **sin** la insignia **New version** en **Cookie banner**. Si usas el nuevo banner, consulta [How to switch to the new banner or switch back to the previous version](/es/article/como-cambiar-al-nuevo-banner-o-volver-a-la-version-anterior-1wiw894/).

Pasos para el nuevo banner: [Custom styling with CSS](/es/article/estilos-personalizados-con-css-1b5e4gk/).

### Dónde añadir CSS (banner Legacy)

1. Abre **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ve a **Cookie banner**.
3. Confirma que **no** ves la insignia **New version** (la interfaz Legacy usa las pestañas **Behavior**, **Style** y **Content**).
4. Abre la pestaña **Style**.
5. Usa **Layout**, **Colors** y **Advanced styling** para las fuentes, el **z-index** y las animaciones.
6. Añade reglas personalizadas en el área de **custom CSS** de la pestaña Style (incluida con **Advanced styling** en los planes de pago).
7. Haz clic en **Save** y prueba en la tienda en una ventana privada.

### Cómo aparece el banner Legacy en el DOM

Raíces típicas en la tienda:

* `#pandectes-banner`
* Clases de CookieConsent: `.cc-window`, `.cc-message`, `.cc-compliance`, `.cc-btn`

El CSS del tema **puede** afectar al banner Legacy porque no está dentro de un shadow root como el nuevo banner. Aun así, prefiere el campo de CSS personalizado de **Pandectes Style** para que las reglas viajen con tus ajustes de Pandectes.

### Prefiere los ajustes de la app antes que el CSS

| Objetivo | Ubicación en Legacy |
| --- | --- |
| Barra, flotante o ventana emergente (posición) | **Style > Layout > Position** |
| Ancho | **Style > Layout > Width** |
| Colores | **Style > Colors** |
| Logotipo | **Style > Banner logo** |
| Fuentes | **Style > Advanced styling** |
| z-index | **Style > Advanced styling > z-index** |
| Etiquetas de los botones | Pestaña **Content** |

### Selectores de ejemplo (verifícalos en tu tienda)

Limita las reglas a la raíz del banner siempre que sea posible:

#### Ventana del banner

```css
#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}
```

#### Texto del mensaje

```css
#pandectes-banner .cc-message {
  font-size: 14px;
}
```

#### Botones Accept / Decline

```css
#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}
```

#### Ventana emergente de preferencias

Abre el panel de preferencias en tu tienda e inspecciona los nombres de las clases. Varían según el tipo de banner (**Preferences**, **Informative**, etc.). Consulta [Cookie Banner Modes (Legacy Version)](/es/article/modos-del-banner-de-cookies-version-legacy-7hfi72/).

### Inspeccionar el banner en vivo

1. Abre la tienda con el banner visible.
2. Haz clic derecho en el banner y elige **Inspect**.
3. Confirma `#pandectes-banner` o `.cc-window` en el DOM.
4. Copia los nombres de las clases de los nodos a los que quieras dar estilo. No pegues selectores de la guía del nuevo banner (`dialog.notice`, `pandectes-cmp`).

### Actualizar al nuevo banner

El CSS personalizado de Legacy **no se migra automáticamente**. Después de actualizar, vuelve a crear las reglas en **Style > Custom styling** en el nuevo banner. Consulta:

* [How to switch to the new banner or switch back to the previous version](/es/article/guia-de-migracion-recrea-tu-aspecto-legacy-en-la-nueva-version-1iro8ks/)
* [Custom styling with CSS (New Banner)](/es/article/estilos-personalizados-con-css-1b5e4gk/)

### Artículos relacionados

* [Customizing the layout of the banner (Legacy Version)](/es/article/personalizacion-del-diseno-del-banner-version-legacy-12vg45g/)
* [Cookie Banner Modes (Legacy Version)](/es/article/modos-del-banner-de-cookies-version-legacy-7hfi72/)