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.

Las aplicaciones Cool Promo y Cool Promo White Label permiten una personalización completa de tus campañas de contenido interactivo.

Por un lado, ofrecen una configuración sencilla desde el editor, con la que puedes seleccionar colores, fuentes y otros estilos para cada elemento de la campaña. Por otro lado, ofrecen la posibilidad de conseguir una personalización más avanzada añadiendo tu propia hoja de estilos o CSS a la aplicación.

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

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)? Lo encuentras en el editor, en la sección Diseño > Estilos del editor de la campaña. 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 quieres hacer no entra en ninguno de los puntos anteriores como, por ejemplo, ocultar un elemento, moverlo de sitio, aplicar un fondo transparente o cualquier otra personalización, entonces sí necesitas CSS personalizada. 

En los siguientes apartados encontrarás los casos más habituales.

3. Paso a paso.

Personalizando la hoja de estilos de tu campaña podrás realizar configuraciones a nivel visual mucho más avanzadas, para conseguir un look & feel más próximo a tu marca y aplicar diseños a medida a tu campaña.

Vas a poder mover elementos de sitio u ocultarlos, incluir elementos nuevos en tu template o cambiar por completo la línea gráfica de la campaña.

Las reglas CSS que te mostramos a continuación, se aplican desde la la sección CSS personalizada de la previsualización o de la configuración de la campaña.

Recuerda que, 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 le 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 esta primera página de la campaña es ‘.home_layout’.

Es recomendable heredar de esta clase cualquier regla que quieras añadir, que solo será válida para la landing principal.

A continuación, puedes ver un ejemplo de la plantilla de la landing por defecto.

3.1.1. Botón de participar.

La clase principal es .home_layout .participate_button y .tt_new_promo_game_link (heredado de .home_layout, que es la clase principal de la landing de la campaña).

 Para ocultar el botón 'PARTICIPA' de la landing, debes utilizar la siguiente regla.

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

A continuación, puedes ver un ejemplo de cómo se mostraría la landing.

Si lo que quieres es cambiar el texto del botón (por ejemplo, de PARTICIPA a ENTRAR o ¡QUIERO UNIRME!), no necesitas CSS, hazlo desde el Catálogo de textos.

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;
}

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 que definas en tu campaña), sobre el que aparecen el título, la descripción y los botones. Aplicando la siguiente regla CSS, podrás quitarle el color y darle total transparencia.

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

En el siguiente ejemplo, se ha eliminado el fondo del contenedor para que se vea de fondo la imagen de la campaña.

Si quieres eliminar el contenedor de todas las páginas de la campaña, no solo en la landing, tienes la opción de configurar transparencia en todas las páginas. Puedes ver cómo hacerlo en 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 de los campos 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.

Para ocultar los botones que aparecen en un quiz por pasos, se deben de usar 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 ocultarlo con la siguiente regla CSS.

.flash_participations_notice {
  display: none;
}

3.4. CSS personalizada con variables Cool Tabs.

En tus campañas puedes usar tu propia CSS personalizada e integrar ciertas variables, que te permitirán elegir valores dinámicos en lugar de fijarlos. Por ejemplo, puedes usar el color picker de la campaña para seleccionar el color de la fuente y aplicar ese mismo color a todas las fuentes del body en la CSS.

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

A continuación, te mostramos un ejemplo sencillo de integración en la CSS. 

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 alguna duda o necesitas ayuda, puedes contactarnos en el email 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.