Inicio > Español > CSS Hack para Roundcube (mejor uso del espacio en pantalla)

CSS Hack para Roundcube (mejor uso del espacio en pantalla)

Lunes, 4 de febrero de 2013

RoundCube es un buen cliente de Webmail, pero el diseño de la “Skin” por defecto deja mucho que desear, el gris es triston, pero eso no es tan malo.

Algo que me tenia harto era que el espacio superior de la pagina estaba muy mal utilizado. En esta epoca en la que las pantallas miden un kilometro de ancho por 1 centimetro de alto es inaceptable utilizar 350 Pixeles de altura para mostrar un logo y 4 botones, al principio trate de de mover los botones a una barra vertical pero esto no funciono.

Al re-dimensionar la pagina se volvía un desastre y la barra cambia según la vista. Así que abandone esa opción por algo mas sencillo.

Roundcube - Css - Hack

Roundcube - Css - Hack

Para lograrlo hay que modificar 2 archivos CSS, el mail.css y el common.css, solo se tocan 3 declaraciones.

Con ello obtienes:

  1. Darle 1x1px al logo y hacerlo desaparecer.
  2. Mover los campos de búsqueda a la parte donde estaba el logo
  3. Ponerle una propiedad hover a la barra de botones de email (responder, reenviar Etc.)
  4. también reduje el margen inferior que no se utiliza para nada 

Con esto ganas 240 pixels de altura. lo cuales importante por ejemplo en un Netbook o un tablet con una resolución de 1024*600px

Como hacerlo:

Listo!


Author: Categories: Español Tags:
  1. Sin comentarios aún.
  1. Sin trackbacks aún.