Artículos en esta sección

Cómo configurar la CSS personalizada de una campaña (versión clásica)

Avatar
Cool Tabs Support
Actualización
Seguir

 

1. Introducción.

2. Ideas y ejemplos.

3. Cómo configurarlo.

3.1. Botón de participar.

3.3. Detalles de la home.

3.4. Estilos del formulario de participación.

3.5. Página tras participar.

3.6. Otras personalizaciones.

3.7. CSS personalizada con variables de Cool Tabs.

4. 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 cambian en función del tipo de versión que hayas escogido en la sección correspondiente. El tipo de versión lo podrás cambiar en la sección 'Diseño' del editor de la camapaña: 

 

mceclip0.png

 

mceclip1.png

En el siguiente tutorial puedes ver cómo se configura la CSS de una campaña con la versión minimalista: Cómo configurar la CSS personalizada de una campaña (versión minimalista) >>

 

2. Ideas y ejemplos.

  • Quieres personalizar tu campaña con una guía de estilos o CSS propia.
  • Necesitas reglas específicas de CSS para ocultar alguna sección de tu campaña, cambiar el texto a algún botón, agrandar tipografías...

 

3. Cómo configurarla.

Personalizando la hoja de estilos de la 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 en tu campaña a medida.

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.

Para aplicar las reglas CSS que te vamos a mostrar a continuación, debes ir a la sección CSS personalizada que hay en el preview o configuración de la campaña:

 

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

 

3.1. 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 queramos añadir y que solo será válida para la landing principal.

Nuestra plantilla por defecto aparece de la siguiente manera:

 

mceclip1.png

 

3.2. Botón de participar.

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

 

mceclip2.png

 

3.2.1. Modificar el color

Para modificar el color del botón "Participa" debes utilizar la siguiente regla CSS:

.home_layout .participate_button {
background-color: #45eda3;
}

2.PNG

 

3.2.2. Ocultar el botón de participar

En caso de que quieres ocultarlo, utiliza:

.home_layout .participate_button {
display: none;
}

 

mceclip5.png

 

3.2.3. Cambiar el texto del botón de participar

Con esta opción podrás cambiar el texto de este botón por otro como "Entrar" o "¡Quiero unirme!".

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

 

mceclip6.png

 

3.2.4. Mover el botón

Con esta regla podrás mover el botón de participar dentro de la landing principal. Modificando los valores de top y left, podrás ir cambiando la ubicación de este botón.

.home_layout .section+.full_section .participate_button {
position: absolute;
top: 50%;
left: 55%;
}

 

mceclip8.png

  

3.3. Detalles de la home.

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

.home_layout .m_action_link {
display: none;
}

 

mceclip9.png

 

3.3.2. Ocultar la sección "Detalles".

.home_layout div:nth-child(5) {
   display: none;
}

 

mceclip10.png

 

3.3.3. Ocultar el botón "Compartir".

.home_layout .m_action_share {
display: none;
}

 

mceclip11.png

 

3.3.4. Ocultar el footer negro.

En la parte inferior aparece un aviso de "Esta promoción/concurso no está patrocinada, administrada ni asociada a Facebook. Los datos proporcionados, si los hubiere, son proporcionados al responsable de la página y no a Facebook".

Puedes ocultarlo con la siguiente regla:

.home_layout .tac_row{
 display: none;
}

  mceclip0.png

 

3.3.5. Ocultar el banner superior.

Por defecto, en nuestra plantilla aparece una franja rectangular de color, en la parte superior de la campaña. En caso de querer ocultarla, utiliza la siguiente regla:

.home_layout .header_section .m_banner {
  border-bottom: none;
}

 

mceclip12.png

 

3.3.6. Cambiar el color de todos los enlaces de la campaña.

Con la siguiente regla podrás cambiar el color de todos los enlaces de la campaña.

.m_header, .m_btn_goto, .link_btn_goto, .m_text_content .link_btn_goto, .m_score_indicator, .m_ribbon_text span, .m_comment_no, .m_actions_viewport .ok, .m_entries_entry_info .ok, .pagination a, .certificate_head .m_header a, .star_row, .video_options .active,.link_btn, .m_action_share_title, .m_score_value, .m_btn_goto[disabled], .m_user_created_at{
  color: #8454FF;
}

 

mceclip13.png

 

3.3.7. Ocultar los fondos.

Con esta regla, ocultarás todos los fondos de color gris claro de diferentes sitios de la campañas (detrás del botón de participar, etc.).

.m_figure_content, .m_comment_header, .home_layout .action_row, .footer_section, .footer_text, .points_row_content, .activity_row, .coupon, .m_entries_entry_figure{
  background-color: transparent;
}

 

3.3.8. Cambiar color de los bordes.

.m_banner, .m_option_input:checked + .m_option_label, .m_tab_nav_item.m_tab_nav_item_active, .m_wysiwyg_color, .m_figure_caption, .m_figure_combined .m_figure_content{
  border-color: red;
}

 

3.3.9. Cambiar todos los botones de color de la campaña.

