En esta sección podrás a través de código css cambiar el color de diferentes componentes, destacar elementos a través del color y el tamaño, cambiar familias tipográficas y estilos de los textos y también ocultar elementos de la UI.
Dejamos aquí algunos ejemplos y su código correspondiente:
1) Cambiar de color la topbar y el buscador de cursos vista participante.
Código:
.top-bar{ background: #34D69B;}.top-bar .inputSearch input { background: #80E0B4;}
Antes:
Después:
2) Cambiar el color de las cards de cursos de la home participante.
Código:
.live-event-category .listing-events.gallery.live-event-slider .live-event-data-general .live-event-data {background: #00655B;}
Antes:
Después:
3) Destacar un elemento de la topbar y sus menus desplegables.
Ejemplo sección Notificaciones
Código:
.menu.tool-bar .select-news{background-color: #34D69B;}.menu.tool-bar .select-news li .news-item .news-date{color: #00655B;}.menu.tool-bar .select-news li .news-item h3{color: #ffffff;}.menu.tool-bar .select-news li{border-bottom: 1px solid #E5F9F1;}.top-bar .topBarList a.iconNews { color: #00655B;margin-right: 2px;background-color: #34D69B;padding: 3px 10px;border-radius: 4px;margin-top: -5px;font-weight: 600;}
Antes:
Después:
4)Ocultar elementos.
Se pueden ocultar elementos utilizando la propiedades Display:none de css. Ejemplo de ocultar sección Contraseña de la sección Mi perfil:
Código:
#userPassword{display:none;}
Antes:
Después:
5)Destacar banderín Curso nuevo/actualizado. (Cambiando el color y el grosor de la fuente)
Código:
Curso nuevo:
.live-event-category .listing-events.gallery.live-event-slider .live-event-data-general .image-live-event .live-event-progress-status.isNew {background-color: #049BFF;font-weight: 600;}
Curso actualizado:
.live-event-category .listing-events.gallery.live-event-slider .live-event-data-general .image-live-event .live-event-progress-status.isUpdated {background-color: #8C1C30;font-weight: 600;}