Pasar al contenido principal
Alt text

Pequeños detalles que mejoran la apariencia

Blackboard Learn, personalización

Siempre que hago una nueva marca o edito un tema en Blackboard para algún cliente, me encuentro con algo nuevo, puede ser de la forma de "queremos que esto se vea así" o simple casualidad que, ajustando un elemento, otro se cambie o se vea afectado por el cambio, que, por suerte, casi siempre es a bien.

Hoy os muestro cómo modificar algunas cosas en la hoja de estilos. Son pequeños cambios, pero que pueden hacer una gran diferencia.

Cabeceras con menos altura en las páginas:

#pageHeader{
padding: 10px 15px !important;
}
#schemePreviewHead{
padding: 10px 15px !important;
}
.pageTitle{
padding: 10px 15px !important;
}

Menor espacio entre items de contenido en un curso:

.contentList > li{
padding: 5px 30px;
}
.buildList > li{
padding: 5px 30px;
}
.contentListPlain > li{
padding: 5px 30px;
}
.announcementList > li{
padding: 5px 30px;
}
.contentPageItem{
padding: 5px 30px;
}

Avatares más grandes en el listado del curso:

.profileCardAvatarThumb img {
height: 57px !important;
width: 57px!important;
}

Espacios en portlets:

/*portlet anuncios con menos espacio*/
.collapsible ul.portletList{
margin-bottom: 2px !important;
padding-bottom: 0px !important;
}

EDIT:

Esta es la forma correcta:

/*portlet anuncios con menos espacio*/
.collapsible ul.portletList li{
margin-bottom: 2px !important;
padding-top: 0px !important;
}

/*portlet cursos con menos espacio*/
.portlet .portletList-img > li{
padding-top: 2px;
margin-bottom: 2px;
}

Cajetillas de login con un borde más delgado, y esquinas cuadradas:

#loginBox input[type="text"], #loginBox input[type="password"]{
border: 1px solid #CCCCCC;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius: 0px;
}

Logo superior izquierda más grande y separado de los bordes:

.bannerImage{
padding: 25px 0 0 25px;
max-height: 90px !important;
}

Botón de logout redondo:

div.global-nav-bar .logout-link{
width: 25px!important;
-moz-border-radius: 12px;
-webkit-border-radius:12px;
border-radius: 12px;
}

Eliminar el borde y la sombra de la caja inferior:

div.contentBox{
background-image: none !important;
border: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Os recuerdo que estos cambios se realizan añadiendo el código correspondiente al final del archivo themes.css.

¿Alguien está interesado en algún cambio en particular?

Comentarios (0)

Deje un comentario

Texto sin formato

  • No se permiten etiquetas HTML.
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.