Tema corporativo en Apache Guacamole

/ / , , , , , , , , , , , , , , , , , , , /

En este post vamos a darle un toque precioso a Apache Guacamole, por un lado le haremos que responda como el sitio predeterminado, vaya sin que los usuarios tengan que poner el /guacamole; y para la guinda pues lo de siempre, ponerle un tema personalizado, cercano al usuario, corporativo, con los logos, fondos, colores de la empresa…

 

Bueno, por recordar, en algún post anterior ya vimos cómo instalar Apache Guacamole, además de cómo integrarlo en Directorio Activo. Una fabulosa solución de código abierto que permite el acceso remoto seguro a equipos por Internet. Bueno, lo dicho, hoy toca una de cambiarle el tema y dejarlo chulo, veremos que tocar mínimamente para dejarlo fino.

 

Sitio predeterminado

Para que Apache Guacamole esté como sitio predeterminado en nuestro Tomcat. Simplemente, pararemos tomcat, renombramos la app a ROOT y arrancar Guacamole de nuevo; en el puerto 8080 ya responderá sin /guacamole/

systemctl stop tomcat9
cd /var/lib/tomcat9/webapps/
rm -rf ROOT
mv guacamole.war ROOT.war
systemctl start tomcat9

 

¡Pero ojo! si tenemos proxy inverso con Apache, modificamos también el fichero /etc/apache2/sites-available/default-ssl.conf con los siguientes cambios:

De:

<Location /guacamole/>

A:

<Location />

 

De:

ProxyPass http://XXX.XXX.XXX.XXX:8080/guacamole/ flushpackets=on

A:

ProxyPass http://XXX.XXX.XXX.XXX:8080/ flushpackets=on

 

Y de:

ProxyPassReverse http://XXX.XXX.XXX.XXX:8080/guacamole/

A:

ProxyPassReverse http://XXX.XXX.XXX.XXX:8080/

 

Y reiniciamos Apache:

systemctl restart apache2

 

Cambiando el Logo

Para cambiar el logo, simplemente lo reemplazamos:

cp logo.png /var/lib/tomcat9/webapps/guacamole/images/guac-tricolor.png

 

Para adaptar el logo al tamaño que mas nos encaje, en  /var/lib/tomcat9/webapps/guacamole/guacamole.css dentro de la sección .login-ui .login-dialog .logo { cambiamos:

De: A: 
width: 3em;
height: 3em;
background-size: 3em 3em;
-moz-background-size: 3em 3em;
-webkit-background-size: 3em 3em;
-khtml-background-size: 3em 3em;
 
width: 235px;
height: 55px;
background-size: 235px 55px;
-moz-background-size: 235px 55px;
-webkit-background-size: 235px 55px;
-khtml-background-size: 235px 55px;

 

Y también en /var/lib/tomcat9/webapps/guacamole/guacamole.min.css dentro de la sección .login-ui .login-dialog .logo{

De:

...margin:.5em auto;width:3em;height:3em;background-size:3em 3em;-moz-background-size:3em 3em;-webkit-b...

A:

...margin:.5em auto;width:235px;height:55px;background-size:235px 55px;-moz-background-size:235px 55px;-webkit-b...

 

Podremos cambiar el idioma y la breve descripción cambiando en /var/lib/tomcat9/webapps/guacamole/translations/en.json

De:

"NAME" : "Apache Guacamole",
"NAME" : "English",

A:

"NAME" : "Acceso a Mi PC",
"NAME" : "Spanish",

 

Y reiniciamos Tomcat:

systemctl restart tomcat9

 

Cambiando el fondo

Para cambiar el fondo y poner una imagen en vez del blanco que viene de manera predeterminada, en /var/lib/tomcat9/webapps/guacamole/guacamole.min.css; dentro de la sección div.login-ui{

De:

background:white;

A:

background-image: url('RUTA.jpg');background-size:cover;

 

Y también en /var/lib/tomcat9/webapps/guacamole/guacamole.css Dentro de la sección div.login-ui {

De:

background: black;

A:

background-image: url('RUTA.jpg');
background-size:cover;

 

Cambiando el recuadro central

Si nos apetece modificar el cuadro central, por ejemplo quitarle el borde y la sombra, y hacerle un sombreado que quede más elegante, en /var/lib/tomcat9/webapps/ROOT/guacamole.min.css; dentro de la sección .login-ui .login-dialog{

Quitamos:

border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);

Añadimos:

background-color:rgba(0,0,0,0.2);

 

Y lo mismo en /var/lib/tomcat9/webapps/ROOT/guacamole.css Dentro de la sección .login-ui .login-dialog {

Quitamos:

border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);

Añadimos:

background-color:rgba(0,0,0,0.2);

 

Campo usuario y contraseña

El campo de usuario y contraseña es transparente, lo ponemos blanco de la siguiente manera, en /var/lib/tomcat9/webapps/ROOT/guacamole.min.css; dentro de la sección .login-ui .login-fields .labeled-field.empty input{

De: 

background: transparent;

A:

background: white;

 

E igualmente, en /var/lib/tomcat9/webapps/ROOT/guacamole.css Dentro de la sección .login-ui .login-fields .labeled-field.empty input {

De: 

background: transparent;

A:

background: white;

 

Color de botón

Y venga por último, para cambiar el color del botón, cada uno a su gusto, ¡eh!: En /var/lib/tomcat9/webapps/ROOT/guacamole.css en la sección de input[type=»submit»], button, a.button {

De: 

background-color: #3C3C3C;

A:

background-color: #7d0458;

 

Haciendo el cambio persistente

Algo muy importante y que no hemos comentado hasta ahora, pero el cambio del Logo, fondo y los CSS para su tamaño se pierden cada vez que la máquina se reinicia, para ello, nos haremos unas copias de los archivos modificados en /home/guacamole/no_borrar/

cp /var/lib/tomcat9/webapps/ROOT/guacamole.min.css /home/guacamole/no_borrar/
cp /var/lib/tomcat9/webapps/ROOT/guacamole.css /home/guacamole/no_borrar

 

Y con un pequeño script en el cron copiará cada vez que arranque el logo, fondo, los css… lo llamamos: (y lo hacemos ejecutable) /home/guacamole/no_borrar/cambia_tema_guacamole.sh con el siguiente contenido:

cp /home/guacamole/no_borrar/logo.png /var/lib/tomcat9/webapps/ROOT/images/guac-tricolor.png
cp /home/guacamole/no_borrar/guacamole.css /var/lib/tomcat9/webapps/ROOT/guacamole.css
cp /home/guacamole/no_borrar/guacamole.min.css /var/lib/tomcat9/webapps/ROOT/guacamole.min.css
cp /home/guacamole/no_borrar/en.json /var/lib/tomcat9/webapps/ROOT/translations/en.json
systemctl restart tomcat9

 

Y lo metemos en Cron por ejemplo para que cada vez que arranque la máquina lo cargue, con ‘crontab -e’:

@reboot sleep 30 && /home/guacamole/no_borrar/cambia_tema_guacamole.sh

 

 

Bueno, tras esta chapa, o txapa en Bilbao, espero que os haya quedado algo chulo, habéis visto que no cuesta nada poner un tema personalizado en Apache Guacamole, que con un Logo, un Fondo, cambiar el color al botón y alguna virguería más quedará totalmente corporativo, así si todos nuestros portales son custom, los usuarios tendrán una mayor sensación de confianza al entrar en los sitios, los jefes contentos…

¡Un abrazo a tod@s!

 

Posts recomendados:

Héctor Herrero
Últimas entradas de Héctor Herrero (ver todo)