Artículos en esta sección

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

Avatar
Cool Tabs Support
Actualización
Seguir

 

1. Introducción.

2. Paso a paso.

2.1. Estilos de la landing.

2.2. Estilos del formulario de participación.

2.3. Estilos de la página tras participar.

2.4. CSS personalizada con variables Cool Tabs.

3. Otras especificaciones.

4. Contenido relacionado.

 

1. Introducción.

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

Por un lado, estas apps ofrecen una configuración sencilla con distintas personalizaciones, que permiten seleccionar colores y estilos diferentes para cada elemento de la campaña. Y, 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.

 

2. 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.

 

css-1.PNG

 

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. 

 

2.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, que se muestra por defecto.

 

landing_campa_a.PNG

 

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

 

Ocultar el botón de participar

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.

 

css-ocultar-participa.PNG

 

Cambiar el texto del botón de participar

Con la siguiente regla, puedes cambiar el texto del botón 'PARTICIPA' por otro como 'ENTRAR', 'REGISTRARME' O '¡QUIERO UNIRME!'.

 

.home_layout .participate_button::before,
.home_layout .tt_new_promo_game_link::before {
 content: 'Entrar';
 font-size: 16px;
}
.home_layout .participate_button,
.home_layout .tt_new_promo_game_link {
 font-size: 0;
}

 

css-cambiar-texto-participa.PNG

   

2.1.2. Otros detalles de la landing.

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

Por defecto, se muestra este botón, que puedes ocultarlo con la siguiente regla. 

 

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

 

css-ocultar-ver-participacion.PNG

 

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 se muestra el título, la descripción y los botones de la landing. Sin embargo, aplicando la siguiente regla CSS, podrás quitarle el color y darle total transparencia. 

 

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

 

A continuación, puedes ver un ejemplo de cómo se mostraría. En este caso, se ha eliminado el fondo del contenedor de la landing para que se vea de fondo la imagen de fondo de la campaña.

 

css-quitar-fondo-landing.PNG

 

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. 

 

2.2. Estilos del formulario de participación.

La clase principal de esta página es ‘.form_layout’.

Es recomendable heredar de esta clase cualquier regla que quieras añadir. Solo es válida para el formulario de participación.

 

2.2.1. Modificar el texto de los campos del formulario.

Al aplicar esta regla, estarás modificando el texto que aparece, por defecto, en los campos del formulario de datos.

Solo tienes que pegar esta regla en la CSS personalizada del campo que quieras modificar y cambiar el texto que aparece en negrita.

A continuación, incluimos todos los tipos de campos que se pueden modificar.

 

/* Cambio de pregunta de NOMBRE */
label[for=participation_first_name]:not(.step_error){
font-size: 0px;
}
label[for=participation_first_name]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA NOMBRE";
}

/* Cambio de pregunta de APELLIDOS */
label[for=participation_last_name]:not(.step_error){
font-size: 0px;
}
label[for=participation_last_name]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA APELLIDOS";
}

/* Cambio de pregunta de SEGUNDO APELLIDO */
label[for=participation_last_name2]:not(.step_error){
font-size: 0px;
}
label[for=participation_last_name2]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA SEGUNDO APELLIDO";
}


/* Cambio de pregunta de NOMBRE Y APELLIDOS */
label[for=participation_first_and_last_name]:not(.step_error){
font-size: 0px;
}
label[for=participation_first_and_last_name]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA NOMBRE Y APELLIDOS";
}

/* Cambio de pregunta de EMAIL */
label[for=participation_email]:not(.step_error){
font-size: 0px;
}
label[for=participation_email]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA EMAIL";
}

/* Cambio de pregunta de CONFIRMACIÓN EMAIL */
label[for=participation_email_confirmation]:not(.step_error){
font-size: 0px;
}
label[for=participation_email_confirmation]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA CONFIRMACIÓN EMAIL";
}

/* Cambio de pregunta de TELÉFONO */
label[for=participation_phone]:not(.step_error){
font-size: 0px;
}
label[for=participation_phone]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA TELÉFONO";
}

/* Cambio de pregunta de DNI */
label[for=participation_nif]:not(.step_error){
font-size: 0px;
}
label[for=participation_nif]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA DNI";
}

/* Cambio de pregunta de IBAN */
label[for=participation_iban]:not(.step_error){
font-size: 0px;
}
label[for=participation_iban]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA IBAN";
}

/* Cambio de pregunta de DIRECCIÓN */
label[for=participation_address]:not(.step_error){
font-size: 0px;
}
label[for=participation_address]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA DIRECCIÓN";
}

/* Cambio de pregunta de CIUDAD */
label[for=participation_location]:not(.step_error){
font-size: 0px;
}
label[for=participation_location]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA CIUDAD";
}

/* Cambio de pregunta de PROVINCIA */
label[for=participation_province]:not(.step_error){
font-size: 0px;
}
label[for=participation_province]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA PROVINCIA";
}

