One of AirSembly’s most important, and most popular features is the white-labelled UI. The ability to brand and customize AirSembly allows cloud providers (and their channel partners) to seamlessly integrate the software into their cloud business.

With the new and improved features for AirSembly 2.0, creating your branded storefront or management portal has never been easier. It only takes a few minutes to set up your custom branding – no coding required!

The following will guide you through the basic branding steps, and give you some insight into the more advanced features available to those familiar with HTML and CSS.

To get started, go to the Admin menu option and select Branding. You will then see several options to completely re-skin AirSembly within minutes.

 

AirSembly 2.0 Admin panel

 

 

1. Upload a Logo

You may upload a file of any size or proportion, but the optimal logo would be a horizontal version of at least 160px by 40px, or a 4:1 ratio. This logo will appear in the footer of the management UI and in the header of the marketplace storefront.

2. Enter a Slogan

Choose up to 64 characters to display next to your custom logo. You can use an identifier (e.g. Management Portal) or a company slogan (e.g. Empowering partners through cloud).

3. Font Stack

A web-safe font stack is a set of fonts that will display on almost any device regardless of browser or operating system. Select the one that best matches your corporate font, or match the one used for your website.

 

AirSembly branding options

 

4. Color Settings

The majority of the platform can be recolored quickly by choosing the three main colors from your current branding. You can do this in a variety of ways, but your end goal is to determine the RGB values for each of the colors.  As a general guideline, here are the uses for the three main colors.

Primary – Used for links, headings and colored text.
Secondary – A contrasting or complimentary color, commonly used in sidebars and other less prominent elements.
Tertiary – The highlight color used for hovers or special areas that need to stand out.

 

AirSembly Color Options

 

In addition to this you can choose to change status-related colors in the platform. The defaults are as follows:

Green – Success
Light Blue – Info
Yellow – Warnings
Red – Danger

You can alter the background and default text color for the platform as well. We recommend keeping these colors either black/dark grey or white/light grey for optimum readability.

5. Custom Header or Footer

If you need more in your header or footer area, you can simply paste any HTML into the appropriate text box to have it displayed on every page. With some basic coding skills you can take the exact HTML from your corporate website and place it at the top of your marketplace storefront. Use the custom footer to place links to social media or corporate information.

6. Custom CSS

The most powerful of all the branding settings, this text box allows anyone with CSS knowledge to completely change the look and feel of the entire platform. Simply add the CSS code to this area to apply to and element you wish to change or resize. Using this area you can customize down to the smallest detail.

It is here that you will add the CSS style to and HTML that you may have pasted into the custom header or footer areas.

 

AirSembly custom HTML and CSS options

 

7. Advanced Google Web Fonts

If you want to use something other than the set of web-safe fonts, you can choose from hundreds of fonts hosted by Google. In order to make use of these fonts you need to use this basic code snippet below, customized for the specific font you wish to use.

@import url(https://fonts.googleapis.com/css?family=Font+Name); 
body, html, h1, h2, h3, h4, h5, h6, nav, .btn, input, select, textarea  {
font-family: "Font Name", Helvetica, Arial, sans-serif !important; }
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,200italic,400italic,700italic);
body, html, h1, h2, h3, h4, h5, h6, nav, .btn, input, select, textarea  {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif !important; }
  1. Go to Google.com/fonts and select a typeface to use. Click “Add to Collection”.
  2. Click the “Use” tab in the bottom right corner, scroll down to the section 3: “Add this code to your website”
  3. Click “@import” this is the first line of code you need
  4. Paste CSS code below, and replace the ‘font-family’ with the code from section 4: “Integrate the fonts into your CSS”:
    body, html, h1, h2, h3, h4, h5, h6, nav, .btn, input, select, textarea  { 
       font-family: "Source Sans Pro", sans-serif !important;
    }
  5. Don’t forget to add the !important part. This will ensure all of the fonts will be this font and not the default fonts.

As you can see it’s quite easy to brand and customize AirSembly 2.0 – one of many enhancements you’ll find in the latest version of our complete cloud management platform.

Not already using AirSembly?

Now is a great time to contact us to learn how AirSembly helps vCloud Air Network Service Providers easily resell, manage, provision and bill for cloud services.  Let’s talk about your cloud business and see if our cloud management platform can help you grow your revenues while keeping operational costs in line.

 

Leave a Comment