diff --git a/guac-custom-theme-builder/README.MD b/guac-custom-theme-builder/README.MD index 94b9924..6c6250d 100644 --- a/guac-custom-theme-builder/README.MD +++ b/guac-custom-theme-builder/README.MD @@ -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.