The Look and Feel setting in Console allows you to manage branding across your tenant. This includes your primary and secondary colors, your logos and icons, your footer, your landing page, and your locales, or the terminology you’d like to customize across your tenant.

 

Use this setting to configure the look and feel of the learner experience in the Learning Platform. It will also update branding in Console, Boost, and legacy Admin applications. (Note: BluePrint’s look and feel is not configurable.)

 

To access these controls, open Settings > Look and Feel in Console. (NOTE: requires manage:branding permission.)

 

Managing Colors

1. Select Settings > Look and Feel
2. Choose the Colors setting
3. Select the Primary and Secondary colors for your tenant — either by entering the hex code or by selecting the color dot to pull up a color picker
   1. Primary color: main color of the platform (e.g., buttons, active navigational elements, icons, and more)
   2. Secondary color: accent color used throughout the platform (e.g., User Portal headers)
4. Select Publish

 

When selecting your colors, keep in mind:

• To use hex codes to set your Primary and Secondary colors (e.g. #0000FF is blue)

• Your primary and secondary color should represent your brand, but be aware that some colors have common digital associations outside of your brand

  • Gray: Often signals that a button or link is disabled or inactive

  • Red: Often signals urgency, warning, or an irreversible action

BenchPrep also strives to be color contrast compliant, meaning that foreground and background colors have enough contrast to meet standards set by the W3C. To help meet these standards, ensure that there is a strong contrast between a primary color text on a light background, or a light colored text on a primary color background. To test this, follow these steps:

1. Go to: https://contrastchecker.com

2. Set the hex code of your desired primary color as the Foreground

3. Set #F6F6F6 as the Background

4. Check the ratio shown

The ratio should be higher than 4.5:1 to meet WCAG contrast compliance.

 

Managing Logos and Icons

Your logos will appear to learners in the top-left corner of the Learning platform and Learning hub. They’ll also appear in Console, Boost Dashboard, Tenant Dashboard, Institution Admin, and Email templates.

 

1. Select Settings > Look and Feel
2. Choose the Logos and Icons setting
3. Upload your logo files in the Logos section
   1. The Color Logo and White Logo update your tenant branding
      1. NOTE: If you want to use a White Logo with a contrasting background color, reach out to your BenchPrep representative to set this as the default. While you can upload the logo, BenchPrep will need to configure the CSS branding.
      2. Make sure to follow our Best Practices for SVG Files guide.
   2. The Color PNG Logo updates your logo in emails, like registration and confirmation emails
4. Upload your icon files in the icons section
   1. The Favicon appears in the browser tab
      1. .ico file type is required. Follow our Favicon Best Practices guide for more information. 
   2. The Mobile Icon will act as a shortcut if the site is saved to a learner’s mobile home screen or browser
5. Select Publish

 

Managing Your Footer

The footer is the section at the bottom of a webpage. Your footer is available across all apps, including the landing page. Console does not have a footer.

 

1. Select Settings > Look and Feel
2. Choose the Footer setting
3. Select the Footer Type
   1. Default Footer: This allows you to customize text and links without coding in HTML
   2. Custom Footer: This allows you to customize your footer from scratch in HTML
4. Select Publish

 

Managing Your Landing Page

The landing page is used by learners who do not SSO into our platform and by most admins. This is usually the greeting page for your new users. 

 

1. Select Settings > Look and Feel
2. Choose the Landing Page setting
3. Select the Layout Type
   1. Default Layout: This allows you to customize the headings, buttons, and background images without coding in HTML
   2. Custom Layout: This allows you to customize your landing page in HTML
4. Select Publish Layout Copy or Publish Custom Layout
5. After you have completed the Layout section, choose your Background Image preference
6. Select Publish Background Images

 

Managing Locales / Terminology

Your locales are the terminology used throughout the Learning Platform. You can customize general terminology—like renaming Course, Discussions, etc.—as well as specific terminology—like renaming Strengths & Weaknesses, Game Names, etc.

 

Locales can not be removed from the Learning Platform.  If locales are left blank the locale will display the default terminology.

 

Control this setting to provide consistent terminology to your learners.

 

1. Select Settings > Look and Feel
2. Choose the Locales setting
3. Change the desired locales, following the definitions provided for each locale
   1. NOTE: To revert locales back to their defaults, remove the custom language and select Publish
4. Select Publish

After publishing, refresh your browser to see your changes.

 

Verifying Your Look and Feel

To verify your new branding changes, we recommend first refreshing your browser. Navigate to the appropriate application where you made changes (usually the Learning Platform or within Console itself) to confirm your changes.

 

If you’re still not seeing your changes, clear your cookies and cache.