Please visit us on our new Support Page
How to customize the Connection Broker login page - Powered by Kayako Help Desk Software
How to customize the Connection Broker login page
Posted by Louise Saidnawey, Last modified by Louise Saidnawey on 08 January 2021 03:10 PM

Connection Broker Login Page Design

The connection broker login page can be fully customized to match the style of your organization.  It helps to have the following files and information ready before you get started:

  • A company logo in png format that is approximately 350px x 50px
  • A 64px x 64px favicon.ico - this can be created by renaming a png file to ico.
  • Any additional graphics in png format
  • Any text content to be added
  • The hexadecimal value for any colors you'd like to add or change

 

EXAMPLE 1

White Background with Sidebar Logo and Graphic

This is a quick modification of the standard login page that makes the login page   quickly and easily look fully branded to your style.

 

Upload custom logo and favicon

  1. Go to System > Maintenance in the left column of the Connection Broker
  2. Under Third-Party Content select Upload third-party content
  3. Upload your company logo in png format as custom_logo.png to replace the Leostream logo with your logo.
  4. Upload your favicon.ico file to replace the Leostream icon in the browser tab.
  5. Upload any additional graphics to be displayed on the login page. In this example,  I have uploaded a file called Product Graphics-01.png
  6. Go to System > Settings in the left column.
  7. In the Web Browser Configuration Section, change the value for Display Connection Broker logo and favicon to > Custom
  8. To display additional graphics and text on the right side of the login page, use the field Additional text for right side of sign-in form

To display the image that was uploaded in third-party content, I have entered in:

<img src="/tpc/Product Graphics-01.png" style="max-width:90%">

Replace Product Graphics-01.png with your image name.

Click Save at the bottom.

  1. Use an incognito or private window to view the changes by visiting your broker login page.

 


Edit the CSS to change the colors and styles.

  1. To modify the styles of the login page, edit the custom css file at /home/leo/app/css/custom/custom.css

  2. Add the following lines to custom.css to change the styles of your page:

/* This makes the page background white */

#signin__background {background: #ffffff; }

.signin__content { background-color: #ffffff;  padding: 5px; }

 


/* Enhance field visibility with borders and background */

input.signin__field {border: 1px solid #cccccc;background-color: #fbe69d; color:#000000; }

input.signin__field:focus {outline: 1px solid #333333;background-color: #b1cbe3;  }

.signin__field-dropdown {border: 1px solid #cccccc;background-color: #fbe69d; color:#000000; }

 

/* Control Logo Size */

.signin__logo { max-width:350px; }

 

/* Less spacing on Sign in Button */

.signin__button {margin:0;}

 
Go to your connection broker login page to see the changes after the custom.css file has been updated.



EXAMPLE 2

Single Column Login, Seamless Tile Background

This builds on the last example, but we will have to make a couple of changes to the html template file, in addition to our custom css file, to achieve a more customized look for the login page

 

Upload the seamless image background

  1. Go to System > Maintenance in the left column of the Connection Broker

  2. Under Third-Party Content select Upload third-party content

  3. Upload your background image in png format. In this example, my background file is brokerlogin.png

 

Edit the CSS to change styles and background.

  1. To modify the styles of the login page, edit the custom css file at /home/leo/app/css/custom/custom.css

  2. Replace the first line of CSS (starting with #signin__background) with

#signin__background { background:url('../../tpc/brokerlogin.png') repeat #ffffff;  }

  1. Add the following lines to the end of custom.css to change the styles of your page:

 /* Single Column Version */

div.signin__form-box.signin__l-col-wrap {max-width:450px; width:450px;}

.signin__l-col {max-width: 100%; width: 100%;}

.signin__title {display:none; margin:0; padding:0;}

.signin__form-box {margin: 2em auto; }

 

Edit the HTML template

  1. To make the final edits, open the signin.html template file at /home/leo/app/templates/signin.html

  2. Hide the right column- comment out lines 68 - 71 by adding <!-- at the beginning of 68 and --> at the end of 71 like the following:

<!-- Hide the right column <div class="signin__l-col signin__content">

<img src="[% logo_file %]" class="signin__logo" alt="Logo">

<div class="signin__broker">[% right_side_text %]</div>

</div> -->

  1. At the beginning of line 43, before the form, add:

<!--Logo-->

<img src="[% logo_file %]" class="signin__logo" alt="Logo"><br />

<!--Additional Text /Image Previously Right Side-->

[% right_side_text %]

<!-end add-->

 

Go to your connection broker login page to see the changes after the custom.css file has been updated.

·        Be sure to back up the files as an update could overwrite your changes.

·        Third-party content is uploaded to /home/leo/app/tpc and can be added through the connection broker interface or directly to the file system.

 

(0 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: