guacamole-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Mike Jumper <mike.jum...@guac-dev.org>
Subject Re: Branding the login page
Date Fri, 20 Jan 2017 18:44:53 GMT
On Fri, Jan 20, 2017 at 10:18 AM, Jorge Camara <jorge.camara@webaula.com>
wrote:

> Hi,
>
> The name "Apache Guacamole" you can change on translations files :
>
> ...tomcat8/webappas/guacamole/translations/en.json
>
> and the logo you can change in directory:
>
> ...tomcat8/webapps/guacamole/images/
>
>
It's not recommended to modify these files within Tomcat's webapps
directory, as it will not be stable across redeploys or upgrades. Part of
the point of providing this functionality through extensions is to keep
these kinds of customizations independent from Tomcat, the webapp, upstream
changes, etc.

To achieve the same with an extension, you would create a .zip file named
"whatever-you-want-to-call-it.jar" containing:

* A "guac-manifest.json" file describing the contents of the extension
(more on this below). The format of this is described here:
http://guacamole.incubator.apache.org/doc/gug/guacamole-ext.html#ext-manifest
* An image to be used as the logo (declared within the "resources" section
of guac-manifest.json)
* A translation file overriding the strings you wish to override (declared
within the "translations" section of guac-manifest.json)
* A CSS file which overrides the style of the login screen, applying your
logo (declared within the "css" section of guac-manifest.json)

Your guac-manifest.json would end up looking like:

    {
        "guacamoleVersion" : "*",
        "name" : "Some meaningful, human-readable name",
        "namespace" : "some-unique-namespace",

        "css" : [
            "css/login-override.css"
        ],

        "resources" : [
            "resources/your-logo.png" : "image/png"
        ],

        "translations" : [
            "translations/en.json"
        ]

    }

css/login-override.css:

    .login-ui .login-dialog .logo {
        background-image:
url('app/ext/some-unique-namespace/resources/your-logo.png');
    }

translations/en.json:

    {
        "APP" : {
            "NAME" : "Name of Your Choice",
        }
    }

And then "resources/your-logo.png" as well.

Once all that is zipped together and dropped into
GUACAMOLE_HOME/extensions/ as a .jar file, it will automatically be loaded
by Guacamole when the webapp starts. The custom CSS will be appended to the
existing CSS, overriding the original styles, the custom translations will
be overlaid on the existing translations, overriding only the strings you
specify, and the custom logo will be served dynamically from within a
directory named after your chosen namespace. You'll probably want to make
other changes to the CSS, especially if your logo has a different aspect
ratio, but this is a start.

Other than overriding the CSS, there's really not much programming
involved; it's a matter of adding whatever files you need to override what
you're looking to override, and then declaring those files within
"guac-manifest.json":

http://guacamole.incubator.apache.org/doc/gug/guacamole-ext.html#ext-manifest

- Mike

Mime
View raw message