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

### Descripción general

La mayor parte de la personalización de marca es más fácil de hacer en la app que con CSS. En la pestaña **Style** puedes configurar logotipos, variantes de botones, colores, fuentes, superficies (relleno, radio, sombra, **z-index**) y animaciones sin escribir código. Consulta [How to customize banner style, colors, logos, and buttons (New Version)](/es/article/como-personalizar-el-estilo-los-colores-los-logotipos-y-los-botones-del-banner-nueva-version-oh67be/).

Usa **Custom styling** solo cuando los controles de Style no puedan lograr lo que necesitas (por ejemplo, un diseño de botones concreto, un tratamiento de bordes o la posición del widget).

||| **Nuevo banner.** Para tiendas con la insignia **New version** en **Cookie banner**. Si usas el banner Legacy, 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 Legacy: [Custom styling with CSS (Legacy Banner)](/es/article/estilos-personalizados-con-css-banner-legacy-sffbl6/).

||| **Custom styling está disponible en los planes de pago** (por ejemplo, Plus y superiores). No se incluye en el plan Basic gratuito. Mejora tu plan desde el selector de planes de la app si el editor de CSS está bloqueado.

### Dónde abrir Custom styling

1. Abre **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ve a **Cookie banner**.
3. Confirma que la insignia **New version** es visible en la página Banner.
4. Abre la pestaña **Style**.
5. Desplázate hasta **Custom styling** (puede aparecer **Learn more** junto al título de la sección, que enlaza a este artículo).
6. En **CSS Rules**, elige **Desktop** y/o **Mobile** si necesitas reglas distintas para cada tipo de pantalla.
7. Pega tu CSS y haz clic en **Save** cuando aparezca la barra de cambios sin guardar.

Prueba en la tienda en una ventana privada. Si usas **Enable for admins**, solo el personal con sesión iniciada verá el banner mientras pruebas.

|| Añade el CSS del banner en **Custom styling** en la app de Pandectes. El CSS de tu tema de Shopify normalmente **no** cambia el nuevo banner. Usa el editor de esta página.

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

| Objetivo | Usa primero la pestaña Style |
| --- | --- |
| Colores y modo claro/oscuro | **Colors** |
| Aspecto de los botones (rellenos / con contorno, radio) | **Buttons** |
| Ancho del banner, posición, tipo de diálogo | Pestaña **Layout** |
| Familia y tamaño de fuente | **Fonts** |
| Sombra, relleno, borde, apilamiento sobre el tema | **Surfaces** (incluido **z-index**) |
| Movimiento al abrir/cerrar | **Animations** |
| Posición del widget y del aviso | **Layout** (aviso / preferencias / widget de consentimiento) |

Si el banner queda detrás de un encabezado fijo o de una app de chat, aumenta **Surfaces > z-index** antes de añadir CSS. Consulta [How to fix the banner hiding behind theme elements (New Version)](/es/article/como-solucionar-que-el-banner-quede-oculto-detras-de-elementos-del-tema-nueva-version-9oxfdv/).

### Ejemplos de CSS

Pega las reglas en **CSS Rules** y luego haz clic en **Save**. Ajusta los colores y tamaños a tu marca.

**Borde de acento en el aviso de cookies:**

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

**Colores de los botones Accept y Decline:**

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

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

**Mover el widget de consentimiento un poco más arriba en la página:**

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

Para ajustes de color avanzados, el editor también admite **variables CSS** (por ejemplo `--ai-bg`, `--ai-text`) en los diálogos de aviso y de preferencias. Tu equipo de soporte o tu desarrollador pueden ayudarte si ya usas variables en la app.

### Consejos

* Empieza con un cambio pequeño, guarda y comprueba la tienda.
* Usa las reglas CSS de **Desktop** y **Mobile** cuando necesites un estilo distinto en pantallas pequeñas.
* Si un cambio no se muestra, espera un minuto y actualiza la página.

|| El CSS personalizado del **banner Legacy** **no** se copia al actualizar. Vuelve a añadir las reglas aquí después de la migración. 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/).

### Artículos relacionados

* [How to customize banner style, colors, logos, and buttons (New Version)](/es/article/como-personalizar-el-estilo-los-colores-los-logotipos-y-los-botones-del-banner-nueva-version-oh67be/)
* [Custom styling with CSS (Legacy Banner)](/es/article/estilos-personalizados-con-css-banner-legacy-sffbl6/)
* [How to fix the banner hiding behind theme elements (New Version)](/es/article/como-solucionar-que-el-banner-quede-oculto-detras-de-elementos-del-tema-nueva-version-9oxfdv/)