Branding the User Interface

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.

Locate branding configuration and colors

The Branding configuration can be found in the Appearance menu.

In this first tab, Colors, allows you to easily set colors for three main areas of the product:

Background: This alters the color of the header, footer and icon backgrounds.

Foreground Color: This setting affects the icons in the header, the text in the footer and icon font colors.

Sidebar Font Color: The color of the text in the left-hand menu

Basic branding options

The basic options available in the Brand tab 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 brand's logo displayed at upper left.

You can also upload a Header 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.

Advanced settings: 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.

Appendix: Commonly used CSS overrides

Here are a few most commonly asked overrides:

The main header at top of screen background colour:

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

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

#header {
background-color: #006DB6;
}

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

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

Colour of the primary button (e.g Apply)

body .btn-primary {
background-color: #A2B4C6;
}

Colour of the Cancel button:

body .btn-danger {
background-color: #FF4500;
}

Colour of the lines on the burger menu button:

body #burger-toggle i {
color: #FFFFFF
}

Colour of the icons in the top right navbar:

.navicons a {
color: #FFFFFFF
}

Colour of the restart icon at bottom right:

#bottomMenu a {
color: #FFFFFF
}