One of the most popular features of AirSembly is our white-labelled experience, offering you the ability to customize and brand the UI. You can add a custom header, footer, and use as much CSS as you wish in order to change the look of your UI. With a working knowledge of HTML and CSS, you can re-design any element to meet your specific desires.

Not a web designer? With our customization tools all you need is a little bit of code from your corporate website and some RGB color values. Let me show you how easy it is to do a basic re-skin of the AirSembly Client Portal.

For this you will need:

  • A corporate website and/or corporate brand standards (logo, fonts & colors)
  • A web browser with an ‘Inspector’ like Google Chrome or Firefox.
  • A basic text editor (PC: Notepad, Mac: Textedit)
  • Ability to copy, paste, find & replace

1. Getting Started

When you first load the AirSembly Client Portal, you will have a generic ‘sample’ brand with no specific color palette or logo. This tutorial will cover how to add your corporate logo and change the colors to match your brand’s standard color palette.

You can access the Branding Settings by going to Admin > Settings in the Partner Portal and scrolling down to the “Branding Area”.

step1-whitelabelstart


2. Adding your logo to the header

You can easily add your logo to your Client Portal. You likely have a logo hosted on your corporate website, so we’ll use that as our example for the purposes of this tutorial.

Using the Google Chrome Inspector, right-click the logo on your website. The Inspector window should open along the bottom of the browser window, and the HTML code for your logo should be highlighted.

2-inspector

The code you’re looking for should look something like this:

<img src="/assets/images/logo-sm.png" alt="AirVM">

This is probably the most technical part of the whole process if you have no knowledge of HTML. Right-click on top of the “<img …. >” tag and select “Copy”. Now that you have the exact image code you need, go ahead and paste that into the “Header Source” field of the Branding Settings.

The only thing you need to add is the full URL to that web image. Find the “src” attribute and add “http://yourwebsite.com” to the beginning of the URL:

<img src="http://airvm.com/assets/images/logo-sm.png" alt="AirVM">

Now your corporate logo should appear in the header of the platform.


3. Making the logo link “Home”

One of the earliest web conventions was making the logo link “Home,” to either your homepage or a specific landing page. Look for the hyperlink element <a href=”…. > and the closing </a> before and after the <img> tag of your logo.

Once again, simply copy right-click on the entire <a> tag’s source right from the Inspector and paste it into the Header Source text area. Setting the “href” attribute to “/” will take them to the landing page of your Client Portal, or if you like you can add the full URL of your corporate website (including the “http://”) to make the logo send them to your website instead.

Here is what ours looks like using both options :

Client Portal “Home” :

<a title="AirVM" href="/"><img src="http://airvm.com/assets/images/logo-sm.png" alt="AirVM"></a>

Corporate Website “Home” :

<a title="AirVM" href="http://airvm.com"><img src="http://airvm.com/assets/images/logo-sm.png" alt="AirVM"></a>

Now customers will see your corporate branding and can hit your specified landing page.


4. Customizing the Colors with CSS

We have set up the style CSS with three “standard” colors: A ‘Primary’ color , a ‘Highlight’ (bright or dark) of that color, and a ‘Secondary’ color. You can re-write all of the colors by doing a simple Find/Replace in the customization CSS file (Download here – Right-click and “Save As”).

Open the customization CSS file in a text editor (any free one will do, but my favorite is currently Sublime Text). You will see the top part of the file has instructions as well as the “default” color values. Here is where you get to play designer!

To determine the three color values you want to use, look over your website and determine the main color used in your branding. It’s probably the most prevalent one, or your “Primary” color.

On a Mac, open up the Digital Color Meter, and set it to “Display native values”. You may have to go to View > Display Values > As Decimals to get the RGB values we need.

On a PC you will need to install a Chrome extension like ColorZilla (https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) or Firefox (http://www.colorzilla.com/firefox/).

Now you can scroll your mouse over your corporate website until you hover over the color you want as your Primary one. Write the RGB value down and keep it handy.

3-digitalcolormeter

Using the digital colour meter on a Mac to find the RGB values of our corporate logo

 

To get the “Highlight” color, pick a lighter or darker version of your Primary color. You can simply add or subtract 20-30 to each of the RGB values, to a maximum of 255.

For the “Secondary” color, try to find something that contrasts with your main color selection. If your logo already has two colors, simply hover over it and write those values down. If not, pick a neutral grey or a complimentary color (Blue > Orange, for example).

Once you have your three RGB values, it’s time to Find/Replace the ‘default’ values from the custom CSS file.

In your text editor, go to Edit > Find/Replace. Put the original “Main” value in the “Find” box, and enter your new RGB values into the “Replace” box. Click “Replace All” and that’s it!

Do this two more times for the “Highlight” and “Alternate” colors and you will have re-colored most of the interface!

You can now copy and paste the entire CSS file into the “Custom CSS” text area of your Branding Settings. Click the “Update” button at the bottom to save your new changes.


5. Customizing the fonts 

By default, all of the fonts in the portal are set to Helvetica. You can change this by overwriting the CSS right below the color values. Look for this code :

/* CUSTOMIZE DEFAULT FONTS */
body,input, button, select, textarea, option.... {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

To change the headers, find this line :

/* CUSTOMIZE HEADERS */ 
h1,h2,h3,h4,h5,h6 { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

You can replace the font names with any web safe font name. You can check the font of your corporate website by using the Inspector tool. Right-click on any piece of text and go through the CSS viewer to find a “font” or “font-family” and you will see which fonts your brand currently uses.

 

Using Chrome's Inspector tool to find out our corporate web font

Using Chrome’s Inspector tool to find out our corporate web font

Using Google Web fonts (Advanced) 

You can use ANY Google web font available for free on https://www.google.com/fonts.

Select the font you want to use and “Add to Collection”, then click on the “Use” tab. Look for the Step 3: “Add this code to your website” and find the “@import” tab. Simply copy and paste that over anywhere in the Custom CSS text area. Now you can use Step 4’s “font-family” code.

Here’s an example of a Google Web font integration :

@import url(http://fonts.googleapis.com/css?family=Quicksand);
body,input, button, select, textarea, option... {
     font-family: 'Quicksand', sans-serif;
}

5-googlewebfonts


6. Finishing Touches

Click on the ‘Update’ button to check to see if your changes have been saved. What we have done is very minor in terms of the overall design of the platform, but you can always go back and edit the CSS again to further customize any element you need to. If you have a designer on staff, this whole process should only take them about 30 minutes.

6-beforeafter-anim

 

 

Leave a Comment