Customizing the Appearance of a Trust Center

Customizing branding for your Trust Center helps create a consistent and professional look that aligns with your organization’s identity. The Appearance configuration allows you to fine-tune the design and customize additional elements such as body text and header colors, as well as a wider range of options for buttons, links, toggles, and more.

Note:

For a quick and easy start, we recommend you the Brand option if you prefer to skip detailed customization for now. For more information, see Configuring Brand for Trust Center.

To customize appearance for a Trust Center

  1. On the Trust Center menu, select Portals. The Trust Center portals screen appears.

  2. Click the link in the Portal column for the Trust Center that you want to configure.
  3. Navigate to the Branding tab. The branding options for the Trust Center appear.
  4. On the Branding tab, select Appearance.


  5. Customize the branding of the Trust Center, as necessary. The Preview view on the right side of the screen allows you to instantly see how your branding changes will appear, helping you fine-tune the design before publishing. For more information, see Branding Tab Reference.
    Important:

    To help improve accessibility, any buttons, switches, or toggles will auto-compute their interior color to display with maximum contrast.

  6. Click the Save button.
  7. Click the Publish button to make your changes live.

Branding Tab Reference

Body text section





Field
Description
Color: Text

Select the text color which should appear on the body text.

Note:

Click the colored square to open the color selection panel. Once inside, you can choose your desired shade using the main color area, the color bar, or by using the color picker tool and clicking on any color you want to match. Repeat the same steps for the rest of color settings.

Click the Arrow icon to undo the changes and restore the previous color.

Color: Background

Select a Color or Image to display for your background.

  • Color: Select the background color which should appear on the body text.

  • Image: Click the Upload Image button to select an image to display as the text background.

Font: Typeface

Select the font type that will appear for body text.

Font: Upload custom typeface

Click the Add Font File button and select a custom font of your choice.

Headers section





Field
Description
Color: Text

Select the text color which should appear on the header.

Note:

This variable only applies to multi-page portals when viewed on desktop mode.

Color: Background

Select the background color which should appear on the header.

Buttons section





Field
Description
Primary buttons: Background

Select the background color which should appear on primary buttons.

Primary buttons: Text

Select the text color which should appear on primary buttons

Primary buttons: Hover

Select the color which should appear on primary buttons when hovering over them.

Primary buttons: Border

Select the border color which should appear on primary buttons.

Secondary buttons: Background

Select the background color which should appear on secondary buttons.

Secondary buttons: Text

Select the text color which should appear on secondary buttons.

Secondary buttons: Hover

Select the color which should appear on secondary buttons when hovering over them.

Secondary buttons: Border

Select the border color which should appear on secondary buttons.

Tertiary buttons: Background

Select the background color which should appear on tertiary buttons.

Tertiary buttons: Text

Select the text color which should appear on tertiary buttons.

Tertiary buttons: Hover

Select the color which should appear on tertiary buttons when hovering over them.

Tertiary buttons: Border

Select the border color which should appear on tertiary buttons.





Field
Description
Color: Text

Select the font color which should appear for links.

Color: Background

Select the color that will appear as the background for links.

Color: Hover

Select the color which should appear on the link when hovering over it.

Font: Font

Enter a value to define the font size of the link.

Toggle section





Field
Description
Color: Toggle on

Select the fill color which should appear when the toggle is on.

Color: Toggle off

Select the fill color which should appear when the toggle is off.

Radio buttons section





Field
Description
Color: Selected

Select a color to define the radius color of the button's corners when it is selected.

Color: Unselected

Select a color to define the radius color of the button's corners when it is unselected.





Field
Description
Color: Background

Select the color for the menu background, located on the left side of the screen.

Checkboxes section





Field
Description
Color: Selected

Select the fill color which should appear when checkboxes are selected.

Portal Screen Reference