Branding the login page

classic Classic list List threaded Threaded
28 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Branding the login page

rhawkins
I know you have created a new extension for Branding purposes and I bet
it works well.
What I can't figure out or understand is how you use it to modify
anything.  I have read the manual several times.  I'm stupid when it
gets to coding.
I know I can add stuff and modify in the
/var/lib/tomcat/webapps/guacamole folders but I would like to use the
Extension if possible so I can learn.


Can someone create a quick step by step to just change the logo and the
"Apache Guacamole"

Thanks..

Richard
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Jorge Camara
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/

Atenciosamente,

Jorge Camara

Analista de Suporte Sênior - Centro de Tecnologia

www.webaula.com.br
<a href="tel:%2B55%20%2831%29%202129-0550" value="+553121290550" style="color:rgb(17,85,204)" target="_blank">+55 (31) 2129-0550



2017-01-20 16:11 GMT-02:00 Hawkins, Richard <[hidden email]>:
I know you have created a new extension for Branding purposes and I bet
it works well.
What I can't figure out or understand is how you use it to modify
anything.  I have read the manual several times.  I'm stupid when it
gets to coding.
I know I can add stuff and modify in the
/var/lib/tomcat/webapps/guacamole folders but I would like to use the
Extension if possible so I can learn.


Can someone create a quick step by step to just change the logo and the
"Apache Guacamole"

Thanks..

Richard

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Jorge Camara
Hello,

By the way... anyone knows on how to resize the thumbnails on "recent connections"? 

Atenciosamente,

Jorge Camara

Analista de Suporte Sênior - Centro de Tecnologia

www.webaula.com.br
<a href="tel:%2B55%20%2831%29%202129-0550" value="+553121290550" style="color:rgb(17,85,204)" target="_blank">+55 (31) 2129-0550



2017-01-20 16:18 GMT-02:00 Jorge Camara <[hidden email]>:
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/

Atenciosamente,

Jorge Camara

Analista de Suporte Sênior - Centro de Tecnologia

www.webaula.com.br
<a href="tel:%2B55%20%2831%29%202129-0550" value="+553121290550" style="color:rgb(17,85,204)" target="_blank">+55 (31) 2129-0550



2017-01-20 16:11 GMT-02:00 Hawkins, Richard <[hidden email]>:
I know you have created a new extension for Branding purposes and I bet
it works well.
What I can't figure out or understand is how you use it to modify
anything.  I have read the manual several times.  I'm stupid when it
gets to coding.
I know I can add stuff and modify in the
/var/lib/tomcat/webapps/guacamole folders but I would like to use the
Extension if possible so I can learn.


Can someone create a quick step by step to just change the logo and the
"Apache Guacamole"

Thanks..

Richard


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Mike Jumper
In reply to this post by Jorge Camara
On Fri, Jan 20, 2017 at 10:18 AM, Jorge Camara <[hidden email]> 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":


- Mike

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Mike Jumper
In reply to this post by Jorge Camara
On Fri, Jan 20, 2017 at 10:34 AM, Jorge Camara <[hidden email]> wrote:
Hello,

By the way... anyone knows on how to resize the thumbnails on "recent connections"? 


For this or any other cosmetic changes, I would recommend fiddling with the CSS using your browser's dev tools. Once you have things looking how you like, you can make those changes permanent by putting them within an extension.

- Mike

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: Branding the login page

rhawkins
In reply to this post by rhawkins
Perfect. Ty

-------- Original message --------
From: Mike Jumper <[hidden email]>
Date: 01/20/2017 12:45 PM (GMT-06:00)
To: [hidden email]
Subject: Re: Branding the login page

On Fri, Jan 20, 2017 at 10:18 AM, Jorge Camara <[hidden email]> 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":


- Mike

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Jorge Camara
In reply to this post by Mike Jumper
Nice. Thank you!!!

Atenciosamente,

