Instalar skin responsive en roundcube Works on Roundcube 1.2.3

[editado]
“El tema vuelve a ser compatible hasta RoundCube 1.3.4”
[/editado]

Cuando utilizamos roundcube como Webmail para nuestro servicio de correo, tenemos un gran inconveniente al entrar desde un móvil a la web, y es que por defecto solo trae 2 skins y ninguno de los 2 se adapta al móvil y hace que la navegación a través de ahí sea imposible. Esto lleva a buscar algún skin o template que haga esto y vemos que son todos de pago o al menos hasta ahora.

Un usuario en GitHub ha desarrollado y compartido gratis su tema totalmente responsive y además basado en Material Design que utiliza Google en su sistema operativo desde Android 5.0 que es muy bonito. El tema se puede descargar desde GitHub y se llama Melanie2, ahora vamos a ver como descargamos lo necesario y lo instalaremos.

Al final del tutorial os dejo un zip con todo preparado.

1. Descargar y preparar lo necesario

 

Descargamos el tema 

https://github.com/messagerie-melanie2/Roundcube-Skin-Melanie2-Larry-Mobile

 

Una vez descargado lo descomprimimos y la carpeta descomprimida la renombramos a melanie2_larry_mobile. una vez renombrado lo copiamos en la carpeta “skins” dentro de la carpeta donde esta instalado roundcube.

Para hacer funcionar este tema, el mismo desarrollador nos dice que tenemos que instalar 2 plugins, el plugin “mobile” y “jquery_mobile“

Una vez descargados los plugins hacemos como en el tema, descomprimimos los zips y renombramos “Roundcube-Plugin-Mobile-master” a “mobile”  y “Roundcube-Plugin-JQuery-Mobile-master”  a “jquery_mobile” y copiamos las 2 carpetas a la carpeta “plugins” dentro de la carpeta donde esta instalado roundcube.

 

2. Configurar el nuevo plugin

Ahora que ya tenemos todos los plugins y el skin en su sitio vamos a configurar para que funcione. Para ello vamos a la carpeta “config” y editamos el archivo “config.inc.php”  y nos vamos al final del archivo donde esta el apartado plugins y añadimos en la ultima fila esta linea:

$config['plugins'] = array( 'mobile' );

como muestro en la imagen

Guardamos el archivo y ya lo podemos cerrar.

 

3. Activar el nuevo skin

Si no habéis tenido ningún problema es que ya lo tenemos bien instalado, ahora toca ir a la web y activar el nuevo tema:

Cuando entremos en un móvil, por defecto debería de ponerse el nuevo tema, de no ser así, arriba a la izquierda tenemos un nuevo botón que pone vista móvil y nos activaría el nuevo tema , pero sería mejor activar este nuevo tema tanto para escritorio como móvil y así no tener problemas.

 

Vamos a nuestra web de roundcube e iniciamos sesión y abrimos la configuración.

 

 

y dentro de la configuración abrimos preferencias->interfaz de usuario.

 

Si nos fijamos vemos que ahora tenemos 3 skins, los que viene por defecto y el nuevo Melanie que acabamos de instalar, tan solo lo seleccionamos y pulsamos en guardar.

 

Ahora vemos la diferencia entre los 2 skins

En la imagen de arriba vemos como los cuadros para ver el correo o escribir son muy oequeños y se hace imposible leer, además el menú ha quedado todo entremezclado.

En cambio en el nuevo skin esta totalmente preparado para uso en el móvil, con menús desplegables y una fácil lectura y es bastante intuitivo y más aún si eres usuario de Android ya que como podemos apreciar y he comentado anteriormente esta basado en Material Design  de Google.

 

La versión de escritorio no se queda corta, es muy limpia y agradable a la vista y como no muy moderno.

 

Como os dije aquí os dejo un zip con los plugins y el skin ya descomprimido y renombrado.

Descargar pack

Ahora ya podemos usar con facilidad nuestro roundcube desde cualquier móvil, espero que os sirva este tutorial y si os ha gustado o os ha servido no olvidéis de compartir.