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 algun post anterior ja vimos com instal·lar Apache Guacamole, a més de com integrar-ho en Directorio Activo. Una fabulosa solució de codi obert que permet l'accés remoto, segur a equips per Internet. Bo, el que s' ha dit, avui toca una de canviarle el tema i deixar-ho chulo, verem que tocar mínimament per deixar-lo fino.
Sitio predeterminat
Per que Apache Guacamole estigui com lloc predeterminat al nostre Tomcat. Simplement, pararemos tomcat, renombramos la app a ROOT y arrancar Guacamole de nuevo; en el portto 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 más nos encaje, en /var/lib/tomcat9/webapps/guacamole/guacamole.css dentro de la secció .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ó .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 canviar 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" : "Espanyol",
Y reiniciamos Tomcat:
systemctl restart tomcat9
Canviando el fondo
Para canviar el fons i posar una imagen en vez del blanco que viene de manera predeterminada, en /var/lib/tomcat9/webapps/guacamole/guacamole.min.css; dentro de la secció 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ó div.login-ui {
De:
background: black;
A:
background-image: url('RUTA.jpg');
background-size:cover;
Canviando el recuadro central
Si nos apetece modificar el cuadro central, por exemple 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 sòlid 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ó .login-ui .login-dialog {
Quitamos:
border: 1px sòlid 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ó .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 canviar el color del botón, cada uno a su gusto, ¡eh!: En /var/lib/tomcat9/webapps/ROOT/guacamole.css en la secció de input[type=”submit”], botó, a.button {
De:
background-color: #3C3C3C;
A:
background-color: #7d0458;
Haciendo el cambio persistente
Algo molt important i que no hem comentat hasta ahora, pero el cambio del Logo, el fons i els CSS per a la seva mida es perden cada vegada que la màquina es reinicia, per a això, ens farem unes còpies dels fitxers modificats a /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
I amb un petit script al cron copiarà cada vegada que s'iniciï el logo, fons, els css… li diem: (i el fem executable) /home/guacamole/no_borrar/cambia_tema_guacamole.sh amb el següent contingut:
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 exemple para que cada vez que arranque la máquina lo cargue, amb '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 alguna cosa chulo, he vist que no cuesta nada poner un tema personalitzat 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 són custom, los usuarios tindran una gran sensació de confiança al entrar en els sitios, los jefes contentos…
¡Un abrazo a tod@s!
