How to Customize Branding in the Partner Portal

Purpose

As an Administrator to your portal you will be able to control the signature color used.

Below you will find a breakdown of the CSS code to help you implement the HSL (hue, saturation, lightness) formatting.

Copy this CSS Branding Code:

:root {
--new-primary-color: 0, 100%;
--new-primary-color-l: 50%;
}

CSS Code Breakdown
The primary color serves as the dominant color throughout the application's UI. When changing the primary color, the hover effects will be automatically updated to the darkened version of the color. To modify it, update the primary color variable in the style sheets. The CSS code above uses 3 numeric values to achieve the expected result.

• The first numeric value listed is marked as ‘0’ this represents the hue
• The second numeric value listed is marked as ‘100%’ this represents the
  saturation
• The third numeric value listed is marked as ‘50%’ this is represents the
  lightness

Below you will find a visual guide that shows before and after screenshots of the
branding being applied to an example portal.

Please note: The red color tone is only a visual representation for this guide. A user with the role of Admin will be able to control the color used on the portal.

Preview - User Sign In Page

*The bullet points below are areas where your signature branding color will be applied

• Login button
• Lost your password link
• Request and account link

• [Before screenshot]

[After screenshot]

Preview - Dashboard

*The numbed points below are areas where your signature branding color will be applied

1. Sub Header Icons - Communities, Alerts, Settings
2. Hero Image Button - Default color & Mouse over hover color
3. Quick Links - Numbers listed, link text color & View My Channel
4. Manager button - Mouse over hover color
5. Dashboard Buttons - Icon color, Arrow color, Mouse over hover color
6. Calendar Events - Link text color & Mouse over hover color
7. My Pins - Mouse over hover color
8. Popular Content - Title color & header tab color

• [Before screenshot]

• [After screenshot]

How to Apply Your Signature Color Branding

• Click the Settings cogwheel on the top right of the portal

• Click on Advanced Settings

• On the left side navigation click Custom Code

• In the Custom CSS section, paste the provided CSS code listed at the start of this guide and click the Save button once changes have been made

• Once your CSS Code has been saved, refresh your browser and you should now see your signature branding color has been applied to the portal.

If you still have questions, please reach out to your Customer Success Manager or Open a Support Ticket.