Las aplicaciones Cool Promo y Cool Promo White Label permiten la personalización completa de tus promociones y concursos. Estas apps ofrecen, por un lado, una personalización sencilla con distintas plantillas o templates 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.


Cómo personalizar una promoción o concurso con una hoja de estilos o css propia


En primer lugar, debes instalar la aplicación Cool Promo o Cool Promo White Label, ir a la sección “Diseño de la promoción” y elegir la opción “empty (en blanco / vacío) entre los temas personalizados que aparecen.


Diseño de la promoción: Tema Empty



Ten en cuenta que, si eliges el tema “Empty” y no lo personalizas a través de css, por defecto, no se verá la descripción de la promoción ni la información que aparece dentro del apartado “Detalles”, es decir, ni las fechas de finalización de la participaciones y/o votaciones, ni el número total de participaciones (en el caso de tener activado que se muestre).

También debes considerar que si lo único que quieres es personalizar el color de fondo de la promoción o concurso, la imagen de fondo, el color de las fuentes y el tipo de fuente, no será necesario que uses una css personalizada, ya que puedes modificar estas opciones en la sección de “Diseño de la promoción” o directamente desde la previsualización de tu campaña, donde puedes ir modificando estas opciones y guardando para ver el resultado.



Opciones de diseño en la previsualización



Cuándo debemos usar una hoja de estilos propia (.css personalizada)


Personalizando la hoja de estilos de nuestra campaña podremos realizar configuraciones a nivel visual mucho más avanzadas para conseguir un look & feel más próximo a nuestra marca y aplicar diseños en nuestra campaña a medida. Podremos mover elementos de sitio u ocultarlos, incluir elementos nuevos en nuestro template o cambiar por completo la línea gráfica de la campaña.


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 sólo será válida para la landing principal.


Botón de participar


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


  • Modificación de colores:


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


.home_layout .participate_button:after {
background-color: #89c893;
}


  • Ocultar el botón de participar:


.home_layout .participate_button {
display: none;
}


  • Cambiar el texto del botón de participar por otro, como ‘Entrar’ o ‘¡Quiero unirme!’:


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


.home_layout .participate_button {
 font-size: 0px;
 }


  • Mover el botón de participar dentro de la imagen 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: 30%;
left: 43%;
}


Cambiar todos los botones de color de tu campaña


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


.m_btn:after, .wizard > .steps .current a, .wizard > .actions a:after,.home_layout .participate_button:after{
background-color: #89c893;
}


Detalles de la home


  • Ocultar esta sección:
.section+.section{
 display: none;
 }


Cambiar el color de todos los enlaces de la promo


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


Eliminar todos los fondos de color gris claro de diferente sitios de la promo (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;
 }


Cambiar algunos detalles de color


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


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.


  • Eliminar el borde gris de las cajas
.form_fields .form_input span, .select{
background-color: transparent;
}


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


  • Modificar el texto ‘Enviar’ del botón del formulario


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



Más información sobre la configuración de la css personalizada en nuestra Guía de Estilos >>