Hemos cambiado algunas cosas para este sencillo banner, donde con un sencillo código podrás darle un aspecto más atractivo.
Personalizar Complianz
Por ejemplo, el texto del botón está en mayúsculas y el espacio entre las letras es ligeramente más ancho que el texto.
Las fuentes no se heredaron del tema, por lo que tuvimos que añadir las familias de fuentes y los tamaños correctos.
- Para continuar con el estilo del sitio, sustituimos el banner por uno redondeado
- Añadimos un borde en la parte inferior y cambiamos el color.
- Ahora el enlace «Leer más» es azul. (puedes cambiarlo sustituyendo el código)
- Utiliza el deslizador flotante derecho, estilo bloque, para las categorías.
¿Cómo cambio el diseño de Complianz?
Activa la pestaña «Usar CSS personalizado» que encontrarás en el menu de Banner de cookies
Sólo tienes que copiar y pegar el CSS de abajo y ya está casi listo.
Como puede ver, las plantillas de banners son flexibles e incluso un simple banner puede cambiar más de lo que piensa.
/* Font family, weight and size for cookie message */
.cc-message {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 14px;
}
/* Adding margin for consistency on website */
#cc-window.cc-type-categories.cc-floating .cc-compliance .cc-accept-all.cc-dismiss {
margin: 14px 0 0 0;
}
/* Styling the window to match website */
.cc-window{
z-index:9999;
border-bottom:solid 8px #29b6f6;
border-radius:5px;
box-shadow: /*layered*/
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
}
/* Font family, weight and size for categories. */
.cc-window .cc-category{
font-size:14px;font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;font-weight: 300;
}
/* Font family, weight and size for buttons. */
.cc-btn {
border-radius: 50px!important;
font-family: 'Roboto', sans-serif;
font-weight: 400!important;
font-size: 11px;
text-transform: Uppercase!important;
letter-spacing: 1.8px;
}
/* Font color for links. */
.cc-link {
color: #29b6f6!important;
}
@media screen and (max-width: 768px){ /*display on mobile*/
.cc-revoke .cc-bottom {
display: block!important;
}}Para ver todos los post del blog pulsa aquí