Jorge Camara

Analista de Suporte Sênior - Centro de Tecnologia

www.webaula.com.br
<a href="tel:%2B55%20%2831%29%202129-0550" value="+553121290550" style="color:rgb(17,85,204)" target="_blank">+55 (31) 2129-0550



2017-01-20 16:44 GMT-02:00 Mike Jumper <[hidden email]>:
On Fri, Jan 20, 2017 at 10:18 AM, Jorge Camara <[hidden email]> 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":


- Mike


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page - My setting - Branding.

rhawkins
In reply to this post by Mike Jumper
Branding the Guacamole system.

Basic Structure:

ext             - this will hold the guac-manifest.json and LoginDisclaimer.html
   css          - put css files here
   images       - put new images or log here
   translations - put en.json files here

root@snakeden:~/ext# tree
.
├── css
│   └── login-override.css
├── guac-manifest.json
├── images
│   └── snake2.png
├── loginDisclaimer.html
└── translations
    └── en.json


guac-manifest.json:

root@snakeden:~/ext# more guac-manifest.json

{

        "guacamoleVersion" : "*",
        "name" : "Snakeden",
        "namespace" : "snakeden",
        "translations" : [
                "translations/en.json"
         ],

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

         "html" : [
                "loginDisclaimer.html"
         ],

         "resources" : {
                "images/snake2.png" : "image/png"
         }
}


LoginDisclaimer.html:

root@snakeden:~/ext# more loginDisclaimer.html
<meta name="after" content=".login-ui .login-dialog">

<div class="welcome">

Welcome to Snake's Remote Access Server

<p>To log in,enter your user name and password and click Login.</p>
</div>


Login-override.css:

root@snakeden:~/ext/css# more login-override.css
.login-ui .login-dialog .logo {
        background-image: url('app/ext/snakeden/images/snake2.png');
        width: 5em;
        background-size: 5em 3em;
}

:::::  The width and the backgound-size setting I had to modify to make the logo look correct.


en.json:

root@snakeden:~/ext/translations# more en.json
{
    "NAME" : "English",

    "APP":{

        "NAME" : "Snake's Remote Access"
          }
}


After All file are set and you are happy.

zip -r snakeden.jar *
cp snakeden.jar /etc/guacamole/extensions/
service tomcat8 stop
service guacd stop

service guacd start
service tomcat8 start

I usually watch to verify it loaded in another session.

tail -f /var/lib/tomcat8/logs/catalina.out

10:39:10.685 [localhost-startStop-1] INFO  o.a.g.extension.ExtensionModule - Extension "MySQL Authentication" loaded.
10:39:10.725 [localhost-startStop-1] INFO  o.a.g.extension.ExtensionModule - Extension "LDAP Authentication" loaded.
10:39:10.745 [localhost-startStop-1] INFO  o.a.g.extension.ExtensionModule - Extension "Snakeden" loaded.

Final result:

http://snakeden.hopto.org:8080/guacamole/#/

It's not much but it looks OK...  

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page - My setting - Branding.

rhawkins
Logindisclaimer didn't post correct..

<raw>root@snakeden:~/ext# more loginDisclaimer.html


<meta name="after" content=".login-ui .login-dialog">

<div class="welcome">
<h2><span style="color: #0000ff;">Welcome to Snake's Remote Access Server</span></h2>
<p><span style="color: #0000ff;">To log in,enter your user name and password and click Login.</span></p>
</div>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page - My setting - Branding.

rhawkins
oh yea.  this is for Ubuntu.   I am guesing if you run Centos  the ext will be.  

/var/lib/guacamole/extensions..

r
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page - My setting - Branding.

schroeder
This post has NOT been accepted by the mailing list yet.
Is there a different process if I use Docker? I cloned the guac-client git, then copied the .jar file in extensions/ but all I get is a blank login page, and the source code for the page still references the original logos.

