Easy-Guacamole-Installer/guac-custom-theme-builder/README.MD

## Custom branding & theme instructions ##

1. Install the Java JDK: `sudo apt update && sudo apt -y install default-jdk`
3. Modify `custom-theme.css` ,`guac-manifest.json`, `en.json` & `META-INF` as desired & add your logos to the images directory. (Logos must be .png files.) 
4. To commit your changes, run the below commands from within the custom-theme-builder directory, then refresh your browser to re-login to Guacamole:
```
# Run within the custom-theme-builder directory 
jar cfmv branding.jar META-INF/MANIFEST.MF guac-manifest.json css images translations META-INF
sudo mv branding.jar /etc/guacamole/extensions 
sudo chmod 664 /etc/guacamole/extensions/branding.jar 
TOMCAT=$(ls /etc/ | grep tomcat)
sudo systemctl restart guacd && sudo systemctl restart ${TOMCAT}
```

## Theme customisation hints: ##
  - Do not change any of the theme's directory structure or file names. File contents can be carefully edited according to the following constraints:
      - `META-INF/MANIFEST.MF`: All values in here can be updated, **BUT** be aware that `Name: branding` is linked to the commands above e.g. `Name: branding` expects `branding.jar` as the .jar filename
      - `guac-manifest.json`: The "name:" value in here can be changed to anything **BUT** the `"namespace" : "custom-namespace"` value MUST match the namespace image path line found in `custom-theme.css`, eg:
```
.login-ui .login-dialog .logo {
    background-image: url('app/ext/custom-namespace/images/logo.png');
    width: 7em;
    height:	7em;
    -webkit-background-size: 7em auto;

}
```
  - It is preferable to give css a range of logo sizes as shown in the template. The "smallIcon" value in `guac-manifest.json` is used for browser tab favicons. As such this file can be kept to < 80x80 pixels. The example used is 64x64 pixels.
  - Within `custom-theme.css`, you may need to experiment with the the height and width values under `.login-ui .login-dialog .logo` to scale your particular logo neatly within the dialog box. Another option is to make the login dialog box larger. Under `.login-ui .login-dialog`, experiment with adding a `max-width: 4in;` or similar. There's a ton of css options available and this template is just starting point, Google is your friend!
  - An easy way to debug and preview potential style changes is to tweak various values by setting your browser to developer mode. 
  - Your changes may occasionally appear not to update, if so clear your browser cache before doing any further debugging.