Artículos en esta sección

Más información

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

Avatar
Cool Tabs Support
Actualización
Seguir

 

1. Introducción.

2. Cómo configurarlo.

2.1. Botón de participar.

2.2. Detalles de la home.

2.3. Estilos del formulario de participación.

2.4. Estilos de la página tras participar.

3. Contenido relacionado.

 

1. Introducción.

Las aplicaciones Cool Promo y Cool Promo White Label permiten la personalización completa de tus campañas y concursos. Estas apps ofrecen, por un lado, 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.

**IMPORTANTE** Las reglas CSS que te explicamos en este tutorial no aplican a la versión de diseño clásico, que encontrarás solo disponible en campañas antiguas. Si tu campaña tiene diseño clásico, consulta el tutorial: Cómo configurar la CSS personalizada de una campaña con diseño clásico (campañas antiguas) >>

 

2. Cómo configurarlo.

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. Podrás 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 en la sección CSS personalizada del preview o de la configuración de la campaña:

 

mceclip6.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. En este tutorial te lo explicamos.

También podrás modificar tus campañas con nuestra personalización avanzada. 

 

Estilos de la landing principal o homepage de la campaña

La clase principal de esta primera página de la campaña es ‘.home_layout’. Por tanto, es recomendable heredar de esta clase cualquier regla que quieras añadir y que solo será válida para la landing principal.

La plantilla, por defecto, aparece de la siguiente manera:

 

mceclip1.png

 

2.1. Botón de participar.

La clase principal es .home_layout .participate_button y .tt_new_promo_game_link (heredando de .home_layout, que es la clase principal de la landing del concurso).

 

2.1.1. Ocultar el botón de participar.

En caso de que quieras ocultarlo, debes utilizar:

 

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

 

mceclip2.png

 

2.1.2. Cambiar el texto del botón de participar.

Con esta opción podrás cambiar este botón por otro como "Entrar" 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;
}

 

mceclip3.png

   

2.2. Detalles de la home.

2.2.1. Ocultar el botón "Ver mi participación".

 

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

 

mceclip4.png

  

    

2.3. Estilos del formulario de participación.

La clase principal de esta página es ‘.form_layout’, por tanto, es recomendable heredar de esta clase cualquier regla que quieras añadir. En este caso, es válida únicamente para el formulario de participación.

 

2.3.1. Colocar un campo del formulario arriba del todo.

Con esta regla, el campo que se pinta por defecto al final del todo, se colocará al comienzo del formulario de participación.

 

.form_fields .form_input:last-child {
 -webkit-box-ordinal-group: 0;
 -ms-flex-order: -1;
 order: -1;
}

 

2.3.2. Modificar el texto de los campos del formulario.

En este caso, estarás modificando el texto que aparece por defecto en una campaña de validación de códigos o cupones. Tan solo tienes que pegar esta regla en la CSS personalizada y cambiar el texto que aparece en negrita.

 

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 queramos introducir";
}

 

También se pueden cambiar el resto de campos con esta misma regla. A continuación, incluimos todos los tipos de campo 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 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";
}

 

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

La plantilla, por defecto, viene con dos columnas para dos o más respuestas.

 

respuestas-dos-columnas.png

 

Si quieres modificar el número de columnas y dejar fijada una única columna, utiliza la siguiente regla:

 

.form_fields ol li, 
.form_fields ul li{
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

 

respuestas-una-columna.png

 

En caso de que quieras más columnas, tan solo debes modificar el porcentaje que aparece en la regla (33% para 3 columnas, 25% para 4 columnas...).

 

2.3.4. Colocar un campo del formulario arriba del todo.

Con esta regla, el campo que se muestra por defecto al final del formulario, se posicionará al comienzo del formulario de participación.

 

.form_fields > div:last-child {
 order: -1;
}

 

2.3.5. Ocultar el número de la pregunta.

Con la siguiente regla se olcultará el número de la pregunta que aparece en la parte superior del formulario:

 

.steps.clearfix {
 display: none;
}

 

2.3.6. Modificar el texto "ENVIAR" del botón del formulario.

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.4. Estilos de la página tras participar.

2.4.1. Botón de descargar.

Con la siguiente regla se cambia el texto del botón de "Descargar Cupón" que aparece en la página de gracias cuando se han configurado cupones:

 

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

 

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

 

2.4.2. Botón Ver Participantes.

Utiliza la siguiente regla para cambiar el texto del botón "Ver todas las participaciones".

 

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

 

2.4.3. Franja mensaje 'Gracias por Participar'.

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

 

mceclip0.png

 

Puedes ocultarlo con la siguiente regla CSS:

 

.flash_participations_notice {
  display: none;
}

 

2.5. CSS personalizada con variables de Cool Tabs.

En tus campañas, puedes usar tu propia CSS personalizada e integrar ciertas variables. 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>>

 

Un ejemplo sencillo de integración en la CSS sería:

 

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

 

3. Contenido relacionado.

Cómo generar una plantilla para una campaña con nuestro sistema de plantillas >>

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

Cómo configurar la CSS personalizada de una campaña con diseño clásico (campaña antiguas) >>

 

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.

Artículos relacionados