I'm unclear how to troubleshoot a failed theme.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

rhawkins
In reply to this post by rhawkins
Just updated to 9.13


http://snakeden.myvnc.com/#/

So as you can see the Extention held and I didn't have to do anything..

One note:  If you update to 9.13  make sure you run the 9.14 database upgrade..  Not sure what was wrong with the 9.13 update file but it didn't work.

snake
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page - My setting - Branding.

rhawkins
In reply to this post by schroeder
Can't help with docker.  
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: Branding the login page - My setting - Branding.

Goncalo Rosa
Can you share your .jar?

Gonçalo Rosa


W: www.v2s.us                   Skype: goncalo_rosa

-----Original Message-----
From: rhawkins [mailto:[hidden email]]
Sent: Thursday, June 15, 2017 09:33
To: [hidden email]
Subject: Re: Branding the login page - My setting - Branding.

Can't help with docker.  



--
View this message in context: http://apache-guacamole-incubating-users.2363388.n4.nabble.com/Branding-the-login-page-tp281p1147.html
Sent from the Apache Guacamole (incubating) - Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Karl Fiabeschi
In reply to this post by rhawkins
Very Nice, can you upload the diff between your conf and the standard conf?

maybe github it's the best way..

ty!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Mike Jumper
In reply to this post by rhawkins
On Thu, Jun 15, 2017 at 1:31 AM, rhawkins <[hidden email]> wrote:
Just updated to 9.13


There is no 0.9.13 release yet. The latest release is 0.9.12. If you see "0.9.13", you are building in-progress development code from git, not a stable release.


http://snakeden.myvnc.com/#/ <http://snakeden.myvnc.com/#/>

So as you can see the Extention held and I didn't have to do anything..

One note:  If you update to 9.13  make sure you run the 9.14 database
upgrade..  Not sure what was wrong with the 9.13 update file but it didn't
work.

This is because you are building from git master rather than building a release. The only releases are those present on the release archives page:


If you want to build the WIP, not-yet-released 0.9.13, you will need to use the "staging/0.9.13-incubating" branch. Building git master will include code that is not meant for the 0.9.13 release, hence the additional incompatible changes and additional upgrade script.

If you are looking for stable code, you should use the releases only. The git repository is meant for development and testing.

- Mike

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Karl Fiabeschi
In reply to this post by rhawkins
Hi guys, i tried what mike and rhawkins posted but i have a problem: i not see the login box.. only a blank page, if i try to debug with f12 i don't see any error, just a sad blank page.

my guac-manifest.json

{
        "guacamoleVersion" : "0.9.12-incubating",
        "name" : "test",
        "namespace" : "test",
        "translations" : [
                "translations/en.json"
         ],

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

         "html" : [
                "loginDisclaimer.html"
         ],

         "resources" : {
                "images/logotest.png" : "image/png"
         }
}

any tips?

thanks
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

Karl Fiabeschi
@rhawkins

can you share your .jar?

there is something wrong in mine.. i can't find
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Branding the login page

rhawkins
snakeden.jar

Here is my jar file..  It is the same as the above documentation.

Maybe it will help.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: Branding the login page

Goncalo Rosa
Thank you so much

Gonçalo Rosa


W: www.v2s.us                   Skype: goncalo_rosa

-----Original Message-----
From: rhawkins [mailto:[hidden email]]
Sent: Thursday, June 22, 2017 07:25
To: [hidden email]
Subject: Re: Branding the login page

snakeden.jar
<http://apache-guacamole-incubating-users.2363388.n4.nabble.com/file/n1202/snakeden.jar>  

Here is my jar file..  It is the same as the above documentation.

Maybe it will help.




--
View this message in context: http://apache-guacamole-incubating-users.2363388.n4.nabble.com/Branding-the-login-page-tp281p1202.html
Sent from the Apache Guacamole (incubating) - Users mailing list archive at Nabble.com.
12
Loading...