/* Cambio de pregunta de REGIÓN */
label[for=participation_region]:not(.step_error){
font-size: 0px;
}
label[for=participation_region]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA REGIÓN";
}

/* Cambio de pregunta de CÓDIGO POSTAL */
label[for=participation_postal_code]:not(.step_error){
font-size: 0px;
}
label[for=participation_postal_code]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA CÓDIGO POSTAL";
}


/* Cambio de pregunta de PAÍS */
label[autocomplete=country]:not(.step_error){
font-size: 0px;
}
label[autocomplete=country]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA PAÍS";
}

/* Cambio de pregunta de GÉNERO */
label[for=participation_gender]:not(.step_error){
font-size: 0px;
}
label[for=participation_gender]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA GÉNERO";
}

/* Cambio de pregunta de CUMPLEAÑOS */
label[for=participation_birthdate]:not(.step_error){
font-size: 0px;
}
label[for=participation_birthdate]:not(.step_error)::before{
font-size: 1rem;
font-family: inherit;
content: "PREGUNTA CUMPLEAÑOS";
}

 

En una campaña para validar códigos promocionales, por defecto, se muestra el texto 'Introduce aquí tu código o cupón para participar'. Con la siguiente regla CSS puedes modificar ese texto que le indica al usuario que debe introducir un código a validar.

 

label[for=participation_validated_coupon_code]:not(.step_error){
 font-size: 0px;
}
label[for=participation_validated_coupon_code]:not(.step_error)::before{
 font-size: 1rem;
 font-family: inherit;
 content: "Texto que quieras introducir";
}

 

2.2.2. Cambiar el número de columnas por respuestas en un quiz.

Por defecto, la plantilla de una campaña está configurada para que las respuestas se muestren a dos columnas. 

 

respuestas-dos-columnas.png

 

Sin embargo, es posible modificar el número de columnas de tu quiz o encuesta, para mostrar las respuestas en columnas según dispositivo. Esta funcionalidad está disponible bajo demanda. Puedes solicitarla escribiéndonos a help@cool-tabs.com, para que te la activemos de forma gratuita en tu campaña. 

 

respuestas-una-columna.png

 

2.2.3. Modificar el texto del botón de enviar. 

Puedes modificar el texto del botón 'ENVIAR', que aparece en el formulario, por el texto que quieras, por ejemplo 'ENVIAR INFORMACIÓN', utilizando la siguiente CSS.

 

#js_cool_promo_submit_button::after, .wizard > .actions a[href='#finish']::after{
 content: 'Enviar información';
 font-size: 1rem;
}
#js_cool_promo_submit_button, .wizard > .actions a[href='#finish']{
 font-size: 0px;
}

 

mceclip1.png

 

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

 

2.3. Estilos de la página tras participar.

2.3.1. Botón de descargar.

En campañas de reparto de cupones, en las que se configura la descarga de dicho cupón en la página tras participar, puedes modificar el texto del botón 'DESCARGAR CUPÓN'.

 

.ct_download_coupon_button .m_btn {
 font-size: 0;
}
.ct_download_coupon_button .m_btn::before {
 display: inline-block;
 font-family: inherit;
 font-size: 1rem;
 color: inherit;
 content: "DESCARGAR TICKET";
}

 

css-cambiar-boton-cupon.PNG

 

Para cambiar el texto del botón de 'DESCARGAR' que aparece cuando se añade un archivo de descarga en la página tras participar se debe de usar el siguiente código:

 

.download_row .section .download_btn {
 font-size: 0;
}
.download_row .section .download_btn::before {
 display: inline-block;
 font-family: inherit;
 font-size: 1rem;
 color: inherit;
content: "DESCARGAR GUÍA GRATIS";
}

 

css-cambiar-boton-descargar.PNG

 

2.3.2. Botón Ver Participaciones.

Si has habilitado las participaciones públicas, para que el resto de usuario pueda ver quién ha participado, puedes modificar le texto el botón de 'VER TODAS LAS PARTICIPACIONES' utilizando la siguiente regla.

 

.section .btn.link_btn_goto span {
 font-size: 0;
}
.section .btn.link_btn_goto span::before {
 display: inline-block;
 font-family: inherit;
 font-size: 1rem;
 color: inherit;
 content: "VER RESTO DE PARTICIPANTES";
}

 

css-cambiar-boton-participaciones.PNG

 

2.3.3. Franja del mensaje 'Gracias por Participar'.

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

 

css-franja-gracias.PNG

 

Puedes ocultarlo con la siguiente regla CSS.

 

.flash_participations_notice {
  display: none;
}

 

2.4. CSS personalizada con variables Cool Tabs.

En tus campañas, puedes usar tu propia CSS personalizada e integrar ciertas variables, que te vasn a permitir elegir ciertos valores dinámicos. Por ejemplo, puedes usar el color picker de la campaña para seleccionar el color de la fuente de tu campaña y usar ese color para 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}};
}

 

3. Otras especificaciones.

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

 

4. 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.

 

 

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.

Artículos relacionados