Con esta regla podrás cambiar todos los botones que aparecen en tu campaña "Participa", "Compartir", "Gracias por participar"...

En caso de que quieras cambiar las franjas que aparecen, el color del texto de "Detalles", etc., debes hacerlo desde la sección "Fuentes y colores", y cambiar el color primario y secundario como quieras.

.m_header_step:before, .m_btn, .m_btn:hover, .m_countdown_title, .m_countdown_progress, .m_option:after, .m_option_input:checked + .m_option_label, .m_option_label:after, .m_pagination_active, .m_tab_nav_item_active, .m_options_page.m_options_page_active:before, .m_popup_header, .notice, .alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus, .wizard > .steps .done a, .wizard > .actions a, .gallery_entry_header,.home_layout .participate_button{
  background-color: #45eda3;
}

 

mceclip14.png

 

3.4. 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 queramos añadir, en este caso válida únicamente para el formulario de participación.

 

3.4.1. Ocultar el borde gris de las cajas.

En el formulario de participación aparecen unos bordes grises en cada campo de texto. En caso de querer ocultarlo, debes usuar la siguiente regla CSS:

.form_fields .form_input span, .select{
 background-color: transparent;
}

 

Formulario por defecto:

 

mceclip15.png

 

Formulario después de ocultar borde gris:

 

mceclip16.png

 

 

3.4.2. Cambiar el borde de cada caja de texto.

.m_header_title, .m_tab_nav_item, .form_fields .form_input input, .m_wysiwyg textarea, .select_content, .row + .row, .fields, .fields + .row, .m_message:after, .pagination a{
 border-color: #8e47d3;
}

 

mceclip1.png 

 

3.4.3. Modificar el texto ‘Enviar’ del botón del formulario.

Si quieres modificar el texto de "Enviar" en la sección del formulario, deberás utilizar la siguiente CSS y poner el texto que quieras:

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

 

mceclip17.png

 

3.4.4. Modificar el texto de los campos del formulario.

En este caso, estaremos modificando el texto que aparece por defecto en una campaña de validación de códigos o cupones. Tan solo deberemos de 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!important;
}
label[for=participation_validated_coupon_code]:not(.step_error)::before{
 font-size: 16px!important;
 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 pueden ser cambiados:

/* 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";
}

 

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

Por defecto, con nuestra plantilla, las opciones de respuesta se muestran a dos columnas.

 

 

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

​.m_options li{
 width: calc(100% - 1rem);
}

 

 

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

 

3.4.6. Colocar un campo del formulario arriba del todo.

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

.form_fields .form_input:last-child {
 -webkit-box-ordinal-group: 0;
 -ms-flex-order: -1;
 order: -1;
 margin-bottom: 26px;
 margin-top: 0;
}

 

3.4.7. Ocultar el número de la pregunta.

Con la siguiente regla ocultarás el número de la pregunta que aparece en el formulario:

.m_header_step::before {
 display: none;
}

 

3.4.8. Ocultar el texto de "Participa" en el formulario.

En nuestros formularios aparece por defecto un texto de Participa justo encima de los campos a rellenar:

 

mceclip18.png

 

En caso de que quieras ocultar ese texto, usa la siguiente regla CSS:

.m_header_section {
 display: none;
}

 

3.5. Página tras participar.

3.5.1. Botón de compartir.

Con la siguiente regla CSS, puedes mover el botón de "Compartir" de la pantalla tras participar. Para moverlo hacia arriba/abajo y/o izquierda/derecha, tan solo tienes que cambiar los porcentajes de top/left.

.entry_layout .m_btn.js_share_options{
  position:absolute;
  top: 60%;
  left: 25%;
}
  @media screen and (min-width:768px){
    top: 50%;
    left: 43%;
  }
.quiz_results{
  padding-top:3rem;
}

 

3.5.2. Botón de descargar.

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

.download_btn a {
 font-size: 0 !important;
}
.download_btn a::before {
 content: 'DESCARGAR CALENDARIO';
 display: block;
 font-size: 1rem;
 color: #FFFFFF !important;
 font-family: {{ font_family }} !important;
 font-weight: 400;
 font-size: 20px;
}

 

3.5.2. Botón de "Ver galería"

Utiliza la siguiente regla para ocultar el botón "Ver galería".

.thanks-page .x_cool_tabs_participations_link {
 display: none;
}

 

3.6. Otras personalizaciones.

3.6.1. Imágenes de fondo.

En caso de que quieras cambiar la medida de la pantalla en la que se pintan las imágenes de fondo, utiliza la siguiente regla CSS (si quieres cambiarlo a 768px):

.body {
   background-image: url('{{{ background_mobile_image_url }}}'); 
   background-repeat: no-repeat;
   @media screen and (min-width: 768px) {
      background-image: url('{{{ background_image_url }}}'); 
   }
}

 

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

 

4. Contenido relacionado.

Cómo configurar la CSS personalizada de una campaña (versión minimalista) >>

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

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

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.

Artículos relacionados