Ejemplos de uso del CSS personalizado

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