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

# Personalización del diseño del banner (versión Legacy)

Puedes personalizar el diseño y el estilo de tu banner directamente dentro de la aplicación. Esto te permite crear un aspecto que coincida con la imagen de marca y la experiencia de usuario de tu organización.

Para acceder a estas opciones, ve a:
**Cookie banner > Style**

### Position

Elige dónde y cómo aparecerá el banner en tu sitio web:

1. **Popup:** Centrado en la pantalla.
2. **Overlay:** Funciona como el popup, pero bloquea la página hasta que el usuario interactúa con el banner.
3. **Bar at the top:** Fija en la parte superior de la pantalla.
4. **Bar at the top (pushdown):** Se desliza hacia abajo desde la parte superior, empujando el contenido hacia abajo. (Nota: puede no funcionar bien con encabezados fijos.)
5. **Floating at the top left:** Situado arriba a la izquierda con un pequeño margen.
6. **Floating at the top center:** Situado arriba en el centro con un pequeño margen.
7. **Floating at the top right:** Situado arriba a la derecha con un pequeño margen.
8. **Bar at the bottom:** Fija en la parte inferior de la pantalla.
9. **Floating at the bottom left:** Situado abajo a la izquierda con un pequeño margen.
10. **Floating at the bottom center:** Situado abajo en el centro con un pequeño margen.
11. **Floating at the bottom right:** Situado abajo a la derecha con un pequeño margen.

    
### Theme

Selecciona un tema para controlar el relleno, el estilo de los botones y la apariencia:

1. **Block:** Relleno pequeño, botones cuadrados con ancho proporcional.
2. **Classic:** Relleno pequeño, botones redondeados de igual ancho.
3. **Edgeless:** Sin relleno, botones cuadrados de igual ancho.
4. **Wired:** Igual que Block pero con los fondos y colores de los botones invertidos.

**Tabla comparativa de temas**

| Theme | Padding | Button Style | Button Width |
| ---- |
| **Block** | Pequeño | Cuadrado | Proporcional |
| **Classic** | Pequeño | Redondeado | Igual |
| **Edgeless** | Ninguno | Cuadrado | Igual |
| **Wired** | Pequeño | Cuadrado (colores invertidos) | Proporcional |

### Text Alignment

Se aplica al título, al mensaje y al logotipo del banner:

* Left
* Center
* Right

### Width

Ajusta el ancho del banner usando **unidades em** (relativas al tamaño de fuente). Ejemplo: `2em` = el doble del tamaño de fuente.

* Se controla con un control deslizante.
* Funciona con vista previa en vivo para obtener resultados al instante.
* Útil para mensajes largos o etiquetas de botones largas.
* Nota: se aplica solo a las posiciones de **banner**, no a las barras (las barras siempre ocupan todo el ancho).

### Font Size

Ajusta el tamaño del texto usando **unidades px**. Ejemplo: `1px = 1/96 de pulgada`.

* Se controla con un control deslizante.
* Funciona con vista previa en vivo.
* Por defecto usa el tamaño establecido por el tema de tu tienda.

### Padding

Ajusta el espacio interior del banner usando **unidades px**.

* Se controla con un control deslizante.
* Funciona con vista previa en vivo.
* Los valores predeterminados varían según el tema.
* Nota: no es compatible con el tema **Edgeless**.

### Colors

Personaliza los colores del banner y de los botones:

* Elige de una paleta o define colores personalizados.
* Admite los formatos **Hex** (p. ej., `#123456`) y **RGBA**.
* RGBA añade compatibilidad con la transparencia además de los valores de rojo, verde y azul.

### Font Family

De forma predeterminada, el banner hereda la fuente del tema de tu tienda. También puedes elegir entre fuentes web seguras compatibles con todos los navegadores:

* Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
* Times New Roman, Didot, Georgia, American Typewriter
* Andalé Mono, Courier, Lucida Console, Monaco
* Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

Si quieres usar una fuente personalizada, primero cárgala en los recursos de tu tienda y haz que esté disponible en tu archivo CSS.

### z-index

Controla el **orden de apilamiento** del banner.

* Los valores más altos garantizan que el banner aparezca por encima de otros elementos de la página.
* Ajústalo si hay conflictos con otras apps o scripts.

### Container ID

Define el ID HTML del contenedor del banner.

* Cámbialo solo si necesitas apuntar al banner con scripts o selectores CSS personalizados.

### Banner Shadow

Añade una sombra detrás del banner.

* Útil cuando los colores del banner y del fondo son similares, ya que mejora la visibilidad.

### Animation

Activa animaciones para la aparición y el cierre del banner:

* Fade-in / slide-in al abrir.
* Fade-out / slide-out al cerrar.

También se aplica al enlace **Re-open banner (Revoke)**, si está activado en **Behavior**.

* Nota: no es compatible con todos los navegadores.

### Custom CSS

Añade tus propias reglas CSS para una personalización adicional.

* Útil para ajustar con precisión el tamaño de los botones, los colores de los bordes, el espaciado y más.

### Guía en vídeo

${youtube}[How to customize your cookie banner in Pandectes GDPR compliance](Q_fGcnwDQxk)