Corporate theme in Apache Guacamole
In this post we are going to give a beautiful touch to Apache Guacamole, On the one hand we will make it respond as the default site, Go without users having to put the /guacamole; And to top it all off, the usual, put a custom theme on it, close to the user, corporate, with logos, funds, Company Colors…
Well, To remember, In a previous post we already saw How to install Apache Guacamole, además de how to integrate it into Active Directory. A great open-source solution that enables secure remote access to computers over the Internet. Well, As I said, Today it's time to change the subject and make it cool, we will see what to play minimally to leave it fine.
Default Site
So that Apache Guacamole is the default site in our Tomcat. Simply, We will stop Tomcat, rename the app to ROOT and start Guacamole again; In the port 8080 He will answer without /guacamole/
systemctl stop tomcat9 cd /var/lib/tomcat9/webapps/ rm -rf ROOT mv guacamole.war ROOT.war systemctl start tomcat9
But be careful! if we have reverse proxy with Apache, We also modify the /etc/apache2/sites-available/default-ssl.conf file with the following changes:
From:
<Location /guacamole/>
To:
<Location />
From:
ProxyPass http://XXX.XXX.XXX.XXX:8080/guacamole/ flushpackets=on
To:
ProxyPass http://XXX.XXX.XXX.XXX:8080/ flushpackets=on
And from:
ProxyPassReverse http://XXX.XXX.XXX.XXX:8080/guacamole/
To:
ProxyPassReverse http://XXX.XXX.XXX.XXX:8080/
And we restarted Apache:
Systemctl Restart Apache2
Changing the Logo
To change the logo, we simply replace it:
CP logo.png /var/lib/tomcat9/webapps/guacamole/images/guac-tricolor.png
To adapt the logo to the size that best suits us, in /var/lib/tomcat9/webapps/guacamole/guacamole.css within the .login-ui .login-dialog .logo section { Change:
| From: | To: |
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; |
And also in /var/lib/tomcat9/webapps/guacamole/guacamole.min.css within the .login-ui section .login-dialog .logo{
From:
...margin:.5em auto;width:3em;height:3em;background-size:3em 3em;-moz-background-size:3em 3em;-Webkit-B...
To:
...margin:.5em auto;width:235Px;height:55Px;background-size:235px 55px;-moz-background-size:235px 55px;-Webkit-B...
We can change the language and the short description by changing in /var/lib/tomcat9/webapps/guacamole/translations/en.json
From:
"NAME" : "Apache Guacamole", "NAME" : "English",
To:
"NAME" : "Access to My Computer", "NAME" : "Spanish",
And we restart Tomcat:
Systemctl Restart tomcat9
Changing the background
To change the background and put an image instead of the default white, in /var/lib/tomcat9/webapps/guacamole/guacamole.min.css; within the div.login-ui section{
From:
background:white;
To:
background-image: URL('RUTA.jpg');background-size:cover;
And also in /var/lib/tomcat9/webapps/guacamole/guacamole.css Inside the div.login-ui section {
From:
background: black;
To:
background-image: URL('RUTA.jpg');
background-size:cover;
Changing the center box
If we feel like modifying the central frame, for example remove the edge and shadow, and make it a shading that looks more elegant, in /var/lib/tomcat9/webapps/ROOT/guacamole.min.css; within the .login-ui section .login-dialog{
Remove:
Border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
Add:
background-color:rgba(0,0,0,0.2);
And the same in /var/lib/tomcat9/webapps/ROOT/guacamole.css Inside the .login-ui section .login-dialog {
Remove:
Border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
Add:
background-color:rgba(0,0,0,0.2);
Username and password field
The username and password field is transparent, we put it white as follows, in /var/lib/tomcat9/webapps/ROOT/guacamole.min.css; within the .login-ui section .login-fields .labeled-field.empty input{
From:
background: transparent;
To:
background: white;
And equally,
From:
background: transparent;
To:
background: white;
Button color
And come last, To change the color of the button, each to their own taste, ¡hey!: In /var/lib/tomcat9/webapps/ROOT/guacamole.css in the input section[type=”submit”], button, a.button {
From:
background-color: #3C3C3C;
To:
background-color: #7D0458;
Making the Persistent Change
Something very important and that we have not commented on until now, but the change of the Logo, background and CSS for its size are lost every time the machine restarts, for this, We will make copies of the modified files in /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
And with a little script in the cron it will copy every time you boot the logo, bottom, The css… We call it: (and make it executable) /home/guacamole/no_borrar/cambia_tema_guacamole.sh with the following content:
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
And we put it in Cron for example so that every time the machine starts it loads it, with 'crontab -e':
@reboot sleep 30 && /home/guacamole/no_borrar/cambia_tema_guacamole.sh
Well, Behind this badge, or txapa in Bilbao, I hope you have something cool, you have seen that it costs nothing to put a custom theme in Apache Guacamole, That with a Logo, a Fund, Change the color of the button and some more tricks will be totally corporate, so if all our portals are custom, Users will have a greater sense of confidence when entering the sites, The happy bosses…
A hug to tod@s!
