UniConsent

Leading Consent Management Platform

Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.

Get Started

Como personalizar el banner CMP de UniConsent con CSS

Si deseas personalizar la apariencia del banner de cookies CMP de UniConsent, puedes aplicar CSS personalizado. Esto te permite estilizar elementos como botones, fondos de ventanas emergentes, fuentes y diseno para que se adapten mejor al diseno de tu sitio web.

Que son los selectores CSS?

Los selectores CSS son patrones utilizados para seleccionar y estilizar elementos HTML especificos en una pagina web. Permiten a los desarrolladores aplicar estilos, automatizar pruebas o interactuar con elementos del DOM. Los selectores pueden variar desde tipos basicos como div y h1, hasta formas mas complejas como IDs (#id-selector), clases (.class-selector) o selectores de atributos ([data-attribute="value"]).

Como encontrar selectores CSS

1. Usar las herramientas de desarrollo del navegador (DevTools)

Los navegadores modernos como Chrome, Edge y Firefox ofrecen herramientas de desarrollo que te permiten inspeccionar y copiar selectores CSS facilmente.

  • Paso 1: Haz clic derecho en el elemento que deseas personalizar y selecciona Inspeccionar.

    DevTools InspectDevTools Inspect

  • Paso 2: El panel de Elementos resaltara el codigo HTML seleccionado.

    Elements PanelElements Panel

En Google Chrome y Microsoft Edge:

  • Haz clic derecho en el HTML resaltado y elige Copy > Copy selector.

    Chrome & EdgeChrome & Edge

En Mozilla Firefox:

  • Selecciona el elemento, haz clic derecho y luego elige Copy > CSS Selector.

    FirefoxFirefox

Consejo: Abre DevTools rapidamente usando Ctrl + Shift + I (Windows/Linux) o Cmd + Shift + I (Mac).

2. Escribir selectores CSS personalizados manualmente

A veces, necesitaras escribir selectores manualmente para obtener un control mas preciso:

  • Seleccionar elementos por clase: .unic .powerby
  • Seleccionar elementos unicos por ID: .unic #uniconsent-modal
  • Combinar multiples selectores: .unic .popup > button.accept
  • Usar selectores de atributos: .unic [data-testid="submit-btn"]

Mejores practicas para usar selectores CSS

  • Evita selectores genericos (por ejemplo, div > span) para prevenir conflictos de estilo no deseados.
  • Asegura la especificidad del selector para seleccionar con precision el elemento correcto.
  • Usa selectores de atributos cuando trabajes con contenido generado dinamicamente.
  • Prueba en multiples navegadores tus estilos para garantizar un comportamiento consistente.