Introducción
La personalización CSS ofrece la posibilidad de ir más allá de las opciones disponibles en la sección «Branding» y de reforzar la integración de la herramienta alineándola perfectamente con tu identidad gráfica.
📝 Nota: la personalización CSS está disponible en los planes Advanced y Plus https://www.loyoly.io/plans
Posibilidades
La personalización CSS ofrece numerosas posibilidades, en particular:
cambiar el tamaño de los elementos
cambiar el color
cambiar los espaciados
Recursos para aprender CSS
Cómo integrar tu personalización CSS
La integración de la personalización del CSS se realiza mediante la importación de un archivo que reúne las reglas CSS que aplicar. A continuación, el modo operativo para cargar este archivo.
Ve a la página Branding
Haz clic en el botón Modificar de la tarjeta Apariencia general
Despliega la sección CSS personalizado
Haz clic en el campo o la flecha azul para abrir la ventana de importación
Selecciona tu archivo css
El nombre del archivo debe aparecer después de cerrar la ventana de importación
Haz clic en el botón Guardar para que el archivo se aplique.
Nota: tras guardar, los cambios se pueden ver en la vista previa y se aplican en el front-user. Será necesario recargar la página para visualizar los cambios en este último.
¿Qué editar y cómo?
La edición de elementos se realiza mediante la escritura de reglas CSS en un archivo que debes importar desde el back-office.
Encontrar las clases del elemento que editar
El primer paso para editar elementos es encontrar un selector, generalmente el nombre de la clase aplicada.
La forma más sencilla es utilizar el inspector de elementos de tu navegador. Ten en cuenta que el modo desarrollador debe estar activado, en particular en Safari.
En la captura anterior, observamos que el bloque que contiene los textos y botones utiliza las clases lds-section-header__wrapper--content y right. Nos basamos en este bloque en el resto del documento.
Principios básicos
Para sobreescribir varios casos:
Edición de un atributo no utilizado en el front-user
Por ejemplo, el color de fondo del bloque identificado anteriormente. No tiene un color de fondo explícito. En este caso, basta con usar el nombre de la clase como selector.
.lds-section-header__wrapper--content { background-color: white; }
Edición de un atributo utilizado por el front-user
Por ejemplo, el espaciado vertical (gap) entre los textos y los botones. De forma intuitiva, podríamos querer escribir lo siguiente.
.lds-section-header__wrapper--content { background-color: white; gap: 60px; }Esta modificación no funciona porque el CSS de la aplicación tiene prioridad debido a la tecnología utilizada. Puedes comprobarlo en el inspector de elementos: la propiedad gap: 60px aparece tachada, ya que la clase de la aplicación (identificable por [data...]) se impone.
Sin embargo, existen dos posibilidades para editar este espaciado.
La primera es ser más preciso en la declaración de la regla
ya sea por combinación de clases, ya sea por jerarquización.
En nuestro ejemplo, la clase está incluida en un div padre cuya clase es
lds-section__content. Para tener prioridad sobre el código de la aplicación, debemos mencionar esta jerarquía. Podemos utilizar el CSS Nesting para lograrlo.
.lds-section__content { .lds-section-header__wrapper--content { background-color: white; gap: 60px; } }El gap de 60px se aplica. La regla está en primera posición respecto a la de la aplicación.
La segunda es utilizar !important.
La regla !important en CSS permite forzar la prioridad de una propiedad CSS sobre las demás reglas. Sin embargo, hay que utilizarla con moderación.
.lds-section-header__wrapper--content { background-color: white; gap: 60px !important; }El gap de 60px se aplica aunque la regla aparezca en segunda posición.
Breakpoints
El front-user es «responsive» gracias al uso de media-queries. La aplicación sigue un enfoque «mobile first», lo que significa que las reglas CSS de base están diseñadas para pantallas pequeñas. Las adaptaciones para pantallas más grandes se aplican luego como sobreescritura. A continuación, la lista de breakpoints empleados.
Breakpoint | Dimensiones (width) |
small | ≥ 368px |
medium | ≥ 480px |
large | ≥ 768px |
extra large | ≥ 1024px |
extra extra large | ≥ 1440px |
Nombre de clases que contienen [data-XXXXXXXX]
⚠️ No utilices estos nombres para sobreescribir el CSS. El [data-XXXXXXXX] es generado por la tecnología utilizada para la construcción técnica del front user. De una versión a otra, este número puede variar; no es perenne.
Ejemplos de personalización
Tarjeta Misión: ampliar el icono y el espaciado
.lds-card-challenge { .lds-card-challenge__content { gap: 20px; .lds-image { width: 80px; height: 80px; } } }Carruseles: color de botones y flechas
.lds-carousel__button { opacity: 1 !important; background-color: yellow !important; .lds-icon { color: red; } }Tarjetas Recompensas o VIP: zoom al pasar el ratón
