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

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.

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 personalizació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 de Diseño:

En el siguiente tutorial configuraremos la CSS de nuestra campaña con versión clásica:

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

2. Cómo configurarlo.

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.

Para aplicar las reglas CSS que vamos a mostrar a continuación, lo haremos desde la sección Css personalizada, desde el preview o 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. 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 queramos añadir y que sólo será válida para la landing principal.

Nuestra plantilla por defecto aparece de la siguiente manera:

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

Ocultar el botón de participar.

En caso de que queramos ocultarlo, utilizaremos:

.home_layout .participate_button {
display: none;
}

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 {
content: 'Entrar';
font-size: 16px;
}
.home_layout .participate_button {
 font-size: 0;
}

2.2. Detalles de la home.

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

.home_layout .m_action_link {
display: none;
}

Ocultar el botón "Compartir".

.home_layout .m_action_share {
display: none;
}

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

Colocar un campo del formulario arriba del todo.

Con esta regla, el campo que se pinta por defecto al final del todo, lo pondremos 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. Contenido relacionado.

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

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

Personalización avanzada de campañas >>

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