Support Blog – Customizing your Leostream Sign In Page

The Leostream 9.0 release modernizes our Connection Broker web interface. As part of that, we made it possible to completely customize and internationalize the look and feel of your Leostream Web browser Login screen. Read on to learn how

 

Internationalization, AKA, changing the text on the Sign in form.

Let’s start with the easiest customization, changing the text on the Sign in form. This allows you to change the sign in form to match the language of your users, or even pick a new set of terms. To do this:

 

  1. Log into your Connection Broker Web interface with your administrator account (the default is the admin user.)
  2. Go to the > System > Sign In Terminology page
  3. You can click Edit to modify the default values or click Define Terminology to create a new set of terms.
  4. Enter the new text you want to use for the Sign In form title, username, password, and domain fields, as well as the sign in button and click Save.
  5. If you defined a new terminology set, go back to the > System > Settings page and select your new set from the Sign In form terminology drop-down menu in the Web Browser Configuration section of the form. Don’t forget to save the form!

 

Changing the Logo

If you want to get even fancier, you can change the Leostream logo on the right side of the Sign In form. To do that, first make sure you have your logo saved to a file that meets the Leostream requirements:

 

  • The logo must be saved to a file named custom_logo.

 

  • The logo must be saved in one of the following formats:
  • .gif
  • .png
  • .jpg

 

After you have your file ready to go, upload it and set the Connection Broker to use it:

 

  1. In your Connection Broker, go to the > System > Maintenance page.

 

  1. Select the “Install Third-Party Content” option.

 

  1. Click Next.

 

  1. In the “Install Third Party Content” form that opens, enter or browse for the custom_logo file.

 

  1. Click Install to upload the file.

 

  1. Now, go to the > System > Settings page.

 

  1. In the Web Browser Configuration section, select “Custom from the Display Connection Broker logo and favicon” drop-down menu.

 

  1. Make sure you click Save at the bottom of the form to save the new setting!

 

Change the Sign In form colors and layout.

 

Beyond the text and logo, you have complete control over the Sign In form by editing the CSS-file used by the page. You’ll need to have access to the Connection Broker machine console and know a little about CSS. Here are some tips to get you going.

 

The most important thing to note is that the changes you make to the CSS-file will not persist when you upgrade your Connection Broker. Keep a copy of your edited CSS file someone outside of the Connection Broker. Then, after you perform an upgrade, restore the changes to your upgraded Broker.

 

Now, on to editing the file.

 

When you built your Connection Broker machine, you defined a user with sudo privileges. Log into the Connection Broker Linux console as that user, open a terminal (if you’re not already in a PuTTY session), and change to the Leostream css directory, for example:

 

cd /home/leo/app/css

 

The file you want to edit is named signin.css.

 

Before you make any changes, we suggest taking a backup:

 

cp signin.css signin_original.css

 

Then, edit away! For example, here are the classes you can edit to change the colors on the form.

 

  • .signin__button = Sign In button background

 

  • .signin__background = Entire page background plus background of left side of form with credential fields.

 

  • .signin__content = background color where image is located

 

  • .signin__license-link = The color of the license agreement link

 

That’s it! The options are endless! Any questions? Contact us at [email protected]