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).

 

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
}