Pequeños detalles que mejoran la apariencia

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 (1)

  • Imagen de David Puente

    Ester, eres la reina de los Themes en Bb Learn ;-)

    Mar 03, 2015

Escribe un comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
CAPTCHA
Esta pregunta es para comprobar si usted es un visitante humano y prevenir envíos de spam automatizado.