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

1. Introducción.

2. Antes de empezar: ¿necesitas CSS?

3. Paso a paso.

3.1. Estilos de la landing.

3.2. Estilos del formulario de participación.

3.3. Estilos de la página tras participar.

3.4. CSS personalizada con variables Cool Tabs.

4. Otras especificaciones.

5. Contenido relacionado.

1. Introducción.

Cool Tabs permite una personalización completa de tus campañas de contenido interactivo. Además de la configuración visual desde el editor (colores, fuentes, estilos), puedes añadir tu propia hoja de estilos o CSS para conseguir una personalización más avanzada.

En este tutorial te explicamos qué puedes hacer con CSS personalizada y cómo aplicarla.

2. Antes de empezar: ¿necesitas CSS?

Muchas personalizaciones se pueden hacer directamente desde el editor o activando otras funcionalidades. Antes de añadir reglas CSS, comprueba si lo que necesitas se cubre con alguna de estas opciones:

• ¿Quieres cambiar el texto de un botón, un campo del formulario o un mensaje? Usa el Catálogo de textos. Cubre los textos de los botones (Participa, Enviar, Descargar cupón, Ver participaciones…), los labels de los campos del formulario, los mensajes de error y validación, y muchos más.

• ¿Quieres cambiar colores, fuentes o el aspecto general (sombras, redondeos, mayúsculas en botones o labels)? Algunos ajustes de diseño que antes requerían CSS ahora se pueden configurar directamente desde el editor, en la sección Diseño > Estilos. Para los colores de error del formulario, en Formulario > Avanzado. Para los colores de feedback del quiz, en Quiz > Avanzado.

• ¿Quieres personalizar elementos visuales más concretos como el fondo de los campos del formulario, el popup de bases legales, el gestor de consentimiento de cookies o el color de las estrellas de las preguntas de rating? Usa las variables CSS de Cool Tabs, que se redefinen desde el CSS personalizado de la campaña sin necesidad de escribir reglas complejas.

Si lo que necesitas no está cubierto por ninguna de las opciones anteriores, por ejemplo, ocultar un elemento, moverlo de sitio o aplicar un fondo transparente,  entonces sí necesitas CSS personalizada. En los siguientes apartados encontrarás los casos más habituales.

3. Paso a paso.

Con CSS personalizada puedes realizar configuraciones visuales mucho más avanzadas para conseguir un look & feel más próximo a tu marca: mover o ocultar elementos, incluir elementos nuevos en tu plantilla o cambiar por completo la línea gráfica de la campaña.

Las reglas CSS se aplican desde la sección CSS personalizada de la previsualización o de la configuración de la campaña.

Con Cool Tabs puedes crear tus propias plantillas personalizadas y utilizar las públicas de libre uso, con un diseño personalizado para cada una. Para saber más, consulta el tutorial Cómo utilizar o generar una plantilla de una campaña.

También puedes modificar tus campañas con nuestra personalización avanzada.

3.1. Estilos de la landing.

La clase principal de la landing de la campaña es '.home_layout'. Es recomendable heredar de esta clase cualquier regla que quieras añadir, para que solo se aplique a la landing.

3.1.1. Botón de participar.

La clase principal es .home_layout .participate_button y .tt_new_promo_game_link. Para ocultar el botón 'PARTICIPA', usa la siguiente regla:

.home_layout .participate_button,
.home_layout .tt_new_promo_game_link {
 display: none;
}

Si lo que quieres es cambiar el texto del botón, puedes hacerlo desde la edición de la campaña > Diseño > Datos básicos.

3.1.2. Ocultar el botón 'Ver mi participación'.

Por defecto se muestra este botón. Puedes ocultarlo con la siguiente regla:

.home_layout .m_action_link.my_participation_link {
 display: none;
}

Si lo que quieres es cambiar el texto del botón, puedes hacerlo desde la edición de la campaña > Diseño > Datos básicos.

3.1.3. Eliminar el fondo del contenedor de la landing.

Por defecto, la landing se muestra con un contenedor de color (el color secundario definido en tu campaña). Con la siguiente regla puedes quitarle el color y darle total transparencia:

.wrapper.home_layout {
 background-color: transparent !important;
}

Si quieres eliminar el contenedor en todas las páginas de la campaña, consulta el tutorial Cómo configurar la campaña con fondo transparente.

3.2. Estilos del formulario de participación.

La clase principal del formulario es '.form_layout'. Es recomendable heredar de esta clase cualquier regla que añadas, para que solo se aplique al formulario.

• Para cambiar el texto de los labels o del botón de enviar, usa el Catálogo de textos.

• Para cambiar el número de columnas de las respuestas en un quiz, ve a la pestaña Diseño de la pregunta del quiz.

3.2.1. Ocultar los botones Anterior/Siguiente/Enviar.

En quizzes, puedes ocultar los botones de navegación activando la opción "Pasar de pregunta automáticamente al responder" (en Quiz > Avanzado), que hace avanzar el quiz al seleccionar una respuesta sin necesidad de botones.

Si necesitas ocultarlos en otros casos, usa las siguientes reglas CSS:

• La regla :first-child corresponde al botón 'Anterior'

.actions ul li:first-child {
display: none !important;
}

• La regla :nth-child(2) corresponde al botón 'Siguiente'

.actions ul li:nth-child(2) {
display: none !important;
}

• La regla :last-child corresponde al botón 'Enviar'

.actions ul li:last-child {
display: none !important;
}

3.3. Estilos de la página tras participar.

Para cambiar el texto de los botones de esta página (Descargar cupón, Descargar, Ver todas las participaciones, etc.), usa el Catálogo de textos.

3.3.1. Ocultar la franja del mensaje 'Gracias por Participar'.

Por defecto, en la pantalla tras participar se muestra un mensaje de gracias enmarcado en una franja.

Puedes deshabilitarlo desde Pantallas finales > Avanzado.

3.4. CSS personalizada con variables Cool Tabs.

Puedes integrar variables en tu CSS personalizada para usar valores dinámicos en lugar de fijarlos. Por ejemplo, usar el color picker de la campaña y aplicar ese mismo color a todos los elementos del body en la CSS.

Consulta el listado de variables que puedes incluir en la CSS.

Ejemplo de integración:

body{
 color: {{font_color}};
 background-color: {{background_color}};
 font-family: {{font_family}};
}
h1{
 color: {{primary_color}};
}
h2{
 color: {{secondary_color}};
}

4. Otras especificaciones.

Si tienes dudas, contáctanos en help@cool-tabs.com.

5. Contenido relacionado.

Cómo cambiar el color del gráfico con el resumen de respuestas de un quiz o encuesta por CSS.

Cómo cambiar los colores del mensaje del feedback y de respuesta de un quiz por CSS.

Personalización avanzada de una campaña mediante variables.