Your GUI – Your Way

October 2, 2019

Rob Wilson, Manager, Technical Services (EMEA), VOSS Solutions

Ask any company how much of their budget is spent on branding, and you’ll get answers ranging from “a lot!” to “an awful lot!”. Branding is extremely important to any company; some corporate brands and colour palettes are so strong that they are instantly recognisable.

Isn’t it time, then, to stop using the default branding that came with your CUCDM or VOSS-4-UC installation and make your own mark on it? Let’s not forget, if you are a service provider, this isn’t just about your brand; your customers will also be highly motivated to see their own branding on the GUI. VOSS makes this possible, and it’s easy to achieve.

VOSS-4-UC provides three different GUIs:

• Business Administration Portal
• Advanced Administration GUI
• Self-service GUI

The Business Administration Portal (hereon known as BAP) is the latest interface to be developed for VOSS-4-UC, and has been designed to allow simple customisation of the theme without having to get your hands dirty with Cascading Style Sheets (CSS) or Leaner Style Sheets (Less). In this blog I’m going to concentrate on the BAP GUI and what elements of the theme you have control over.

Here’s what the Theme Management dialogue looks like in VOSS-4-UC 19.1.2:

At first glance, this looks similar to the dialogue in previous versions of VOSS-4-UC, but the new functionality lies behind the ‘Theme Customisation’ tab at the top of the screen:

Each colour field can be populated with an RGB hex code value. For example, #00205B represents VOSS blue (Pantone 281). Let’s take a look at the BAP GUI to see where each of the fields is used.

• Primary Colour is used as the background for headers, links and buttons, and is the dominant colour in the theme—the light blue backgrounds and text in the screenshot.
• Dark Primary Colour is used for footers, sub-menus and for contrasting with the Primary Colour—the dark blue panels in the screenshot.
• Light Primary Colour is used when hovering over certain Primary Colour text and elements (not shown).
• Very Light Primary Colour is used for the graphic elements in the top bar.
• Accent Colour is used to draw attention to important elements and to highlight active buttons and text—the bright green bar highlighting the words ‘Site Management’ in the screenshot.
• Light Accent Colour is used when hovering over text in the Accent Colour (not shown).

Currently, the text in the header (showing the site name ‘INV-Boston’ in the screenshot) is fixed as white. In a forthcoming release of VOSS-4-UC you will have more control over the colour selection, but for now you need to bear in mind that the background colour needs to sufficiently contrast with white text.

In addition to the colour settings there are three fields where graphical elements can be specified:

• ‘Logo’ is the logo shown at the top left of the screenshot, as well as on the login screen. Note that the background colour that the logo is displayed against is the Primary Colour. Be sure to select a colour for your logo that is a good contrast with the background colour. Most organisations have a selection of logo colours specifically for using against light or dark backgrounds. Top-tip: Make the background of the logo transparent; you definitely want to avoid this:

• ‘Login Background’ is the image displayed behind the login box. Notice that the login pane is quite large and has a semi-transparent background to it. Try to avoid an image that has a lot of focus on elements that will appear behind the login box:

• Finally, ‘Menu Background’ refers to the panel on the left hand side on top of which the menu text is overlaid. Notice in the logged-in screenshot above how dark the element is; it is a good idea to insert a dark image that isn’t visually busy here because the text colour is fixed as white.

Top-tip: hovering over the fields for the graphics will display help text that tells you what the maximum dimensions and file size are for each element.

Getting your theme to look just right might take a few attempts, but with the simple theme settings at your disposal you can chop and change to your heart’s content. Remember that your GUI needs to be accessible, so don’t choose colour combinations that are a poor contrast or make the display hard to read. Contrast ratios for standard size text should be 4.5:1 or above, and there are a number of websites that can assist with measuring ratios and providing advice.

The Advanced Administration GUI will be phased out within the next year, to be replaced with the same look and feel as the BAP, at which point the same theme settings can be used to style the GUI. Until then, it is necessary to edit Advanced Administration themes using LESS and compile them into CSS, but that’s a whole different ball-game. Look out for how to do just that in my next blog.

For more information on VOSS GUIs, please contact us.