refined branding instructions

This commit is contained in:
itiligent 2025-01-12 15:46:51 +11:00 committed by Itiligent
parent 152e9d9d73
commit 083109946f

View file

@ -15,8 +15,17 @@ 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:
- `MANIFEST.MF`: All values in here can be updated. Be aware that the "Name:" value MUST use same value in front of the the .jar creation command shown above in the 1st line e.g. `Name: branding` expects branding.jar
- `guac-manifest.json`: The "name:" value in here can be changed to anything. The "namespace:" value given in this file MUST match the namespace image path line found in `custom-theme.css`, eg.`background-image: url('app/ext/custom-namespace/images/logo.png');`
- `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.