Tema corporatiu a Apache Guacamole
En aquest post vam donar-li un toc preciós a Apache Guacamole, d'una banda li farem que respongui com el lloc predeterminat, vagi sense que els usuaris hagin de posar el /guacamole; i per a la guinda doncs el de sempre, posar-li un tema personalitzat, proper a l' usuari, corporatiu, amb els logos, fons, colors de l' empresa…
Bo, per 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. Bo, el que s' ha dit, 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. Simplement, 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:
<Ubicació /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/
I reiniciem 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);
Afegim-hi:
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);
Afegim-hi:
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,
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”], botó, 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, per a això, 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
Bo, 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!
