Branding the User Interface

Lee David Painter

Introduction

LogonBox allows you to brand your tenant domain with it's own unique logo and colour scheme, giving you complete control over the CSS used by the user interface.

 

Step 1. Locate Branding Configuration

The Branding configuration can be found in the Appearance menu.

 

Step 2. Basic Options

The basic options available are to set a Brand Name, which appears in the Title of the HTML document, set some Footer Text that replaces the LogonBox copyright text in the footer and a URL that becomes the link for the brands logo.

You can also upload a logo and favicon for the site here. Here I have begun to configure the site with our old Nervepoint Technologies brand information.

 

Once you have applied the settings, you will need to force a page update with CTRL-F5 or clear your browsers cached data before you will see the new logo.

You will see that the page title has now changed

And that the logo has changed too.

 

Step 3. Modifying CSS

The most powerful feature in branding is the ability to override some of the standard CSS for the LogonBox user interface. This is how we can dramatically change colours, fonts to make the user interface feel more like your own brand.

 

 

 

 

There are some other changes we'd like to make, for this example we want to match the Nervepoint Technologies colours in the header and footer. So changing the background to black (which requires 3 different changes).

The main header at top of screen background colour:

body .navbar-header {
background-color: #000000;
}

The little areas to left and right of the header background colour:

#header {
background-color: #000000;
}

Footer background colour, plus the font colour in the footer to white:

body .navbar-inverse {
background-color: #000000;
color: #FFFFFF

}

 

We also want to change the color of the primary buttons. So we need to set the button styles as follows:

.btn-primary, .btn-primary[disabled] {
  background-color: #484848;
}

.btn-primary:hover {
  background-color: #44b1d9;
}

There is just one final change to make, the default font. Since its a google font we can add a new stylesheet so the font is linked into the page.

I then just need to set the font in the body style.

body {
  padding-top: 70px;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

And that's a pretty good recreation of the Nervepoint Technologies brand.

 

Reminder: To see any changes after applying CSS overrides, you must perform a force refresh of the page so that LogonBox updates its cache (with CRTL-F5).

 

Step 3a. Modifying CSS to set a background

If we want to set a background image, we can either refer to an image hosted elsewhere or we can host this file on the LogonBox server itself.
We can do this on the LogonBox server by first installing the HTML Publisher feature from Updates, Features & Licensing, in the System section.

Download the feature and restart the server.

Now if you create a www folder in /opt/hypersocket-idm/conf (or C:\Program Files\LogonBox\conf for Windows), any file in that www folder will show at the root of the web service.

So for this example, we now go to the Appearance menu in the left menu.

On the Colors tab, change the background from the default #1e0c51 to your new color (here we will do #dd3333).

For the background image, click the Stylesheet tab as we will use a CSS override for this.

We uploaded a file called logonboxBackground.png, so we enter this CSS in the Stylesheet:

#content {
background-image: url("/logonboxBackground.png");
background-repeat: no-repeat;
background-size: cover;
}

Click Apply to save these changes.

Note that LogonBox cases client side items so to immediately see the changes, perform a force refresh of your browser to see the result.