Personalización avanzada del diseño con variables CSS

1. Introducción.

2. Cómo incluir las variables CSS en tu campaña.

3. Variables CSS disponibles.

3.1. Campos del formulario.

3.2. Popup de bases legales.

3.3. Faldón de cookies (versión antigua).

3.4. Gestor de consentimiento de cookies (Klaro).

3.5. Preguntas tipo rating y swipe.

4. Otras especificaciones.

5. Contenido relacionado.

1. Introducción.

El editor de campañas de Cool Tabs te permite personalizar los colores principales (primario, secundario, fondo y texto), así como los colores de error del formulario y los colores de feedback del quiz, sin necesidad de tocar CSS.

Sin embargo, hay otros elementos visuales más concretos que no pueden modificar desde el editor de la campaña, por ejemplo, el fondo de los campos del formulario, el popup de bases legales, el gestor de consentimiento de cookies o el color de las estrellas en preguntas tipo rating. Para personalizarlos, tienes a tu disposición un conjunto de variables CSS que puedes redefinir desde el CSS personalizado de la campaña.

En este tutorial encontrarás el listado completo de variables CSS disponibles, qué controla cada una y cómo incluirlas en tu campaña.

Ten en cuenta que:

• Estas variables son variables CSS nativas (también llamadas custom properties), distintas de las variables de plantilla tipo {{{ first_name }}} o {{{ coupon_code }}} que se usan en el HTML personalizado.

• Esta personalización está pensada para usuarios que tengan al menos conocimientos básicos de CSS.

2. Cómo incluir las variables CSS en tu campaña.

Las variables CSS se redefinen dentro de un bloque :root { … } en el CSS personalizado de la campaña. Solo tienes que añadir las que quieras sobrescribir, una por línea, con el formato --nombre-de-la-variable: valor;.

Por ejemplo, para cambiar el fondo de los campos del formulario:

:root {
  --ct-input-background-color: #f7f7f7;
}

Puedes incluir varias variables en el mismo bloque :root, una debajo de otra:

:root {
  /* Campos del formulario */
  --ct-input-background-color: #f7f7f7;
  --ct-input-text-color: #222222;
  --ct-input-border-color: #cccccc;

  /* Popup de bases legales */
  --ct-legal-background-color: #ffffff;
  --ct-legal-text-color: #333333;
}

Como valor puedes utilizar cualquier formato de color válido en CSS: nombre (red, white), hexadecimal (#E91E63), rgb() o rgba() si necesitas transparencia.

Cómo configurar la CSS personalizada de una campaña.

3. Variables CSS disponibles.

A continuación tienes el listado completo de variables CSS, agrupadas por la zona de la campaña a la que afectan.

3.1. Campos del formulario.

Estas variables controlan el aspecto de los campos (inputs) del formulario de participación: fondo, texto que teclea el usuario, borde, label y placeholder.

• --ct-input-background-color: color de fondo de los campos del formulario.

• --ct-input-text-color: color del texto que teclea el usuario en los inputs.

• --ct-input-border-color: color del borde de los campos del formulario.

• --ct-input-label-color: color del label de los campos. Por defecto hereda del color de texto de la promo (--ct-font-color).

• --ct-input-placeholder-color: color del placeholder de los campos (cuando se marca el check "Usar placeholders en lugar de labels").

Nota sobre --ct-input-label-color: al heredar por defecto el color de texto, el comportamiento es el siguiente:

• Si no tocas nada, el label sigue al color de texto de la campaña. Si cambias el color de texto en el editor, el label cambia también.

• Si sobrescribes --ct-input-label-color en tu CSS custom, los labels se quedan fijos en ese color y dejan de seguir al texto.

• Si quieres que los labels hereden del color principal en lugar del texto, puedes hacer --ct-input-label-color: var(--ct-primary-color);.

Ejemplo:

:root {
  --ct-input-background-color: #f7f7f7;
  --ct-input-text-color: #222222;
  --ct-input-border-color: #cccccc;
  --ct-input-placeholder-color: #999999;
}

3.2. Popup de bases legales.

Controlan el aspecto del popup que se muestra al participante al pulsar sobre el enlace a las bases legales.

• --ct-legal-background-color: color de fondo del popup.

• --ct-legal-text-color: color del texto del popup.

3.3. Faldón de cookies (versión antigua).

Controlan el aspecto del antiguo aviso de cookies (faldón inferior). Si tu campaña utiliza el gestor de consentimiento Klaro, consulta el siguiente apartado.

• --ct-cookies-background-color: color de fondo del faldón.

• --ct-cookies-text-color: color del texto del faldón.

• --ct-cookies-accept-button-background-color: color de fondo del botón de aceptar.

• --ct-cookies-accept-button-text-color: color del texto del botón de aceptar.

3.4. Gestor de consentimiento de cookies (Klaro).

Controlan el aspecto del gestor de consentimiento de cookies Klaro.

• --ct-klaro-background-color: color de fondo del gestor.

• --ct-klaro-text-color: color del texto.

• --ct-klaro-accept-button-background-color: color de fondo del botón de aceptar.

• --ct-klaro-accept-button-text-color: color del texto del botón de aceptar.

3.5. Preguntas tipo rating y swipe.

Controlan elementos visuales específicos de las preguntas tipo rating (valoración con estrellas) y swipe (estilo Tinder).

• --ct-rating-star-color: color de las estrellas activas en preguntas de tipo rating con estrellas. Valor por defecto: #FBC02D.

• --ct-swipe-button-left-color: color del botón izquierdo y del icono ✕ en preguntas tipo swipe estilo Tinder. Valor por defecto: #E91E63.

• --ct-swipe-button-right-color: color del botón derecho y de los iconos ✓ y 👍 en preguntas tipo swipe estilo Tinder. Valor por defecto: #2EC4B6.

4. Otras especificaciones.

La personalización mediante CSS personalizado solo está disponible en campañas con Cool Promo y Cool Promo White Label, incluidas en los planes Gold y Diamond respectivamente.

Recuerda que puedes editar la CSS personalizada desde la previsualización de la campaña, lo que te permite ir aplicando cambios y ver el resultado directamente.

Si tienes alguna duda o necesitas ayuda, puedes contactarnos en el email help@cool-tabs.com.

5. Contenido relacionado.

Cómo configurar la CSS personalizada de una campaña.

Personalización avanzada con HTML propio.

Variables relacionadas con puntos en tu campaña.