Customizing the portal with your company brand

 

NOTE  This feature is for MSP partners only.

Complete the following steps to customize your branding:

  1. Click the drop-down menu on your profile in the upper-right corner of the header.
  2. Click Change Branding Info.
  3. Click Change Image to upload your logos.
  4. Add in hex codes to customize your brand.
  5. Click Save Changes to save your changes.

Updating logos

Within the branding pop-up, you will have the option to upload the following three logos to the portal:

  • Report Logo Image: This is the logo that will show up on your deliverable reports. The reports have a white background so you'll want to make sure your logo will work on a white background for the reports.
  • Portal Logo Image: This is the logo that shows up at the very top of the left side navigation menu. It has a dark background so make sure you upload a logo that works well with a darker background. Recommended size: W: 105px, H: Any
  • Portal Icon Image: This is the logo that will show up when the navigation menu is collapsed. It's ideal to have a simple icon and not your full logo here. Please make sure your logo icon will work well with a dark background. Recommended size: W:34px x H:34px

When you're done, don't forget to click Save Changes at the bottom to save your changes.

Updating branding colors

To update colors within the portal to your brand colors such as buttons and icons, simply add the HEX code for your brand colors. You have the option to customize the following:

Global

  • Primary Accent: This applies to buttons, tabs, and various design elements within the platform. You should put your primary brand color here. If your primary brand color is a dark color such as a navy, it won't have as much contrast so you may want to select a lighter version of that color. This will change anything Vonahi Red on all Reports to the new primary color.
  • Primary background: The is used as the background color for various primary buttons and icons within the portal and assessment pages.

  • NOTE  You DO NOT have to fill this area out. Once you enter in a primary accent color, this field will auto-populate the same color at 20% opacity.

  • Secondary accent: This applies to secondary buttons, tabs, and various design elements within the platform. You should put any secondary brand color here. If your secondary brand color is a dark color such as a navy, it won't have as much contrast so you may want to select a lighter version of that color.
  • Secondary background: The is used as the background color for various secondary buttons and icons within the portal and assessment pages.

  • NOTE  You DO NOT have to fill this area out. Once you enter in a secondary accent color, this field will auto-populate the same color at 20% opacity.

Header

  • Profile Link Color: Changes the link color of the User's Profile link located in the upper right hand corner.
  • Subheader Link Color: Changes the breadcrumb links in the header as you navigate to different pages.

Sidebar

  • Icon Color: Changes the icon colors in the sidebar menu.
  • Active Text Color: Changes the text color of links.
  • Hover Text Color: Changes the text color of links when a user hovers over the link.
  • Outline Icon Color: Changes the icon colors in the assessments page.